📚 챕터

전개 구문이란 무엇인가

📆 학습 날짜

2023 / 12 / 29 (금)

---

👨🏻‍💻 학습 내용

🎯 전개 구문(Spread Syntax)

전개 구문(Spread Syntax)은 구조 분해 할당과는 다르게 배열이나 객체,문자열과 같이 순회할수 있는 값에 말 그대로 전개해 간결하게 사용할 수 있는 구문이라고한다.

📌 배열의 전개 구문

ES6 이전에는 배열 간에 합성을 하려면 push() concat() splice() 등의 메서드를 활용해야 했다. 그러나 전개 구문을 활용한다면 매우 쉽게 배열을 합성 할 수 있다.
아래 예제코드를 보며 살펴보자.

<script>
const users = ['park' , 'kim']
const usersList = [ ...users , 'song' , 'bang']
 // ['park' , 'kim', 'song' , 'bang']
</script>

배열 내부에서 ...배열을 사용한다면 해당 배열을 마치 전개하는 것처럼 선언하고, 이를 내부 배열에서 활용할 수 있다.
이러한 특징을 활용한다면 기존 배열에 영향을 미치지 않고 배열을 복사 하는 것도 가능하다.

<script>
const users = ['park' , 'kim']
const usersList = users

users === usersList // true. 내용이 아닌 참조를 복사하기 때문에 true를 반환한다.

const users = ['park' , 'kim']
const usersList = [...users]

users === usersList // false. 실제로 값만 복사되고 참조는 다르므로 false를 반환한다.
</script>

📌 객체의 전개 구문

객체에서도 배열과 비슷하게 사용이 가능하다.
객체를 새로 만들 때 이 전개 구문을 사용할 수 있으며,배열의 전개 구문과 마찬가지로
객체를 합성하는 데 있어 편리함을 가져다 준다.

<script>
const userInformation = {
	username : 'park',
   userage : 26,
}

const userInformation2 = {
	name : 'kim',
   age : 28,
}

const users = {...userInformation , ...userInformation2}
// {username: 'park', userage: 26, name: 'kim', age: 28}
</script>

한 가지 중요한 것은 객체 전개 구문에 있어서 순서가 중요하다는 것이다.
위에 선언됐을 때와 아래에 선언됐을 때 작동의 순서 차이로 인해 전혀 다른 객체가 생성 될 수 있다.

<script>
 //{park: 26, kim: 25, song: 24, bang: 29}
const usersAge = {
	park : 26,
   kim : 25,
   song : 24,
   bang : 29,
}

//{park: 26, kim: 25, song: 28, bang: 29}
const fixAge = {
...usersAge,
song : 28,
}


const fixAge2 = {
	song : 28,
   ...usersAge,
}
//{song: 24, park: 26, kim: 25, bang: 29}
</script>

fixAge 와 fixAge2의 결괏값은 다른데, 전개 구문 이후에 값 할당이 있다면 전개 구문이 할당한 값을 덮어쓰겠지만 반대의 경우에는 오히려 전개 구문이 해당 값을 덮어쓰는 일이 벌어질 것이다. 전개 구문에 있는 값을 덮어쓸것인지,혹은 그 값을 받아들일지에 따라 순서에 차이가 발생하므로 주의하며 전개 구문을 사용하길 바란다.

➡️ 다음 글에서는 객체 초기자에 대해 살펴보자.