var vs let vs const
먼저 var로 선언된 변수는 함수 단위의 스코프를 가지게 되지만, let이나 const로 선언된 변수는 블럭 스코프를 갖게 됩니다. 즉, let이나 const로 선언된 변수는 선언된 블럭을 벗어나면 접근하기 어려워지는 것이죠.
또한 var는 hoisting되는 특징을 가지고 있지만, let과 const는 그렇지 않습니다. 만일 let 과 const를 초기화하기 전에 참조하려고 하면 레퍼런스 에러가 발생합니다.
그리고 let과 const를 사용해 IIFE처럼 데이터를 보호할 수도 있습니다.
위와 같이 사용이 가능한 이유는 const와 let이 블럭 스코프를 가지기 때문입니다.
String의 .startsWith() 그리고 endsWith() 메서드
위의 두 메서드는 ES6에서 새롭게 소개된 String 메서드입니다.
먼저 .startsWith() 메서드는 대상 문자열이 인자로 받은 문자로 시작하는지를 확인해주는 메서드입니다.
위의 예시에서 결과를 보면 문자열이 정확히 주어진 문자로 시작해야 true를 반환하는 것을 확인할 수 있습니다.
.endsWith() 메서드 역시 .startsWith()와 비슷하게, 대상이 되는 문자열이 인자로 받은 문자로 끝나는지를 확인하는 메서드입니다.
마찬가지로 문자열이 주어진 문자열로 정확히 끝나야만 true를 반환하는 것을 알 수 있죠.
추가적으로 .includes() 메서드는 문자열 중간에 인자로 받은 문자가 있는지 확인해주는 메서드입니다.
Template Literals
ES6부터는 더이상 문자열 중간에 변수나 함수 호출과 같은 것들을 삽입할 때 +, “” 조합을 사용하지 않아도 됩니다!
대신 ${}를 이용하여 중괄호 안에 변수나 함수 호출 같은 자바스크립트 코드를 넣습니다.
Arrow Fuction
ES6에서는 새로운 함수 표현 방법인 화살표 함수가 등장합니다. 화살표 함수로 함수를 작성하면 코드 길이를 조금 줄일 수 있는 장점이 있습니다.
화살표 함수를 사용할 때는 몇가지 규칙이 있습니다. 하나씩 살펴보도록 하겠습니다.
화살표 함수가 전달받는 인자가 하나가 아니라 두 개 이상인 경우에는 괄호를 사용해야 합니다.
화살표 함수 바디의 내용에 한 줄 이상의 코드를 작성하려면 중괄호와 return을 사용해야 합니다. (반환하는 것이 없다면 return을 사용하지 않아도 됩니다.)
화살표 함수는 자신만의 this를 가지지 않는 특징이 있습니다.
이에 대한 내용을 알아보기 앞서 다음의 상황을 먼저 살펴보겠습니다.
위의 두 예제에서 첫 번째 예제는 부피를 정상적으로 계산하고 있지만, 두 번째 예제는 정상적으로 계산하지 못하고 있습니다. 왜 그럴까요?
바로, 첫 번째 예제에서는 calcVolume이 box1의 메서드이고, 두 번째 예제의 calcVolume은 일반적인 함수이기 때문입니다.
즉, box1에서 .aboutBox() 메서드를 호출하였을 때 calcVolume의 this는 box1을 의미하지만, box2의 .aboutBox()에서 호출한 calcVolume의 this는 window를 의미합니다. 만일 두 번째 예제의 부피를 제대로 계산하고 싶다면 box2를 calcVolume과 바인딩하면 됩니다.
다시 화살표 함수로 돌아와보죠.
아까 화살표 함수는 자신만의 this를 가지지 않는다고 하였죠.
무슨 의미 일까요?
예제를 살펴보겠습니다.
화살표 함수로 작성된 calcVolume은 부피를 제대로 계산하고 있습니다. 화살표 함수가 자신의 this를 가지지 않는다는 것은 this가 window를 가리키는 것이 아니라 box3를 가리킨다는 의미입니다.
다시말해서 화살표 함수는 lexical this 키워드를 공유한다는 의미가 되죠. 위의 예제에서 그 대상은 .aboutBox() 메서드이므로 this 는 box3를 의미합니다.
다음은 메서드를 화살표 함수로 작성하는 경우입니다.
결과가 이상합니다. 왜 그럴까요?
앞서 말한 것처럼 화살표 함수는 화살표 함수를 감싸고 있는 것(?)의 lexical this 키워드를 공유하기 때문입니다. 여기서 화살표 함수를 감싸고 있는 것은 바로 글로벌 컨택스트이다. 따라서 위의 .aboutBox() 메서드는 글로벌 this 키워드를 공유하게 됩니다.
함수는 호출될 때 스코프를 갖는게 아니라 선언될 때 스코프를 가집니다. 따라서 예제 4의 .aboutBox()가 선언될 때의 lexical 스코프는 글로벌 스코프이므로 this 키워드는 글로벌 this 키워드, 즉 window가 됩니다.
마지막으로 하나만 더 살펴보겠습니다.
위의 예제에서 화살표 함수가 선언될 때 lexical scope에서는 this 키워드가 Person의 인스턴스 이므로 this는 Ujeon이 됩니다.
Arrays
ES6에서 배열을 위해 제공하는 것들을 살펴보겠습니다.
.from() 메서드
querySelectorAll()으로 엘리먼트를 가져오면 객체와 같은 배열인 NodeList를 반환합니다.
이 NodeList에는 배열 메서드를 사용할 수 없기 때문에 배열처럼 만들어 주어야 하는데, ES6 이전에서는 보통 slice().를 사용하여 NodeList를 배열로 만들어 주었습니다.
ES6에서는 조금 더 간단하게 작성할 수 있도록 .from()메서드를 제공하는 데요, 사용 방법은 다음과 같습니다.
for … of 구문
forEach나 map 메서드는 배열을 반복하여 무언가를 할 수 있게 하는 도구이지만, continue나 break를 사용할 수 없다는 단점이 있습니다.
따라서 ES5에서는 continue나 break를 for문 안에서만 사용 가능 하였죠.
ES6에서는 조금 더 간단하게 작성할 수 있도록 for … of 문을 제공합니다.
※ for … in 반복문과 for … of 반복문 차이
다음 예시를 통해 for … in 반복문과 for … of 반복문의 차이를 알 수 있습니다. (자세한 내용은 MDN을 참조하세요)
.findIndex() & .find() 메서드
ES5에서는 배열에서 조건에 해당하는 요소의 인덱스를 찾고 해당 요소를 보여주려면 여러 과정을 거쳐야 합니다.(꼭 그렇지는 않지만요)
ES6에서는 이러한 일련의 과정을 좀 더 간단하게 할 수 있도록 .find() 와 .findIndex() 메서드를 제공합니다.
Spread Operator
ES6의 전개 구문은 .apply()를 대체할 수 있습니다.
.apply()를 대체하는 것 이외에 배열을 합치는 데에도 사용할 수 있습니다.
혹은 NodeList의 요소들을 합치는 데에도 사용할 수 있습니다.
Rest Parameter
rest 파라미터 구문은 전개 구문과 똑같이 생겼지만, 반대의 역할을 합니다. 즉, 개별 요소를 하나의 배열로 만들어 주는 역할을 하죠.
정해지지 않은 수 인수를 배열로 나타낼 수 있게 합니다. (ES5에서는 arguments를 .slice()를 사용하여 배열로 만드는 방식을 사용하죠.)
정해지지 않은 수 뿐 아니라 정해진 수 역시 함수의 인자로 전달하고 싶을 때는 어떻게 해야할까요?
ES5에서도 가능하지만 ES6의 rest 파라미터은 좀 더 나은 방법을 제공합니다.
arguments를 첫 번째 인자를 기준으로 둘로 나눠야하는 ES5와는 다르게 그냥 파라미터를 추가하면 됩니다.
Default Parameter
ES6는 피라미터의 디폴트 값을 설정하는데 있어서 간단한 방법을 제공합니다. ES5와 비교해서 살펴보겠습니다.
default 값이 존재하는 파라미터는 값을 전달해주지 않으면 default 값을 사용합니다.
Maps
Map은 ES6에서 소개 된 새로운 키-값 데이터 구조입니다.
Map객체는 키-값 쌍을 저장하며 삽입 순서도 기억합니다. 일반적인 객체에서는 키값을 문자열에 한정해서 사용할 수 있었던 것에 비해서, 아무 값(객체, 불리언, 숫자, 문자열, 함수 등)이나 키 또는 값으로 사용할 수 있습니다.
Map을 생성하는 방법은 다음과 같습니다.
이어서 Map에 키-값을 설정하는 방법을 살펴보겠습니다.
키-값을 설정하였으니 Map에서 값을 가져오는 방법을 알아보겠습니다.
객체에서는 불가능 하지만 Map에서는 가능한 것이 있습니다. 바로 사이즈 혹은 길이를 가져오는 것이죠. 배열에서는 .length를 사용하지만 Map에서는 .size를 사용합니다.
Map에서는 데이터를 설정하고 가져오는 것 뿐만 아니라, 데이터를 제거하고 데이터나 키가 존재하는지 확인하는 것도 가능합니다.
하나의 데이터를 지우는 것이 아니라 Map 전체의 데이터를 지우는 것도 가능합니다.
set, get, has, delete는 맵을 다루는 기본적인 메서드입니다.
Map이 가지고 있는 또다른 특징은 반복이 가능하다는 것 입니다. 객체와는 다르게 배열의 .forEach() 메서드를 사용할 수 있죠. 이 것이 의미하는 것은 각각의 Map은 배열처럼 .forEach() 메서드를 가지고 있다는 것을 의미하고, 결국 Map 함수 constructor의 프로토타입 프로퍼티 안에 forEach 메서드가 존재하고 있다는 것이 됩니다.
다시 돌아와서 Map에 .forEach() 메서드를 사용 해보죠.
.forEach() 뿐만 아니라 for … of 역시 사용가능 합니다.
혹은 .entries() 메서드와 destructuring을 사용하여 key, value를 가져올 수 있습니다.
앞서 말한 것 처럼 Map이 가지는 특징은 키나 값에 아무 값이나 사용할 수 있다는 점입니다. 그런데 어디에 쓸까요…?
아무런 값이나 키, 값에 사용함으로써 좀 더 유연하게 값을 가져올 수 있다는 것이 장점입니다.
지금까지 자바스크립트 ES6의 몇 가지 특징에 대해서 알아 보았습니다.
잘못된 부분이나 의견이 있으면 댓글로 남겨주시면 감사하겠습니다. 😚
