자바스크립트_Chapter 11. 전개구문 (Spread)

오늘도 ES6에서 새롭게 추가된 문법인 전개구문(Spread)에 정리한다. 

이름에서도 볼 수 있듯 뭔가를 펼쳐놓는 느낌이 든다 !

 

#1. 전개구문(Spread) 문법이란? 

대상을 개별요소로 분리하는 문법인데 대상은 '이터러블' 이어야 한다.

이터러블(iterable)? 
모던 자바스크립트 책에서는 이터러블 프로토콜을 준수한 객체라고 표현하는데,
데이터 컬렉션을 순회하기 위한 약속(이터러블 프로토콜)을 지킨 객체라고 한다.

나는 순회가 가능한 객체라고 이해했다.

 

말로는 어려우니 어떻게 생겼는지 바로 가보자 !

 

#2. 배열에서의 전개구문

let arr = [1,2,3]
console.log(arr); // [1,2,3]
console.log(…arr); // 1,2,3 -> 배열의 형태를 벗어버렸다.

 

위 예제에서 전개 구문은 온점 3개(...)으로 표현된 부분이다. 

전개구문은 앞에 ...을 쓰고 그 뒤에 앞서 말한 순회가 가능한 객체를 쓴다. 

 

다시 예제로 돌아와 보면 전개구문을 쓴 콘솔로그는 배열의 형태를 벗어버린 것을 알 수 있다.

 

** 활용

전개구문은 새로운 구조를 덧입힐 때 많이 활용될 수 있는데 

아래 예제를 확인해보자. 

 

기존 ES5문법에서 서로 다른 배열을 합칠 때 concat이라는 메서드를 사용했다.

// ES5
let arr = [1,2,3];
let newArr = arr.concat([4,5,6]);
console.log(newArr); // [1,2,3,4,5,6]

 

하지만 전개구문을 사용하면 아래와 같이 사용이 가능하다. 

// ES6
let arr = [1,2,3];
let newArr = [...arr, ...[4,5,6]];
console.log(newArr); // [1,2,3,4,5,6]

 

다른 예시인 Splice 활용 예제를 보자.

출처 : 모던자바스크립트 DeepDive

** splice
배열.splice(idx,삭제할 요소 수, 추가할 요소) 

const arr1 = [1,2,3,6];
arr1.splice(2,2,7); // arr1 배열에서 idx가 2인 값(3)에서 해당 값부터 2개의 요소를 지운 후 7을 추가한다.
console.log(arr1); // [1,2,7]

 

#3. 객체에서의 활용

let user = {
	name : ‘nbc’,
	age : 30
};

let user2 = {…user};
console.log(user2) // {name : ‘nbc’, age: 30};

user 라는 객체를 user2라는 변수에 복사할 때 전개구문을 통해 쉽게 복사할 수 있다.

이때에는 얕은 복사가 실시되기에 user2에 프로퍼티를 변경하여도 기존 user 객체의 프로퍼티는 변동사항이 없다.

 

# 전개구문 연습문제 !

// 아래와 같은 결과가 출력되도록 함수를 완성해 보세요.
const db = [
	{
		"id": 7,
		"name": "Jay",
		"age": 33,
		"phone": "010-1212-5678",
		"email": "qwe@gmail.com"
	},
	{
		"id": 10,
		"name": "James",
		"age": 30,
		"phone": "010-1234-5678",
		"email": "abc@gmail.com"
	}
]
	
function handleEdit(id, editingObj) {
	// db에서 id에 해당하는 객체를 찾아서 내용을 바꿉니다.
	// Object.assign 대신 spread syntax(...)를 사용해야 합니다.
	// 여기에 코드를 작성하세요.
	
}

handleEdit(10, { name: "Paul", age: 35 });

console.log(db);
/*
출력 결과:
[
	{
		"id": 7,
		"name": "Jay",
		"age": 33,
		"phone": "010-1212-5678",
		"email": "qwe@gmail.com"
	},
	{
		"id": 10,
		"name": "Paul",
		"age": 35,
		"phone": "010-1234-5678",
		"email": "abc@gmail.com"
	}
]
*/

문제를 정리하자면 요소가 객체로 이루어진 배열 db에서 전달받은 id값에 해당하는 녀석의 프로퍼티를 변경하는 문제이다. 

 

위 예제에도 써있지만 아래와 같은 순서로 생각했다. 

  1. 원하는 객체를 id 값으로 찾아야 한다. 

  2. 찾은 객체를 전개구문을 활용해 요소를 변경한다.

function handleEdit(id, editingObj) {

// 1) findindex 메소드를 활용해서 원하는 객체가 몇번째 있는지 확인하여 활용하고자 한다. 
const editIdx = db.findIndex(el => el.id === id); 

// 2) 각 객체를 구조분해할당하여 요소들을 합친다.
db[editIdx] = {...db[editIdx], ...editingObj} 
}

handleEdit(10, { name: "Paul", age: 35 });

console.log(db);

 

최종 코드는 아래와 같다. 

const db = [
  {
    "id": 7,
    "name": "Jay",
    "age": 33,
    "phone": "010-1212-5678",
    "email": "qwe@gmail.com"
  },
  {
    "id": 10,
    "name": "James",
    "age": 30,
    "phone": "010-1234-5678",
    "email": "abc@gmail.com"
  }
]

function handleEdit(id, editingObj) {


  const editIdx = db.findIndex(el => el.id === id);
  db[editIdx] = { ...db[editIdx], ...editingObj };

};

handleEdit(10, { name: "Paul", age: 35 });

console.log(db);

 

전개구문 역시 앞으로도 자주쓰일 거라고 판단하여 따로 정리하는 시간을 가졌는데 

아직 100% 이해되는 것은 아닌듯 하다. 

 

계속 공부하면서 내것으로 만드는 연습을 하고자 한다 ~ 

 

오늘도 끝판왕에 반발짝 다가섰다 !