[javascript]기본정리3

함수 

function getArea(){
  let width=10;
  let height=20;

  let area=width*height;
  console.log(area);
}
//함수이름정의

getArea();
console.log("함수 실행 완료");

 

function getArea(width, height){
  let area=width*height;
  return area;
}

let area1=getArea(100,200);
console.log("area:",area1);
console.log("함수실행완료");

함수이름을 정의하고 ()안에 매개변수를 설정해주면 

함수 외부에서 대입을 통해 함수를 사용할 수 있다. 

예를 들어 다음과 같이 getArea를 설정하고 그 안에 매개변수인 width와 height를 설정하면 된다. 

 

지역변수와 전역변수 

함수 안에서 정의된 함수를 함수 밖에서 이용하려고 하면 Error가 발생하게 되는데 이와 같이 변수를 지역변수라고 칭한다. 

그러나 함수 밖에서 정의된 함수는 함수안이든 밖이든 상관 없이 사용 할 수 있는데 이러한 변수를 전역변수라고 한다.

 

함수도 값으로 취급하여 상수나 변수에 담아서 사용할 수 있다

let hello=function(){
  return "안녕하세요 여러분";
};                 //함수를 변수에 담아서 사용할 때는 굳이 함수의 이름을 정의할 필요가 없다.
                   //담긴 변수의 이름을 함수의 이름처럼 사용하면 된다.

console.log(hello);

const helloText=hello();
console.log(helloText);
--> 안녕하세요 여러분

이러한 것을 함수 표현식이라고 부른다 ( 변수에 담아서 활용하는 방식) 

 

function helloFunc(){
  return "안녕하세요 여러분";
}

이러한 방식을 함수 선언식이라고 한다.

 

위 두가지 방식의 차이점 

console.log(helloB())

let helloA=function(){
  return"안녕하세요 여러분";
};

function helloB(){
  return "안녕하세요 여러분";
}

다음과 같이 아래에서 선언된 helloB가 위에서 정상적으로 출력되고 있다.이러한 현상을 hoisting이라고 한다. 

 

hoisting : 함수선언식으로 만들어진 함수들은 실행전에 코드 최상단으로 끌어 올려지는 것을 말한다.

그러므로 함수선언식의 경우 밑바닥에 함수를 선언을 해도 정상적으로 잘 출력할 수 있다. 

 

함수 표현식은 함수선언식과는 다르게 Hoisting의 대상이 아니므로 해당함수가 직접적으로 선언되기 전에는 접근이 불가하다

 

화살표 함수 : 함수 표현식을 더 쉽게 사용하는 방법

let helloA =() =>{
	return "안녕하세요 여러분";
}


let helloA = ()=>"안녕하세요 여러분";
console.log(helloA());

이것 또한 hoisting의 대상이 아니므로 순서를 잘 지켜서 사용해야한다.

 

콜백함수 

함수의 매개변수로 함수를 넘겨준거??

function checkMood(mood, goodCallback,badCallback){
  if (mood==='good'){
    //기분 좋을 때 하는 동작
    goodCallback();
  } else{
    //기분 안 좋을 때 하는 동작 
    badCallback();
  }
}

function cry(){
  console.log("Action::Cry");
}
function sing(){
  console.log("Action::Sing");
}
function dance(){
  console.log("Action::Dance")
}

checkMood("good",sing,cry);