ES6) 화살표 함수에서 매개변수가 하나일 때에도 괄호를 생략할 수 없는 경우

화살표 함수 문법에서, 매개변수가 하나인 경우에는 매개변수를 묶는 소괄호를 생략할 수 있다.

 

let double = n => n * 2;

이렇게 말이다.

 

하지만, 전달하는 매개변수를 구조 분해 할당으로 받는 경우에는, 인수가 하나여도 괄호를 생략하면 오류가 발생한다!

 

가령, 객체의 너비를 두배로 계산해주는 doubleV2 함수를 정의한다고 가정해보자.

doubleV2 함수는 넘겨받은 객체의 너비값(width 프로퍼티)만을 구조 분해 할당으로 분해하여 인수로 사용한다.

이 경우, 파라미터가 하나여도, 매개변수에 괄호를 생략할 수 없다.

const double = {width} => width * 2;  (X)
const double = ({width}) => width * 2;  (O)

 

한 단계 더 응용해보자.

 

우리는 구조 분해 할당을 이용해, 객체 프로퍼티를 프로퍼티 키와 다른 이름을 가진 변수에 저장할 수 있음을 알고 있다.

아래와 같이 말이다.

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// { 객체 프로퍼티: 목표 변수 }
let {width: w, height: h, title} = options;

// width -> w
// height -> h
// title -> title

console.log(title);  // Menu
console.log(w);      // 100
console.log(h);      // 200

 

여기서, 객체의 너비 값을 2배로 계산하는 doubleV3는 이런 식으로 작성할 수 있다.

 

let options = {
  title: "Menu",
  width: 100,
  height: 200,
};

const double = ({width : w}) => w * 2;

console.log(double(options));   // 200

 

사실 매개변수가 하나여도 항상 괄호로 감싸는 것이 명확하고 좋은 것 같다.

 

 

화살표함수 문법을 처음 접하면 정말 헷갈린다. 그것도 실무 프로젝트의 코드로 먼저 접하면 더더욱..

필자도 자바스크립트는 이제 공부를 시작한 입장이라 포스트를 작성하면서도 많이 헷갈렸다.

하지만 포스트를 작성하기 위해 정리하다보니 화살표 함수, 구조 분해 할당에 대해서 조금 친숙해진 것 같다.

 

참조 : https://ko.javascript.info/destructuring-assignment

구조 분해 할당

https://ko.javascript.info/arrow-functions-basics

화살표 함수 기본

 

혹시 잘못된 부분이나, 보충이 필요한 부분이 있으면 댓글 남겨주시면 감사하겠습니다!