[JavaScript] - 전개 구문

알고리즘을 계속 풀다보니까 이제 배열에서 조작하는 것을 하게 되었는데 그중에 전개 연산자가 좀 잘 쓰이고 다양한 곳에 쓰이는 것 같아서 정리해보려고 한다.

 

그리고 다중 입력 받는 법에 대해서도 적어보려고 한다. 파이썬이랑은 개념이 좀 다른 부분이 많은 것 같다.

 

전개 구문

전개 구문 : 객체 혹은 배열을 펼칠 수 있게 한다. (ES6 부터 적용)

배열 또는 객체 앞에 점 세 개 (...) 를 붙임으로써 사용 가능하다.

const obj = {name : 'jihun', age : 12}

// 펼칠 대상이 객체인 경우
{...obj} // { name: 'jihun', age: 12 }

// 펼칠 대상이 배열인 경우
const arr = [1,2,3]
[...arr] // [ 1, 2, 3 ]
// 혹은
{...arr} // { '0': 1, '1': 2, '2': 3 }

 

 

---

객체에서 전개 구문을 사용할 때

const obj1 = { name: "jihun", age: 12 };

const obj2 = { ...obj1 };

console.log(obj1); // { name: 'jihun', age: 12 }
console.log(obj2); // { name: 'jihun', age: 12 }

console.log(obj1 === obj2); // false
// 서로 다른 주소 값을 가진 독립적인 객체

이렇게 obj1 의 값을 obj2 에 펼쳐서 할당해서 객체를 만들었을 때,

obj1 과 obj2 의 주소값이 다른 객체이기 때문에 false가 나온다

 

또한 전개구문을 통해 객체를 변형시키지 않고 복사할 수도 있다.

보통 user 정보에 대한 갱신 때 많이 쓴다 더라.

const obj1 = { name: "jihun", age: 12 };

const obj2 = { ...obj1, country : "Korea", isAdmin: true };

console.log(obj1); // { name: 'jihun', age: 12 }
console.log(obj2); // { name: 'jihun', age: 12, country: 'Korea', isAdmin: true }

 

 

두 객체를 전개구문을 통해 각각의 값을 가진 객체를 만들 수 있다.

const obj1 = { name: "jihun", age: 12 };

const obj2 = { country: "Korea", isAdmin: true };

// 전개 구문을 이용
const user1 = { ...obj1, ...obj2 };
console.log(user1); // { name: 'jihun', age: 12, country: 'Korea', isAdmin: true }
// 미사용
const user2 = {obj1, obj2}
console.log(user2)
/*
{
  obj1: { name: 'jihun', age: 12 },
  obj2: { country: 'Korea', isAdmin: true }
}
*/

 

만약 obj1 이랑 obj2 에 같은 키 값이 있다면 뒤에 나온 것이 키의 값이 된다.

 

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

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

---

배열에서 객체 구문을 사용할 때

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

console.log(arr1); // [ 1, 2, 3, 4, 5 ]
console.log(arr2); // [ 1, 2, 3, 4, 5 ]

console.log(arr1 === arr2); // false

 

배열에서도 마찬가지로 전개구문을 통해 똑같은 배열을 만들어도

서로 다른 독립적인 배열이 만들어진다.

 

이제 전개 구문으로 배열을 다양하게 조작해보자

1. 역순으로 변경하고 싶을 때

일단 reverse() 라는 함수로 구현을 할 수 있는데 이는 기존 배열을 바꾸는 함수로 기존 배열과 역순 함수가 서로 필요할 수 있는 상황이 있을 수 있다. 그러기 위해서 전개 구문으로 복사 하여 사용할 수 있다.

 

const arr1 = [1, 2, 3];
const arr2 = arr1.reverse();

console.log(arr1); // [3, 2, 1] // 원본 배열 역순
console.log(arr2); // [3, 2, 1] 

const arr1 = [1, 2, 3];
const arr2 = [...arr1].reverse();

console.log(arr1); // [1, 2, 3] // 원본 배열 보존
console.log(arr2); // [3, 2, 1]

 

2. 배열 끼리 합치고 싶을 때

push 나 unshift 같은 함수를 통해 앞, 뒤로 배열을 넣어서 합칠 수 있지만 전개 구문을 이용하면

원하는 위치 어디로든 가능하다!

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

// 뒤로 삽입
arr1 = [...arr1, ...arr2]; // [ 0, 1, 2, 3, 4, 5 ]
// 앞으로 삽입
arr1 = [...arr2, ...arr1]; // [ 3, 4, 5, 0, 1, 2 ]

// 원하는 위치
let arr3 = [1, 2, ...arr1, 6, 7]; // [ 1, 2, 0, 1, 2, 6, 7 ]

 

주의할 점! 

전개 구문은 1단계의 얕은 복사만 하기 때문에 2차원 이상에서 사용할 때 주의할 것!

let a = [[1], [2], [3]];
let b = [...a];
b.shift().shift(); // 첫번째 요소 [1]을 반환 후 제거, 1을 반환 후 제거
// a = [[], [2], [3]]
// b = [ [ 2 ], [ 3 ] ]

 

3. 배열의 나머지 요소를 사용할 때

const [first, second, ...rest] = ["one", "two", "three", "four", "five", "six"];

console.log(first); // one
console.log(second); // two
console.log(rest); // ["three", "four", "five", "six"]

 

 

---

마지막으로 문자열에서 이 전개 구문을 사용한다면?

const str = "hello";
const strary = [...str];

console.log(...str); h e l l o
console.log(strary); [ 'h', 'e', 'l', 'l', 'o' ]

 

이렇게 각각의 문자열에 대해서 배열화 시킬 수 있다.

이 방법도 알면 쓸 것 같아서 기록!

 

 

 

 

참고자료 

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%A0%84%EA%B0%9C-%EC%97%B0%EC%82%B0%EC%9E%90Spread-%EB%AC%B8%EB%B2%95

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

https://offbyone.tistory.com/466

https://yozm.wishket.com/magazine/detail/2742/