자바스크립트(Java Script) 11장 함수 표현식, 화살표 함수

11장 함수 표현식, 화살표 함수

 

 

 

함수 선언문 vs 함수 표현식 

 

function YJ(some){
   console.log('Yo,${some}');
}


YJ();

위와 같은 10장에서 만든 함수 모양을 함수 선언문이라 한다.

 

 

 

let YJ = function(some){
   console.log('Yo,${name});
}


YJ();

위와 같은 모양을 함수 표현식이라고 한다.

 

 

 

이 두 개의 차이는 문법의 차이 이 외에

함수를 호출할 수 있는 타이밍의 차이가 있다.

 

 

 

YJ();


function YJ(some){
   console.log('Yo,${some}');
}

함수 선언문의 경우, 위와 같이 YJ();를 함수 선언문보다 위에 위치시켜도 동작이 가능하다.

그 이유는 호이스팅이라는 것 때문이다.

자바스크립트는 기본적으로 위에서 아래로 순차적으로 동작하나

내부 알고리즘에 실행 전 초기화 단계에서 선언된 모든 함수 선언문들을 미리 생성해두도록 되어 있다.

 

 

이와 반대로 함수 표현식은 코드에 도달하면 함수가 생성된다.

 

 

 

함수 선언문과 함수 표현식은 코딩하는 사람의 편의에 따라 사용하면 된다.

나는 귀찮아서 함수 선언문 쓸 듯....

 

 

 

---

 

 

 

화살표 함수(arrow function)

 

let add = function(num1, num2){
   return num1 + num2 ;
}

위와 같은 함수가 있을 때,

 

function 은  '=>' 로 

return은  '()' 모양으로 바꿀 수 있다.

 

 

 

1. let add = (num1, num2) => (num1 + num2 ;)



2. let add = num1 => console.log(num1);



3. let addError = () => {alert('error!');}



4.
let add = (num1, num2) => {
   const sum = num1 + num2 ;
   return sum;   
}

1번. 위의 함수를 화살표 함수로 바꾼 예.

2번. 변수가 한 개일 때는 변수의 괄호를 없앨 수 있다.

3번. 변수가 없을 때는 괄호가 있어야 한다. ()

4번. 함수의 내용물이 한줄로 축약이 되는 게 아니라면 '()'가 아닌 '{}' 를 써야한다.