JavaScript에서의 함수

함수를 선언하는 방법 6가지

• 함수 선언

함수명을 생략할 수 없다

function declarationFunc() {
  ...
}

 

• 함수 표현식(익명)

const expressionFunc = function() {
  ...
}

 

• 함수 표현식(명명)

const expressionFunc = function named(nickname) {
  console.log(nickname)
}

expressionFunc('fodi') // fodi
named('fodi') // not defined

 

• 즉시 실행 함수

(function iife() {
  ...
})()

 

• function 생성자 함수

 문자열을 함수로 인식하여 JavaScript 코드를 실행하기 때문에 보안에 매우 취약하다.

const constructorFunc = new Function('a', 'b', 'return a + b');

 

• 화살표 함수

기타 함수 생성 방법과는 달리 몇 가지 차이점이 있다.

const arrowFunc = () => {
  ...
}

// 콜백함수로서의 화살표 함수
['a', 'b', 'c'].map(() => {
  ...
})

 

 

일반 함수와 화살표 함수의 차이

1. This binding

일반 함수는 호출되는 방법에 따라 this에 바인딩할 객체가 동적으로 결정된다. 하지만 화살표 함수의 this는 항상 상위 스코프를 가리킨다. 이러한 특성으로 인해 화살표 함수로 메소드를 정의하거나, 화살표 함수를 addEventListener 메서드의 콜백함수로 사용하는 것을 권장하지 않는다.

 

// Bad
const person = {
  name: 'Lee',

  sayHi: () => console.log(`Hi ${this.name}`)
};

person.sayHi() // Hi undefined

// Good
const person = {
  name: 'Lee',

  sayHi() {
    console.log(`Hi ${this.name}`)
  }
};

person.sayHi() // Hi Lee

 

 addEventListener 메서드의 콜백함수로 화살표 함수를 사용하면 this는 항상 상위 스코프인 전역 객체를 가리킨다.

 

const button = document.getElementById('myButton');

// Bad
button.addEventListener('click', () => {
  console.log(this === window);	// true
});

// Good
button.addEventListener('click', function() {
   console.log(this === button); // true
});

 

• Constructor

JavaScript에서 함수는 객체로 표현하기 때문에 객체의 생성자처럼 동작한다. 반면에 ES6에서 추가된 화살표 함수는 객체의 생성자처럼 동작하지 않는다. 결과적으로 일반 함수는 callabale이면서 constructor이지만, 화살표 함수식은 callable이면서 non-constructor이다.

 

// Bad
const func = (a, b) => {
  return {
    a,
    b,
  }
}

const newFunc = new func(2, 3); // Error: func is not constructor

// Good
const func = function(a, b) {
  return {
    a,
    b,
  }
};

const newFunc = new func(2, 3); // {'a': 2, 'b': 3}

 

 

참고

Arrow function | PoiemaWeb

[JavaScript] 화살표 함수와 this 바인딩

자바스크립트 함수 (1) - 함수 객체, 함수 객체 생성 : NHN Cloud Meetup