[JavaScript] 원본 수정하지 않고 데이터 출력하기

Spread Operator란?

• 스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있다.
• 연결, 복사 등의 용도로 활용도가 높은 편이다.
• 원본을 수정하지 않고 사용할 수 있다.

예시

let newuser = {
    id : 'heesu',
    pw : '1234',
    name : '장희수',
    email : 'heesu03@naver.com',
    active : false
};

let 회원정보업데이트 = {
    name : '희수장',
    email : 'jang@naver.com'
}

// newuser['name'] = 회원정보업데이트['name'];
// newuser['email'] = 회원정보업데이트['email'];
newuser = {...newuser, ...회원정보업데이트};  // 위의 두 줄의 코드와 같은 뜻으로 코드가 훨씬 더 간결해진다.

console.log(newuser);
// output: {id: 'heesu', pw: '1234', name: '희수장', email: 'jang@naver.com', active: false}

결과값을 보면, 원본의 내용이 수정된 것을 확인할 수 있다. 만약 원본의 내용이 수정되면 안되는 상황이라면 어떻게 할까?

let newuser2 = {...newuser}; 

newuser2["id"] = "helloworld";

console.log(newuser);
// output: {id: 'heesu', pw: '1234', name: '희수장', email: 'jang@naver.com', active: false}
console.log(newuser2);
// output: {id: 'helloworld', pw: '1234', name: '희수장', email: 'jang@naver.com', active: false}

spread 용법을 사용하면 원본을 수정하지 않고 데이터를 출력할 수 있다.

참고 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax