- JavaScript - 객체 참조, 복사, 수정 등
- JavaScript - 함수 컨텍스트
- JavaScript - 함수 선언문 방식과 함수 표현식 방식의 차이
- JavaScript - 함수 표현식(functions expressions)과 화살표 함수(Arrow function)의 차이
3. 함수 선언문 방식과 함수 표현식 방식의 차이
함수 생성 방법
- 함수 표현식 (function expressions)
- 함수 선언식 (function statment)
- Function 생성자를 이용하는 방법 - 거의 쓰이지 않음
자바스크립트에서 함수를 만드는 방법은 주로 두 가지가 쓰인다. 함수 표현식 방법과 함수 선언식 방법은 함수의 이름과 호이스팅에서 차이가 있다.
함수 선언식 (function statement)
example1(); // 함수 호출 (호이스팅)
function example1() {
console.log('hello');
} // 함수 선언- 함수 선언 방식은 함수 리터럴 형식과 같다.
- 함수 선언문은 반드시 함수 이름이 명시되어 있어야 한다.
- 함수 이름으로 함수를 호출한다. ex) example();
함수 표현식 (function expressions)
const example2 = function () { console.log('hello') };
// 변수 example2에 함수 할당
example2(); // 함수 호출- 함수 리터럴로 생성한 함수를 변수에 할당하는 방법을 함수 표현식이라고 한다. 함수의 참조값이 example2라는 변수로 저장된다.
- 위의 예에서 example2는 함수의 이름이 아니다. function은 익명함수이고 함수가 할당된 변수인 example2를 통해 호출할 수 있다 ex)
example2(); - 함수 표현식에서
const example2 = function exam2 () { ... }과 같이 함수에 이름이 지정되었다고 하더라도 변수 이름을 사용하여 함수를 호출해야한다. 함수에 이름을 정하면 코드를 디버깅 할 때 도움이 된다. - 함수 표현식에 함수 이름을 지정하였다고 하여도, 호출 방식에는 영향을 미치지 않는다(호이스팅 되지 않음).
차이점
호이스팅(hoisting)
개념: 끌어올림. 자바스크립트 엔진이 script 태그를 만나면 자바스크립트 파일을 먼저 쭉 읽으면서 선언된 변수와 함수를 메모리에 저장한다. 이 과정이 끝나면 코드가 위에서 부터 차례대로 실행된다.
즉 코드에서 함수나 변수를 코드의 하단부에 선언했다고 하더라도 코드의 상단부에서 함수를 호출(실행) 할 수 있는 JavaScript 만의 특징이다.
example1(); // 'hello'
example2(); // undefined
function example1(){ console.log('hello') } // 세미콜론(;) X
var example2 = function(){ console.log('hello') }; // 세미콜론 O- 함수 선언식으로 선언된 함수는 호이스팅이 된다.
- 함수 표현식으로 선언된 함수는 호이스팅이 되지 않는다.
세미콜론(;)의 사용
- 함수 선언식에서 함수를 선언할 떄는 세미콜론(;)을 사용하지않는다.
- 함수 표현식으로 함수를 선언할 떄는 세미콜론을 붙인다.
참고
4. 함수 표현식과 화살표 함수의 차이
ES6 부터 추가된 화살표 함수 표현식은 함수 표현식(익명 함수)의 단축 표현입니다.
그러나 함수 표현식과 완전히 같은 건 아니므로 주의해야 합니다. 다음과 같이 화살표 함수 표현식으로 정의한 함수를 화살표 함수라고 합니다.
const squere = function(x) { return x*x };이를 화살표 함수 표현식으로 작성하면 다음과 같습니다.
const square = (x) => { return x*x };함수 표현식과 화살표 함수의 차이점
this의 값이 함수를 정의할 때 결정된다
함수 표현식으로 정의한 함수의 this 값은 함수를 호출할 때 결정됩니다. 메서드가 어디서 정의되었는지에 상관없이 this는 ‘점 앞의’ 객체가 무엇인가에 따라 ‘자유롭게’ 결정됩니다
그러나 화살표 함수의 this 값은 함수를 정의할 때 결정됩니다. 즉, 화살표 함수 바깥의 this 값이 화살표 함수의 this 값이 됩니다.
const obj = {
say() {
console.log(this); // [object Object]
const f = function() { console.log(this); }; // [object Window]
f();
const g = () => { console.log(this); } // [object Object]
g();
}
};
obj.say();함수 f는 say라는 함수의 중첩 함수이며 this의 값은 전역 객체를 가리킵니다.
한편 화살표 함수 g의 this 값은 함수 g를 정의한 익명 함수의 this의 값인 객체 obj를 가리킵니다.
화살표 함수는 call이나 apply 메서드를 사용하여 this를 바꾸어 호출해도 this 값이 바뀌지 않습니다.
const f = function() { console.log(this.name); };
const g = () => { console.log(this.name); };
const tom = { name: "Tom" };
f.call(tom); // "Tom"
g.call(tom); // ""arguments 변수가 없다
화살표 함수 안에는 arguments 변수가 정의되어 있지 않으므로 사용할 수 없습니다.
const f = () => console.log(arguments);
f(); // ReferenceError: arguments is not defined생성자로 사용할 수 없다
화살표 함수 앞에 new 연산자를 붙여서 호출할 수 없습니다.
const Person = (name, age) => { this.name = name; this.age = age };
const tom = new Person("Tom", 18); // TypeError: Person is not a constructoryield 키워드를 사용할 수 없다
화살표 함수 안에서는 yield 키워드를 사용할 수 없습니다. 따라서 화살표 함수는 제너레이터로 사용할 수 없습니다.
참조: 아소 히로시 - 모던 자바스크립트 입문(2018)
화살표 함수 다시 살펴보기(https://ko.javascript.info/arrow-functions)
