[모던 자바스크립트] 어썸한 Funtion 변경사항

들어가며

자바스크립트는 함수로 대표된다고 해도 과언이 아니다. 이제는 객체지향적인 방식으로 작업하는 개발자도 많지만 과거부터 함수를 정의하고 사용해왔기에 아직까지 함수 지향적인 코드를 접하는 분들도 많을 것이다.

이번에는 함수의 모던함을 정리하려고 한다. 주로 자주 반복되는 키워드를 생략하고, 축약하여 표현하는 방식으로 변경되었다.

크게 세 가지의 주제로 새로운 함수 사용방법을 정리했다. 그 전에 함수와 자주 혼동되는 메서드를 같이 비교하여 명확히 개념을 정리하고 시작하고자 한다.

 

함수와 메서드의 차이

함수와 메서드의 구분을 어려워하는 분들이 많아 간단명료하게 한 줄의 문장과 두 줄의 코드로 설명을 끝내겠다.

" 바로 호출 가능하면 함수, 다른 객체를 통해서 호출해야 하면 메서드 "

alert('Hello JS');        // 함수
console.log('Hello JS');  // 메서드

 

끝났다. 이제 함수의 새로운 모습을 알아보자.

 

 

새로운 함수의 사용 방법

1. 화살표 함수

지금까지 함수는 이렇게 선언했다.

function sayHelloVersion1() {
  console.log('Hello JS!');
}
const sayHelloVersion2 = function(name) {
  console.log(`Hello ${name}`);
}

function 키워드로 만드는 것이 정석이나, 함수가 일급객체인 자바스크립트의 특성을 살려 변수에 담는 방식도 대중적으로 사용된다.

이번에는 모던자바스크립트부터 사용할 수 있는 화살표 함수 표현식으로 변경한 코드다.

const sayHelloVersion1 = () => console.log('Hello JS!');
const sayHelloVersion2 = name => console.log(`Hello ${name}`);

동일한 기능을 담고 있지만 표현식만 화살표 함수로 변경하였다. 우선 function 키워드를 생략할 수 있고, 한 줄로 코딩이 가능하면 메서드 바디도 생략할 수 있다. 자바의 람다표현식과 비슷한 구조를 갖고 있다.

화살표 함수를 사용할 때 주의점은 this 키워드다. function 키워드로 선언한 함수와 화살표 함수로 선언한 함수는 서로 다른 this를 바라본다. 예제 코드를 보자.

const popupParamVersion1 = {
  popupId: 1,
  callback: function() {
    console.log(this.popupId);
  }
}
const popupParamVersion2 = {
  popupId: 2,
  callback: () => {
    console.log(this.popupId);
  }
}

popupParamVersion1.callback();  // 1
popupParamVersion2.callback();  // undefined

동일한 구조의 코드에서 callback의 선언을 화살표 함수로만 변경했다. 그랬더니 결괏값이 달라졌다. 왜일까?

function 키워드를 사용한 함수는 호출 시점에 따라 this의 값이 동적으로 변경된다. 따라서 callback()을 필드로 갖고 있는 popupParamVersion1 객체가 this가 된다.

function 키워드로 선언한 경우를 조금 더 자세히 보자.

const normalFunc = function () {
  console.log(this.constructor.name);
}
const popupParamVersion1 = {
  popupId: 1,
  callback: normalFunc
}
popupParamVersion1.callback();  // Object
normalFunc();                   //  Window

이렇게 normalFunc()을 어디에서 호출하냐에 따라서 Window 객체를 this로 사용하기도 하고, popupParamVersion1 객체를 this로 사용하기도 한다.

반면 화살표 함수는 this가 없다. 대신 화살표 함수부터 한 단계씩 위로 올라가면서 this로 사용 가능한 객체를 찾는다.

const arrowFunc = () => {
  console.log(this.constructor.name);
}
const popupParamVersion2 = {
  popupId: 2,
  callback: arrowFunc
}
popupParamVersion2.callback();  // Window
arrowFunc();                    //  Window

두 코드 모두 Window 객체를 this로 사용한다. 호출 위치가 this에 영향을 주지 않는다는 뜻이다. 대신 선언된 위치에 나를 대신해서 this를 제공하는 객체를 찾아간다.

위 코드는 arrowFunc()보다 상위 객체는 Window 객체만 존재하기 때문에 Window 를 this로 사용한다. 새로운 함수를 만들고 그 안에서 arrowFunc()을 호출한다면 새로운 함수를 this로 사용하게 된다.

 

 

반응형

 

2. 파라미터의 기본값 & 나머지 파라미터(Rest parameter)

드디어 파라미터의 기본값을 정할 수 있게 되었다. 지금까지는 파라미터 값을 확인하여 재할당해줘야 했지만 이제는 간단한 문법으로 정의할 수 있다.

function sayHello(greeting = 'JS') {
  console.log(`Hello ${greeting}!`);
}

sayHello();              // 'Hello JS!'
sayHello('Javascript');  // 'Hello Javascript!'

여기도 주의사항이 있는데 파라미터가 undefined 일 때만 의도대로 동작한다. null, 0, NaN 등에 대해서는 값으로 인식하여 파라미터로 사용하게 된다.

sayHello(undefined);  // 'Hello JS!'
sayHello(null);       // 'Hello null!'
sayHello(0);          // 'Hello 0!'
sayHello(NaN);        // 'Hello NaN!'

추가로 나머지 파라미터 문법도 생겼다. 파라미터의 개수를 동적으로 받는 방법이고 사용할 때는 전개 연산자처럼 …을 앞에 붙이면 된다.

function sayHello(greeting = 'JS', ...data) {
  console.log(`Hello ${greeting}!`); // 'Hello Javascript!'
  console.log(data.length);  // 3
}
sayHello('Javascript', 'HTML', 'CSS', 'JS');

‘HTML’, ‘CSS’, ‘JS’를 배열 형태로 …data에 할당받는다. 마지막 파라미터만 가능하며, 한 개만 선언할 수 있다. 일반적인 파라미터와 구분하기 위함이다.

 

3. 메서드 축약 표현

함수는 대상이 되지 않지만 메서드에 한해서는 축약적인 표현이 가능하다.

const popupParam = {
  paramId: 1,
  callback: function() {
    console.log('팝업종료');
  }
}

위 코드를 아래와 같이 축약된 표현이 가능하다. 말 그대로 function 키워드를 축약한 문법이기에 this를 사용하면 popupParam을 가리킨다. (화살표 함수가 아니다!)

const popupParam = {
  paramId: 1,
  callback() {
    console.log('팝업종료');
  }
}

 

마치며

함수의 어썸한 변경사항을 정리했다. 화살표 함수와 파라미터의 변경, 축약된 메서드 표현 등 세 가지로 요약할 수 있었다. 반복되는 문법을 생략하는 부분이 대부분이었으나 화살표 함수는 this가 없다는 특징이 있었다.

모던 자바스크립트의 변경사항 중 실무에 적용하기 가장 쉽다고 생각한다. 그러니 Just do it. 바로 실천해보자. 손에 익은 만큼 내 것이 되니깐.

 

 

 

[모던 자바스크립트 관련 글]

[모던 자바스크립트] var를 사용하지 않아야 하는 이유

[모던 자바스크립트] Array 스마트하게 사용하기

[모던 자바스크립트] Object 기깔나게 사용하기

[모던 자바스크립트] Promise 한 방에 뿌수기

[모던 자바스크립트] 이름은 Optional, 적용은 Required