[Node.js] 전개 연산자에 대하여 알아보기 - 2

안녕하세요.

이번에는 저번에 알아봤던 전개 연산자의 추가 내용입니다.

 

1. 기본 사용 방법

const arr = [1, 2, 3, 4, 5];
console.log(arr);
console.log(...arr);

 

 

2. copyArr

const arr = [1, 2, 3, 4, 5];

// arr의 메모리 주소값을 copyArr에 대입한 결과가 된다.
const copyArr = arr;
console.log(copyArr);

// 메모리 주소 값을 비교하는 상황이라서 True가 출력된다.
console.log(arr === copyArr);

• copyArr에 arr의 메모리 주소 값을 복사합니다.
• 해당 메모리 주소 값에는 arr의 [1~5]가 있으니 copyArr도 동일하게 출력합니다.
• arr === copyArr 비교하였을 때 메모리 주소 값이 동일하여 True가 출력됩니다.

 

3. 전개연산자 copy

const arr = [1, 2, 3, 4, 5];

const copyArr2 = [...arr];
console.log(copyArr2);

// 전개 연산자를 통해서 arr은 값이 동일하지만,
// 메모리 주소는 달라졌기 때문에 False가 출력된다.
console.log(arr === copyArr2);

• 전개연산자를 이용하여 copyArr2 변수에 값이 똑같이 적용됩니다.
• 전개연산자를 이용해서 copyArr2를 만들었기에 기존의 arr 변수의 메모리 주소와는 다른 메모리 주소를 가지게 되어 arr === copyArr2 비교를 했을 때 False를 출력하게 됩니다.

 

4. 객체 copy

const obj = {
  pororo: '뽀로로',
  lupy: '루피',
  crong: '크롱',
};

const copyObj = obj;

console.log(obj);
console.log(copyObj);
console.log(obj === copyObj);

• obj라는 객체를 만든 후 출력한 결과입니다.
• copyObj 객체에 obj의 메모리 주소 값을 저장합니다.
• obj === copyObj를 비교하였을 때 동일한 메모리 주소 값을 가지기 때문에 True가 출력됩니다.

 

5. 객체 전개연산자

const obj = {
  pororo: '뽀로로',
  lupy: '루피',
  crong: '크롱',
};

console.log({ ...obj });

• 객체에 전개 연산자를 사용하면 기존의 obj 객체와 동일하게 출력되는 것을 볼 수 있습니다.

 

6. 객체 전개연산자 + 기존 key 값 변경

const obj = {
  pororo: '뽀로로',
  lupy: '루피',
  crong: '크롱',
};

// lupy는 영어로 변경되고, 나머지는 기존 obj 값을 가져온다.
const copyObj2 = { ...obj, lupy: 'lupy' };

console.log(obj);
console.log(copyObj2);
console.log(obj === copyObj2);

• 전개연산자를 이용하여 obj의 값을 copyObj2로 대입합니다.
• 이때, key 중 lupy의 값을 ‘lupy’로 변경해서 대입합니다.
• 출력하면 obj는 기존대로 출력되고, copyObj2는 obj와 동일하지만 lupy 부분만 다르게 출력되는 것을 볼 수 있습니다.
• 또한 전개연산자로 대입하였기 때문에 obj === copyObj2를 했을 때 False가 출력됩니다.

 

7. 함수 전개연산자

• 함수에서 특정 인자만 제대로 값을 받고, 나머지는 대충 받아도 되는 경우 전개연산자를 사용하여 받을 수 있습니다.
• 보통 rest 변수 이름으로 사용하며 사용하게 되는 경우 rest 변수에는 아래와 같이 값이 들어가게 됩니다.
• rest = {c: 'dd', d: 'ee'} 형식으로 나머지 변수의 값이 들어간다.

// foo 함수에서 a, b 인자만 제대로 받고, 나머지는 대충 받아도 되는 경우
// 전개연산자를 사용해서 받을 수 있다.
function foo(a, b, ...rest) {
// rest 변수에는
// rest = {c: 'dd', d: 'ee'} 형식으로 나머지 변수의 값이 들어간다.
}

 

이상으로 전개 연산자에 대하여 알아보았습니다.

감사합니다.