ex) function sayHello(){ console.log('hello'); }
ex) let sayHello = function(){ console.log('hello'); } 이름이 없는 함수 function(){ console.log('hello');} 를 만들고 let sayHello 변수를 선언해서 함수를 할당
실행하는 방식, 동작하는 방식 같음. 그럼 작성하는 문법외의 차이점은?
호출할 수 있는 타이밍!
-함수 선언문은 어디서든 호출 가능
ex) function sayHello(){ console.log('hello'); } sayHello(); ------------------------ sayHello(); function sayHello(){ console.log('hello'); } 이렇게 위로 이동시켜도 호출 가능
자바스크립트는 위에서부터 차례로 한줄 씩 읽으면서 실행
이렇게 순차적으로 실행되고 즉시 결과를 반환하는 프로그래밍 언어를
인터프리터 언어(Interpreted language)
그럼 어떻게 위 코드가 실행 될 수 있을까?
-자바스크립트 내부 알고리즘 때문
자바스크립트는 실행 전 초기화 단계에서 코드의 모든 함수선언문을 찾아서 생성해 두기 때문에 저 함수를 사용할 수 있는 범위는 코드 위치보다 위로 올라감
이를 호이스팅(hoisting), 코드위치가 실제로 올라간다는 의미는 아님
함수표현식은 이렇게 작동하지 않음
ex1) let add = function(num1, num2){ return num + num2; } -------------------------------- let add = (num1,num2) => (num1 + num2); -------------------------------- let add = (num1,num2) => num1 + num2;
세 코드 모두 같은 결과
- function 대신 인수 뒤에 =>
- 예제는 코드 본문이 한줄이고 return문이 있기 때문에 중괄호{}를 소괄호 ()로 바꿀 수 있음
- return문이 한줄이라면 소괄호() 생략가능
ex2) let sayHello = (name) => `Hello, ${name}`; let sayHello = name => `Hello, ${name}`;
-인수가 하나라면 인수의 소괄호() 생략가능
-인수가 없는 함수라면 () 생략 불가능
ex3) let add = function(num,num2){ const result = num1 + num2; return result;
-return문이 있다고 해도 return전에 여러 코드가 있을 시 ()사용 불가능하고 {}사용 해야함