[JavaScript] ES6 주요 문법 (spread/rest, 구조 분해)

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 

---

spread/ rest 문법

• spread : 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을때에 사용합니다.
• rest : 파라미터를 배열의 형태로 받아서 사용할 수 있습니다. 파라미터 개수가 가변적일 때 유용합니다.

 

spread 사용 예시

function sum(x, y, z) {
    return x + y + z;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers));

다음을 실행하면 6이 출력된다.

number 앞에 ' . . . '는 각각을 분해하는 특징이 있다.

따라서 function sum에 1,2,3이 인자로 들어가고 각각의 덧셈이 return되었다.

 

rest 사용 예시

function sum(...theArgs) {
    return theArgs.reduce((previous, current) => {
        return previous + current;
    });
}

console.log(sum(1,2,3))
console.log(sum(1,2,3,4))

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Array.prototype.reduce() - JavaScript | MDN

다음은 reduce함수의 사용법을 정리한 mdn문서이다

 

작동을 하나하나 살펴보자

sum에 1, 2, 3파라미터가 주어진다.

...theArgs가 매개변수인 sum함수에 1,2,3이 들어온다.

reduce함수를 만난다

previous	current	array	return
1	2	[1,2,3]	3
3	3	[1,2,3]	6

출력은 6이 나온다.

 

sum(1,2,3,4)도 살펴보자

previous	current	array	return
1	2	[1,2,3,4]	3
3	3	[1,2,3,4]	6
6	4	[1,2,3,4]	10

10을 출력한다.

 

배열에서 사용하기

배열합치기

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

console.log(lyrics); 

...parts는 parts배열의 요소를 각각 나눠서 갖고 있다.

[ 'head', 'shoulders', 'knees', 'and', 'toes' ]을 출력으로 갖는다.

 

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

console.log(arr1);

[0, 1, 2, 3, 4, 5]을 출력으로갖는다.

 

배열 복사

let arr = [1, 2, 3];
let arr2 = [...arr]; 
arr2.push(4);  
console.log(arr)
console.log(arr2)

만약 let arr2 = arr ;이었다면 같은 주소를 공유하기 때문에 arr2.push(4)를 했을때, 원래 배열 arr도 push영향을 받는다.

 하지만  et arr2 = [ . . . arr ] ;이면 arr요소를 하나씩 가져와 새로운 배열에 저장하게 되기 때문에 arr2에 push를 헤도 원래 arr에 영향을 주지 않는다.

 

출력은  [ 1, 2, 3 ] [ 1, 2, 3, 4 ] 이다

 

객체에서 사용하기

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

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

console.log(clonedObj)
console.log(mergedObj)

cloneObj는 obj1과 같은 { foo: 'bar', x: 42 }를 출력한다.

mergedObj는 obj1요소와 obj2 요소를 모두 갖게 된다

{ foo: 'bar', foo: 'baz', x: 42, y: 13 }

하지만 객체에서 같은 키를 갖을수 없기 때문에 중복되는 foo중 먼저 들어온 obj1의 foo: 'bar'가 지워진다.

{ foo: 'baz', x: 42, y: 13 }가 출력 된다.

 

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

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는 매개변수로 ...manyMoreArgs꼴 이기 때문에 two이후 모든 파라미터를 받는다.

출력은 a one b two manyMoreArgs [ 'three', 'four', 'five', 'six' ]이다

 

최대값 구하기

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

다음 방식으로 최대값을 구할수 있다.

 

구조 분해 할당

구조 분해 할당은 spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정을 말한다.

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

여기서 rest는 a와 b에 값을 주고 남은 [30, 40, 50]이 된다.

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

 

여기서 rest는 a와 b에 값을 주고 남은 {c: 30,d: 40}이 된다.

 

예제) 함수에서 객체 분해

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)

다음 함수 whois는 displayName과 fullName객체 firstName을 매개변수로 받습니다.

displayName의 value값이 'Jdoe'이고  fullName객체 firstName의 value가 'john'이기 때문에 jdoe is John가 출력됩니다.