전개 구문은 ...을 사용하여 구조를 새롭게 바꿔 준다.
코테를 풀때 반복문을 사용하기 위해 배열 러버인 내가 많이 사용하기도 하고 실제로 현업에서도 많이 사용한다고 한다.
사용 방법은 아래와 같다.
let arr = [1, 2, 3];
console.log(...arr); // 1 2 3분명 arr는 배열인데 ...이 붙음으로써 더 이상 배열이 아닌 새로운 구조를 갖게 된다.
또 신기한점은 만약 arr에 4라는 요소를 추가하고 싶다! 할 때 보통은 arr.push(4) 로 넣겠지만!
ES6니 우리는 세련되고 멋지게 전개 구문을 사용하여 4를 추가할 수 있다.
let newArr = [...arr, 4];
console.log(newArr); // [1,2,3,4]심지어 기존의 배열을 건들이지 않고 새로운 배열로 만들어 사용하기 때문에 좋은 방법이라고 생각된다.
전개 구문은 객체에서도 사용이 가능하다.
이래서 정말 전개 구문을 사랑하지 않을 수가 없다...❤️
객체에 전개 구문을 사용하면 이렇다.
let user = {
name : 'abc',
age : 30
}위와 같이 user라는 객체를 만들었는데 동일한 키와 키값을 갖는 user2를 생성하고 싶다.
그러면 우리는 user2를 생성 하고 전개 구문을 사용해서 그대로 복사를 해 올 수가 있다는 사실!!
let user2 = {...user}
console.log(user2); // name : 'abc', age : 30해석(?)을 하자면 ...user를 하면 user의 키와 키 값을 풀었다가 {}로 다시 객체 형태로 만들었다 생각하면 된다.
이런식으로 복사를 해 올 수 있다는 장점이 있으며 마찬가지로 기존의 객체를 수정하지 않고 새롭게 수정할 객체를 만들어서 좋은 방법이라고 생각된다.
✨ 𝑬𝒗𝒆𝒓𝒚𝒕𝒉𝒊𝒏𝒈 𝒄𝒐𝒎𝒆𝒔 𝒕𝒐 𝒉𝒊𝒎 𝒘𝒉𝒐 𝒉𝒖𝒔𝒕𝒍𝒆𝒔 𝒘𝒉𝒊𝒍𝒆 𝒉𝒆 𝒘𝒂𝒊𝒕𝒔. ✨