🔍 ES6 문법이란?
앞서 학습한 let키워드, const키워드, 템플릿 리터럴 등이 ES6 문법이다.
오늘은 ES6문법 중 spread/rest 문법, 구조 분해 할당, 화살표 함수에 대해 알아보자.
🔍 sperad 문법
주로 배열 []을 풀어서 인자 () 로 전달하거나 풀어서 각각의 요소로 넣을 때 사용한다.
spreaed 문법은 기존 배열을 변경하지 않는다. => Immutable
📌 spread 문법 예제
👨🏫 1)
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
sum(...numbers); // 질문: 어떤 값을 리턴하나요?배열 [1, 2, 3] 이 있다. spread 문법을 사용해 배열을 풀어 인자로 전달을 시킨다.
console.log로 확인해보자
console.log(...numbers) = [1, 2, 3]위와 같은 리턴 값이 나온다.
👨🏫 2) 객체에서 사용하기
let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };
let clonedObj = { ...obj1 };
let mergedObj = { ...obj1, ...obj2 };
// 질문: clonedObj와 mergedObj의 값은 각각 무엇인가요? 우선 두 객체의 키(foo)가 같은것을 확인할 수 있다.
console.log로 확인해보자
console.log(clonedObj) = {foo : 'bar', x: 42}
console.log(mergedObj) = {foo : 'baz', x: 42, y: 13}이처럼 obj1과 obj2의 키가 같은경우 값이 덮어 씌워진다. (그렇지않으면 각각 키와 값이 전달된다.)
spread 문법은 배열에서 유용하게 쓰인다.
👨🏫 3) 배열 합치기
let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];
// 질문: lyrics의 값은 무엇인가요 parts라는 객체의 배열은 ['shoulders', 'knees'] 이다.
lyrics의 배열을 살펴보면 ...parts가 중간에 껴있다.
spread 문법을 사용해 배열['shoulders', 'knees']를 풀어 ...parts 넣기만하면 된다.
console.log로 확인해보자
console.log(lyrics) = ['head', 'shouldes', 'knees', 'and', 'toes']👨🏫 4) 배열 복사
let arr = [1, 2, 3];
let arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4);
// 질문: arr와 arr2의 값은 각각 무엇인가요? spread 문법은 immutable한 특성때문에 arr2를 수정해도 arr이 바뀌지 않는다.
console.log(arr) = [1, 2, 3], console.log(arr2);[1, 2, 3, 4]그래서 arr은 그대로 나오고 arr2는 arr의 배열이 인자가 되고 끝에 4가 추가된다.
🔍 rest 문법
파라미터를 배열의 형태로 받아 사용할 수 있다. 파라미터 개수가 가변적일때 유용하게 쓰인다.
📌 rest 문법 예제
👨🏫 1)
function printMaxNums(...args) {
console.log(args)
}
printMaxNums(10, 30, 40)
// 질문: args의 값을 구하시오printMaxNums의 인자 3개가 모두 함수 printMaxNums에 전달한다.
실행이 되면 rest parameter args 는 모든 남아있는 인자를 할당받는다.
남아있는 모든 인자를 하나의 배열에 담기 때문에 따로 매개변수를 빼놓지 않아
args는 배열의 형태로 할당한다.
console.log(args) = [10, 20, 30]※ Tip ※
function printMaxNums(num1, ...args) {
console.log(args) // [30, 40]
}
printMaxNums(10, 30, 40)만약 위처럼 따로 매개변수를 지정했다면 남은 매개변수만 배열의 형태로 할당한다.
👨🏫 2)
방금 다룬 Tip과 유사한 예제를 확인해보자.
function myFun(a, b, ...manyMoreArgs) {
console.log(manyMoreArgs);
}
myFun("one", "two", "three", "four", "five", "six");
; // 질문: 콘솔은 순서대로 어떻게 찍힐까요?매개변수가 따로 지정되어있는걸 확인할 수 있다.
문제의 코드는 a에 첫번째 파라미터 "one",b에 두번째 파라미터인 "two"가 할당된다.
나머지 "three", "four", "five", "six" 는
manyMoreArgs에 배열의 형태로 할당이 된다.
console.log(manyMoreArgs) = ["three", "four", "five", "six"]이처럼 rest문법은 파라미터의 개수가 가변적일 때 유용하게 사용된다.
🔍 구조 분해 할당
구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다.
// 배열
const [a, b, ...rest] = [10, 20, 30, 40, 50];
// 객체
const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}객체에서 구조 분해 할당을 사용할 경우 선언문과 같이 사용하지 않으면 에러가 발생할 수 있다.
📌 구조 분해 할당 예제
let arr = ['code', 'states']
let value = [
...arr,
'pre',
...['course', 'student']
]
console.log(value)
=['code', 'states', 'pre', 'course', 'student']