함수 선언식 - Function Declarations
function test() { return 'function declarations' } test();
함수 표현식 - Function Expressions
var test = function () { return 'function expressions'; } test();
두 방식의 차이점
- 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.
console.log(test()) //@@@@ 정상 출력 console.log(test2()) // undefined 뜨고 TypeError 발생(TypeError: test2 is not a function) function test() { console.log('@@@@') } var test2 = function() { console.log('#####') }
- 함수 표현식은 closure로 사용 가능하다.
- 함수 표현식은 콜백으로 사용할 수 있다. javascript array 함수 중 callback으로 리턴받아 처리하는 함수들이 있다. map 함수 등등
화살표 함수 - Arrow Function
var test= () => function() { return 'arrow function' } test();
기본적으로 함수 표현식처럼 hoisting이 허용되지 않으며 함수 선언부보다 빠르게 호출할 시 TypeError가 발생한다.
함수 표현식과 화살표 함수의 차이점
- 보통 arrow함수의 특징처럼 this가 바라보는 곳이 다르다. 일반 함수 선언부와 같은 경우는 Window 객체를 바라보지만 arrow 함수의 this는 그 객체를 바라본다.
- arguments 변수가 정의되어 있지 않다.
const f = () => console.log(arguments); f(); // ReferenceError: arguments is not defined function g() { console.log(arguments) } g(); //[Arguments] {} const h = function () { console.log(arguments) } h(); //[Arguments] {}
- 생성자로 사용할 수 없다.
const Person = (name, age) => { this.name = name; this.age = age }; const tom = new Person("Tom", 18); // Person is not a constructor
- yield를 사용할 수 없다.
'Web > javascript' 카테고리의 다른 글
보자마자 유용하다고 느끼는 javascript 문법 (0) | 2022.06.14 |
---|---|
array.map 안에서의 async/await 사용하기 (0) | 2022.05.01 |
javascript - strict mode (0) | 2021.07.16 |
querySelector와 querySelectAll (0) | 2021.05.10 |
콤마 형태의 숫자를 정수형으로 바꾸기 (0) | 2021.04.28 |