ES6 문법 정리 시리즈1 (화살표 함수, classes, template literals)

WooSeong·2021년 4월 27일

학습 노트

목록 보기

16/22

화살표 함수(Arrow Function)

화살표 함수는 function을 => 로 대체한 함수 표현이다.

//기존 함수 표현식으로 표현한 함수
const foo = function(bar) {
	return `${bar}!`
};

//화살표 함수로 위의 함수를 다시 표현하면
const foo = bar => `${bar}!`;

간결한 표현을 통해 가독성이 높아지고 코드도 축약되는 장점을 가지고 있다. 또한 좀더 시멘틱한 표현이라 볼 수 있다. 예제의 표현을 있는 그대로 해석하면 'foo 는 bar를 ${bar}!로 만드는 것(함수)'라고 볼 수 있다. 인풋 과 아웃풋 사이에 어떤 명령을 수행하는 것을 화살표를 통해 직관적으로 표현하였다.

몇가지 주의사항

화살표 함수는 lexical this를 가지고 있다!

기존의 함수가 가지고 있던 dynamic this(자신을 호출하는 객체를 가리키는 this)가 아닌 lexical this(코드의 상위 스코프의 this)를 가지고 있다. 이 때문에 화살표 함수는 다음과 같은 상황에서 주의하여 사용하여야 한다.

call 또는 apply를 통한 피호출 : 화살표 함수에서는 this가 바인딩 되지 않기 때문에 call(), apply()는 인자만 전달할 수 있다. this는 무시된다.
메소드로 사용하기엔 부적합 하다.
생성자로써 사용할 수 없으며 new 키워드와 함께 사용하려 하면 오류가 발생한다.
prototype 속성이 없다.

생략 가능한 요소

매개변수가 하나일 경우 ()를 생략 가능하다.
매개변수가 없는 경우 ()는 생략할 수 없다.
화살표 함수의 유일한 문장이 return문일 경우 {}와 return 키워드를 생략 가능하다.

객체 리터럴 반환

const foo = () => {bar: 1}; //오류 발생 foo() 호출은 undefined를 반환
const foo = () => ({bar: 1}); //foo() 호출은 {bar: 1}을 반환

화살표 함수의 특징적인 표현 때문에 함수가 객체 리터럴을 반환 하게 할때는 주의하여야 한다. 일반적으로 객체로 표현하면 화살표 함수의 block바디를 의미하기 때문이다. 객체 리터럴을 반환 할때는 ()로 감싸 주어야 한다.

그 밖에 주의할 점

화살표 함수는 매개변수와 화살표 사이를 개행(줄바꿈)할 수 없다.
화살표 함수는 arguments 객체를 바인딩 하지 않는다.
화살표 함수의 매개변수에 구조분해할당을 적용할 수 있다.

classes

https://velog.io/@rladntjd320/Prototype-Chain

Templete literals

문자열(String)을 좀 더 편하게 작성할 수 있게 도와주며 '내장된 표현식'을 허용하는 문자열을 의미한다.

사용 방법

백틱 사이에 위치시키면 된다.
${}를 이용하면 표현식을 문자열에 삽입할 수 있다.
Templete literals는 줄바꿈도 그대로 표현해 준다.

Tegged templete(템플릿 태그)

템플릿 태그는 tag함수(함수의 이름은 무엇이든 될 수 있다.)를 이용하여 templete literals 내의 문자열과 표현식을 변경할 수 있다.

//함수를 선언, 함수 이름은 한정되어 있지 않다.
const tag = (strings, ...values) => {
	console.log(strings);
	console.log(values);

	return `bazzinga!`
};

//함수의 실행을 ()이 아니라 템플릿 리터럴로 한다.
tag`hello world! in ${2000 + 21} year`;
//console에 길이 2 배열이 표시된다. ["hello world! in ", " year", raw: Array(2)]
//console에 길이 1 배열이 표시된다. [2021]
//'bazzinga!'가 리턴된다.

tag함수의 2개의 매개변수

첫번째 매개변수
- 이름은 중요하지 않다. 첫번째라는게 중요하다.
- 첫번째 매개변수는 문자열 값의 배열을 포함한다.
- 배열의 요소는 접근 가능하며, 문자열은 표현식을 기준으로 구분된다.
- 위의 예제에서는 ${2000 + 21}을 기준으로 2개로 구분 되었다.
두번째 매개변수
- 두번째 매개변수 부터는 표현식의 값을 나타낸다.
- rest 패러미터로 받아 왔기 때문에 values 배열에 표현식의 값들이 저장된다.

MDN의 예제

1   var person = 'Mike';
2   var age = 28;
3
4   function myTag(strings, personExp, ageExp) {
5
6     var str0 = strings[0]; // "that "
7     var str1 = strings[1]; // " is a "
8
9     // 사실 이 예제의 string에서 표현식이 두 개 삽입되었으므로
10    // ${age} 뒤에는 ''인 string이 존재하여
11    // 기술적으로 strings 배열의 크기는 3이 됩니다.
12    // 하지만 빈 string이므로 무시하겠습니다.
13    // var str2 = strings[2];
14
15    var ageStr;
16    if (ageExp > 99){
17      ageStr = 'centenarian';
18    } else {
19      ageStr = 'youngster';
20    }
21  
22    // 심지어 이 함수내에서도 template literal을 반환할 수 있습니다.
23    return str0 + personExp + str1 + ageStr;
24
25  }
26
27  var output = myTag`that ${ person } is a ${ age }`;
28
29  console.log(output);
30  // that Mike is a youngster

4번째 줄에서 25번째 줄까지 함수가 정의되어 있다.
27번째 줄 output 변수를 선언함과 동시에 myTag 태그함수의 리턴을 할당해 주었다.
- myTag함수는 이때 '태그함수'로써 호출되었다. ()가 아닌 템플릿 리터럴을 통해서!
- 호출 순간 strings 변수는 표현식을 기준으로 2개(엄밀히 3개)의 문자열을 배열로 저장하였다.
  ['that ', ' is a '] 뛰어쓰기 까지 함께 저장 된다!
- personExp에는 person이 전달되고(첫번째 표현식의 값)
- ageExp에는 age가 전달된다.(두번째 표현식의 값)
str0에는 strings의 0번 인덱스가 할당되고 (that )
str1에는 strings의 1번 인덱스가 할당된다.(is a)
ageExp에는 현재 age(28)이 전달 되어 있다.
- ageExp가 99보다 작기 때문에
- ageStr에는 'youngster'가 할당된다.
23번째 리턴은 다음과 같다. 'that ' + 'Mike' + ' is a ' + 'youngster'