(자바스크립트) ES6의 주요문법

이미 이전 게시물들에도 ES6문법이 있긴 하지만, 이번 게시물에서는 ES6로 바뀌며 나온 문법사항들 중 꼭 알아야 할 것들만 정리해 알아 보는 시간을 가졌다.

spread 문법

스프레드는 배열을 문자열의 나열로 바꾸어 사용하는 방법이다. 함수의 전달인자로 배열을 주고, 매개변수로 배열의 각 값을 다른 변수에 넣어 사용하고 싶을 때 주로 사용한다.

let sum = [1,2,3,4];

let adder = (x,y,z,w) => {
    return = x+y+z+w;

let result = adder(sum);
console.log(result);			//10

배열을 합칠 때도 많이 사용한다.

let arr1 = [1,2,3];
let arr2 = [4,5];
let arr3 = [...arr1, ...arr2];		//[1,2,3,4,5]

객체에서도 이용이 가능하다.

let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };

let clonedObj = { ...obj1 };
let mergedObj = { ...obj1, ...obj2 };

Rest 문법

rest 문법은 spread 와 반대로 문자열을 나열을 배열로 바꾸어주는 것이다. 전달인자가 문자열이고 사용할 매개변수가 배열일 때 사용이 가능하다.

function makeArr(...arr){
return arr;
}
let arr = makeArr(1,2,3,4)		//arr은 [1,2,3,4]가 된다.

구조 분해 할당

구조분해할당은 사실 spread 문법을 이용한 것이다. 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정을 구조분해할당이라고 한다.
배열

const [a, b, ...rest] = [10, 20, 30, 40, 50];		//a = 10, b = 20, rest = [30,40,50]

객체

const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}; 	//a = 10 b = 20 rest ={c: 0, d: 40}

화살표함수

함수를 표현하는 방식 중 하나라고 생각하면 되겠다. 매개변수가 하나이면 소괄호() 생략이 가능하고, 함수 내에 실행하는 줄이 한줄이면 중괄호{}를 생략 가능하다.

const multiply = (x, y) => {
	return x * y;
}		//기본 화살표함수

const squre = x => x * x		//소괄호와 중괄호를 생략한 화살표함수

오늘 배운 개념 다 어려운 내용은 아니었지만, 자주 사용하게 될 것 같은 느낌이 든다. 확실히 이해하고 암기를 해야겠다.