Part 3. Javascript 핵심 개념과 주요 문법 Ch 4. ES6 주요 문법 입니다.
현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.
학습목표
- spread/rest 문법을 사용할 수 있다.
- 구조 분해 할당을 사용할 수 있다.
1. spread / rest 문법
- spread 문법
주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용합니다.spread syntax는 iterable한 모든 것의(대표적으로 문자열, 배열)요소를 "펼쳐"주는 문법을 의미합니다.
const spread = [1, 2, 3];
const arr = [0, ...spread, 4];
console.log(arr); // [0, 1, 2, 3, 4]- 빈 배열에 전개(spread)문법을 사용할 경우, 아무것도 전달되지 않습니다.
const spread = [];
const arr = [0, ...spread, 1];
console.log(arr); // [0, 1]- 여러 개의 배열을 이어붙일 수 있습니다.
const arr1 = [0, 1, 2];
const arr2= [3, 4, 5];
const concatenated = [...arr1, ...arr2]
console.log(concatenated); // [0, 1, 2, 3, 4, 5]- 여러 개의 객체를 병합할 수 있습니다.
const person1 = {
name: 'han',
age: 30
}
const person2 = {
hobby: 'golf',
job: 'programmer'
}
const user = {...person1, ...person2};
console.log(user)
// {name: 'han', age: 30, hobby: 'golf', job: 'programmer'}- 전개(spread)문법은 깊고 얕은 복사를 합니다.
const arr = [1, 2, 3];
const copiedArr = [...arr]
copiedArr.pop(0)
console.log(arr); // [1, 2, 3]
console.log(copiedArr); // [1, 2]위 예제에서처럼 전개(spread)문법이 깊은 복사처럼 보이지만 아래 예제처럼 중첩된 구조에 대한 깊은 복사는 이뤄지지 않습니다.
const arr = [1, 2, [3,4]];
const copiedArr =[...arr]
copiedArr[2].pop(0);
console.log(arr); // [1, 2, [3]]
console.log(copiedArr); // [1, 2, [3]]- rest 문법
파라미터를 배열의 형태로 받아서 사용할 수 있습니다. 파라미터 개수가 가변적일 때 유용합니다....manyMoreArgs는 rest parameter, rest syntax라고 부릅니다. 남아있는 모든 인자를 하나의 배열에 담기 때문입니다.
function myFun(a, b, ...manyMoreArgs) {
console.log("a", a);
console.log("b", b);
console.log("manyMoreArgs", manyMoreArgs);
}
myFun("one", "two", "three", "four", "five", "six");
// 콘솔 출력:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]- rest parameter는 전달인자의 수가 정해져 있지 않은 경우에도 유용하게 사용할 수 있습니다.
function sum(...nums){
let sum = 0;
for(let i = 0; i < nums.length; i++){
sum = sum + nums[i];
}
return sum;
}
console.log(sum(1, 2, 3)) // 6
console.log(sum(1, 2, 3, 4)) // 10- rest parameter는 전달인자의 일부에만 적용할 수도 있습니다.
function getAllParams(required1, required2, ...args){
return [required1, required2, args];
}
console.log(getAllParams(123)) // [123, undefined, []]- arguments 객체
arguments 객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체입니다.
function getAllParamsByRestParameter(...args){
return args;
}
function getAllParamsByArgumentObj(){
return arguments;
}
const restParams = getAllParamsByRestParameter("first", "second", "third");
const argumentsObj = getAllParamsByArgumentObj("first", "second", "third");
console.log(restParams); // ["first", "second", "third"]
console.log(argumentsObj) // ["first", "second", "third"]
// rest 문법은 배열을 반환하지만 arguments 객체는 유사 배열 객체를 반환합니다.
console.log(Array.isArray(restParams)) // true
console.log(Array.isArray(argumentsObj)) // false
2. 구조 분해 할당
구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 담을 수 있게 하는 Javascript 표현식입니다.
let a, b, rest;
[a, b] = [10, 20];
console.log(a);
// expected output: 10
console.log(b);
// expected output: 20
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest);
// expected output: Array [30,40,50]
