var -> const & let

const는 한 번 선언하면 값을 바꿀 수 없는 상수
let은 선언과 변경이 자유로운 변수
const로 선언된 변수는 같은 스코프(중괄호) 내에서 중복된 이름을 가질 수 없다.

//과거 변수 선언
var a;
var b = 1

//현재 변수 선언
const c = 2;
let d = 3;
d = 4;

//const 상수는 값을 재할당 할 수 없다.

웬만하면 const를 사용하고, 변수의 변경이 필요할 때에만 let을 사용하는 것이 좋다.

Array 메소드 (forEach, map, filter)

forEach

Array.forEach는 배열의 요소를 이용해 순차적으로 함수를 실행하는 메서드이다.
Array.forEach에 실행할 콜백 함수는 현재 값, 인덱스, forEach를 호출한 배열을 매개변수로 받는다. 또한 함수 내에서 따로 return을 할 필요가 없다.

기존 코드

var a = [0,1,2,3,4,5];
for(var i = 0; i < a.length; i++) {
	var item = a[i];
    console.log(item)
}

현재 ES6

const b = [0,1,2,3,4,5];
b.forEach(function(item){
	console.log(item);
});

map

Array.map은 배열의 요소를 이용해 순차적을 함수를 실행하여 새로운 배열을 반환하는 메서드이다. Array.map에 실행할 콜백 함수는 현재값, 인덱스, map을 호출한 배열을 매개변수로 받는다. 함수 내에서 반드시 새로운 값을 return 해주어야 한다.

기존 문법

var c = [0,1,2,3,4,5];
var newC = [];
for(var i = 0; i < a.length; i++) {
	var item = c[i];
    newC.push(item*2);
}
// [0,2,4,6,8,10];

현재 ES6

const d = [0,1,2,3,4,5];
const newD = d.map(function (item) {
	return item * 2;
});
// [0,2,4,6,8,10];

filter

Array.filter는 배열의 요소를 이용해 순차적으로 함수를 실행하여 조건을 통과하는 요소를 모아 새로운 배열로 반환하는 메서드이다.
Array.filter에 실행할 콜백 함수는 현재 값, 인덱스, map을 호출한 배열을 매개변수로 받는다. 함수 내에서 false를 return할 경우 새로운 배열에서 제외되고 true를 return할 경우 새로운 배열에 추가된다.

기존 문법

var c = [0,1,2,3,4,5];
var newC = [];
for (var i = 0; i < a.length; i++) {
	var item = c[i];
    if(item > 3) {
    	newC.push(item);
    }
}

ES6 문법

const d = [0,1,2,3,4,5];
const newD = d.filter(function(item) {
	return item > 3;
    });

Arrow function

화살표 함수는 function 함수 표현보다 구문이 짧은 함수 표현이며,
function이라는 키워드를 생략하고 매개변수를 받은 뒤 => 를 써주는 형태이다.

//arrow function
const c = (x,y) => {
	console.log(x,y);
};
c(5,6);

const d = (x,y) => console.log(x,y);
d(7,8);

중괄호 {} 를 열어 로직을 작성할 수 있으며 return 값만 존재하는 짧은 함수의 경우 중괄호와 return을 생략하고 바로 return할 값을 입력할 수 도 있다.

Destructuring assignment

구조 분해 할당은 객체나 배열을 해체하여 개별 변수에 담을 수 있게 하는 표현식이다.
기존에는 객체에 담긴 값을 각각 새로운 변수로 선언하기 위해 왼쪽 예시와 같이 작성했으나, 구조 분해 할당 표현을 이용하여 더 간편하게 코드를 작성할 수 있다.

기존 문법

var a = {x:1, y:2, z:3}
var x = a.x;
var y = a.y;
var z = a.z;

var c = [1,2,3];
var c0 = c[0];
var c1 = c[1];
var c2 = c[2];

구조 분해 할당

const b = {i:1,j:2,k:3};
const {i,j,k} = b;

const d = [1,2,3];
const [d0,d1,d2] = d;

Shorthand property names

단축 속성명을 사용하면 새로운 객체 선언을 간편하게 할 수 있다. 새로 선언하는 객체에 key값과 동일한 변수명을 가진 변수를 할당하면, value 값을 생략해서 적을 수 있다.

const username = 'Alex';
const age = 26;
const school = 'Hansung';
// 기존 코드
var person1 = {username: username, age:age, school: school};
// ES6
const person2 = {username, age, school}; //키와 값이 같을때만 가능

Spread Syntax

전개 구문은 배열이나 객체를 전개할 때 사용. 기본적으로 배열이나 객체안에 ...을 붙여 사용한다. 함수 호출 및 선언, 배열 선언, 객체 선언시 다양하게 활용할 수 있다.

const numbers = [1,2,3];
//함수
function getSum(...n) {
	let sum = 0;
    n.forEach((item) => {
    	sum += item;
    });
    return sum;
}
//함수 호출
getSum(...numbers);
//배열
const newNumbers = [0, ...numbers, 4, 5, 6];

두 객체를 합성할 때 겹치는 key가 있을 경우 나중에 오는 값이 할당.

const user {name: 'Alex', age = 26, school: 'Hansung'};
const newUser = {...user, grade: 4, age: 27};

Template literals

탬플릿 리터럴은 표현식을 허용하는 문자열이다. 백틱(``)으로 감싸서 문자열을 표현한다. 문자열 내에 표현식을 사용할 때에는 ${}로 표기한다.

//기존
const text1 = 'hello' + name
//ES6
const text2 = `Hell**텍스트**o ${name}`

Optional chaining

옵셔널 체이닝 연산자는 객체나 변수에 연결된 다른 속성을 참조할 때 유효한 속성인지 검사하지 않고 값을 읽을 수 있도록 해준다. 만약 유효한 속성이 아닐 경우 에러를 발생시키지 않고 undefined를 반환한다.

배열의 경우 array?.[index]와 같이 사용할 수 있다.

기존 문법

var x;
if(a && a.b && a.b.c) {
	x = a.b.c;
}

ES6

const y = a?.b?.c;

한줄 평: ES6 문법 중, 이미 의식하지 않고도 익숙하게 다루어 온 것들도 있었지만, 존재하는 지 인지하지 못했던 문법도 확인할 수 있어서 유익했다 (특히, Optional Chaining)