[ES6 문법] 전개 연산자, 기본/참조형 데이터 타입

 

 

 

1. 객체에 전개 연산자 적용

 

먼저 itemList라는 객체 배열을 생성하고 이 배열을

전개 연산자를 사용하여 새로운 배열 newItemList에 복사해보자.

var itemList = [
  { no: 1, todo: '두부', done: false},
  { no: 2, todo: '계란', done: false},
  { no: 3, todo: '라면', done: false},
];

var newItemList = [ ...itemList ];

 

전개 연산자를 통해 newItemList 배열이 생성되며, itemList와 동일한 내용을 가지게 된다.

이때, 기존 객체와는 서로 다른 메모리 주소를 가리키기 때문에 독립적으로 동작한다.

 

 

다음으로 새로운 배열 newItemList의 두 번째 요소만을 복사하여 수정해보자.

newItemList[1] = { ...itemList[1] };

newItemList[1].done = true;

console.log(itemList, newItemList);
console.log(itemList === newItemList);
console.log(itemList[1] === newItemList[1]);

 

위 코드에서 newItemList 배열의 두 번째 요소를 변경해도

기존의 itemList 배열에는 영향을 주지 않음을 확인할 수 있다.

로그를 출력한 결과, 두 객체는 서로 다른 메모리 주소를 참조하고 있다는 사실이 확인된다.

 

 

 

 

 

2. 배열에 전개 연산자 적용

 

이번에는 전개 연산자를 사용하여 배열을 복사해 보자.

var score = [ 100, 90, 80 ];

var newScore = [ ...score ];

 

newScore라는 새 배열을 생성하고 전개 연산자를 사용하여 score의 모든 요소를 복사한다.

이렇게 하면 newScore라는 새 배열이 기존 score 배열과 동일한 내용을 가지게 된다.

반응형

 

다음으로 newScore 배열의 두 번째 요소만을 변경해 보자.

newScore[1] 95;
console.log(score, newScore);
console.log(score === newScore);

 

위 코드에서 newScore 배열의 두 번째 요소를 변경해도 기존의 score 배열에는 영향을 주지 않음을 확인할 수 있다.

역시나 두 배열은 서로 다른 메모리 주소를 참조하고 있다는 사실이 나타난다.

 

 

 

 

 

3. 함수 호출과 전개 연산자의 사용

 

이번에는 함수에서 전개 연산자를 사용해 기존 데이터의 변화를 확인해보자.

function func(data1, data2){
	data1 += 10;
  data2[0] += 10;
  console.log(data1, data2[0]);
}

var d1 = 80;  // number
var d2 = [80];  // array(object)

 

func 함수는 매개변수로 받은 data1에 10을 더하고,

data2 배열의 첫 번째 요소에 10을 더한다.

 

이때, d1은 기본 데이터 타입인 숫자이므로 함수 내에서 변경되지 않는다.

반면에 d2는 참조 데이터 타입인 배열이므로 함수 내에서 변경되는 것을 확인할 수 있다.

 

 

 

console.log(typeof d1, typeof d2);

console.log('===== 함수 호출 이전 =====');
console.log(d1, d2[0]);

console.log('===== 함수 호출 =====');
func(d1, d2);

console.log('===== 함수 호출 이후 =====');
console.log(d1, d2[0]);

 

위 코드에서 확인할 수 있듯이, 함수 호출 이후에 기본 데이터 타입인 d1의 값은 변하지 않는다.

반면에 참조 데이터 타입인 d2의 값은 함수 호출 후에 변경되었다는 것을 알 수 있다.

 

 

 

 

 

4. 객체를 전개 연산자와 함께 다양한 방식으로 복사하기

 

객체에 대해 전개 연산자를 사용하여 여러 가지 방식으로 복사해보자.

 

var item = { no: 1, todo: '두부', done: true };

// 각 속성을 직접 복사하는 방법
var newItem = { no: item.no, todo: item.todo, done: item.done};

// Object.assign을 사용하는 방법
var newItem = Object.assign({}, item);

// 전개 연산자를 사용하는 방법
var newItem = { ...item };

newItem.done = false;
console.log(item, newItem);
console.log(item === newItem);

 

세 가지 방식 모두 기존 객체 item을 복사하여 새로운 객체 newItem을 생성한다.

이렇게 생성된 newItem 객체는 기존 객체와 독립적으로 동작하며, 두 객체는 서로 다른 메모리 주소를 참조하고 있다.