[JavaScript] ES6 주요 문법

 

 

 

▶spread / rest 문법

 

 

spread : 주로 배열을 풀어 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용함.

예시

 

 

rest : 파라미터를 배열의 형태로 받아서 사용. 파라미터의 개수가 가변적일 때 유용하다.

예시1

 

→ 참고로 reduce는 배열의 각 요소를 순회하며 반복적인 연산을 하는 메서드이다. (하나의 결괏값을 반환함)

예시2

 

→ 남아있는 모든 인자를 하나의 배열에 담는다. 

 

 

 

 

 

◆ spread 문법은 배열에서 강력한 힘을 발휘한다.

 

 

     1. 배열 합치기

let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];


let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];  // 참고: spread 문법은 기존 배열을 변경하지 않으므로,
                            // arr1의 값을 바꾸려면 새롭게 할당해야 한다.

 

 

     2. 배열 복사

let arr = [1, 2, 3];
let arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4);  // 참고: spread 문법은 기존 배열을 변경하지 않으므로,
               // arr2를 수정한다고, arr이 바뀌지 않습니다.

// 질문: arr와 arr2의 값은 각각 무엇인가요?
console.log(arr);  // [1, 2, 3]
console.log(arr2);  // [1, 2, 3, 4]

 

 

 

◆ 객체에서 사용할 수도 있다.

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

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

// 질문: clonedObj와 mergedObj의 값은 각각 무엇인가요?
console.log(clonedObj);  // {foo: 'bar', x: 42}
console.log(mergedObj);  // {foo: 'baz', x: 42, y: 13}  중복은 덮어 씌워짐.

 

 

 

◆ 함수에서 나머지 파라미터 받아오기

 

 

 

[참조] 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters

 

 

 

 

---

 

 

>> 퀴즈 풀이

 

function findBiggestArg(...args) {
  let biggestArg = 0;
  for (let i = 0; i < args.length; i += 1){
    if (biggestArg < args[i]){
      biggestArg = args[i]
    }
  }
  return biggestArg
}

let value = findBiggestArg(10, 30, 40, 20)

//value? 40
//findBiggestArg -> 전달인자의 개수와 상관없이 가장 큰 인자를 찾아서 리턴하는 함수

 

 

let arr = [10, 30, 40, 20]
let value = Math.max(arr)

//value? NaN
//Math.max는 숫자인 인자들을 비교하여 가장 큰 수를 리턴하는 메서드이므로,
//배열을 전달하여 실행하니 NaN이 나오는 것.

------------------------------------------------------------------------
//위 예시와 비교

let arr = [10, 30, 40, 20]
let value = Math.max(...arr)  //Math.max(10, 20, 30, 40)

//value? 40

//잠깐! [...arr]는 또 다름.
//arr의 모든 요소를 "펼쳐"서 newArr에 넣어준 것. 즉, [10, 20, 30, 40]

 

 

 

---

 

 

▶구조분해할당

 

 

: spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정

 

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

console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]


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

console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

//객체에서 구조 분해 할당을 사용하는 경우, 선언(const, let, var)과 함께 사용하지 않으면 에러가 발생할 수 있다.

 

 

//유용한 예제: 함수에서 객체 분해

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

let user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
      firstName: "John",
      lastName: "Doe"
  }
};

whois(user)  //jdoe is John

 

 

 

[참조] 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment