[JS] assign 메서드

2019. 06. 09 수정

1. assign 메서드

assign() 메서드는 두 번째 매개변수 객체의 프로퍼티를 복사하여 첫 번째 매개변수 객체의 프로퍼티에 추가한 뒤 첫 번째 매개변수 객체를 반환하는 메서드입니다.

말로 설명하면 이러한데... 코드를 보는게 이해가 잘 되겠죠?

let foo = {
    name : "victolee",
    age : 25
}

let goo = Object.assign({}, foo)
console.log(goo.name)

예제는 foo 객체에 name, age 프로퍼티를 선언하고, assign() 함수를 통해 goo 객체도 foo 객체와 똑같은 프로퍼티를 가지는지를 보여줍니다.

assign() 메서드의 첫 번째 인자에는 비어 있는 객체를, 두 번째 인자에는 foo 객체를 전달했고, 이를 goo 객체에 할당한뒤 goo.name을 확인해보면 정상적으로 "victolee"가 응답되는 것을 확인할 수 있습니다.

2. assign 메서드가 필요한 이유

assign() 함수가 뭐하는지는 알겠는데, 그럼 왜 필요할까요?

예를 들어, 어떤 객체(foo)를 어떤 변수(goo)에 할당했을 때, goo의 프로퍼티 값을 바꾸면 원래 객체(foo)의 프로퍼티 값도 바뀌게 됩니다.

let foo = {
    name : "victolee",
    age : 25
}
let goo = foo
goo.name = "victory"

console.log(foo.name)
console.log(goo.name)

일반적으로 이런식의 코딩을 한 의도는 원본 데이터는 그대로 두고 복사본으로 어떤 작업을 수행하기 위해서일 것입니다.

그런데 위의 결과처럼 복사본의 작업 영향이 원본 데이터까지 미치면 안되겠죠?

이럴 때 assign() 메서드가 유용합니다.

assing() 메서드를 사용해서 의도대로 동작하도록 수정해보겠습니다.

let foo = {
    name : "victolee",
    age : 25
}
let goo = Object.assign({}, foo)
goo.name = "victory"

console.log(foo.name)
console.log(goo.name)

assign() 함수로 foo 객체의 모든 프로퍼티를 goo 객체에 전달하여 복사본을 만든 예제입니다.

그리고 goo 객체에서 name 프로퍼티를 수정했음에도 원본 객체 foo.name의 값은 변함이 없는 것을 확인하였습니다.

이상으로 assign() 메서드에 대해 알아보았습니다.

assign() 메서드는 다른 객체의 프로퍼티를 복사해서 새로운 객체를 생성한다는 점을 기억해주세요.