Immutability (불변성) 에 대한 정리 - 3

Immutability (불변성) 포스팅 리스트

- Immutability (불변성) 에 대한 정리 - 1

- Immutability (불변성) 에 대한 정리 - 2

- Immutability (불변성) 에 대한 정리 - 3

서두

지난 포스팅 immutability 에 대한 정리 2편 에서는 Object Data type 같은 경우 어떻게 하면 immutability (불변성) 을 지킬수 있는지 방법을 알아보았고 함수 Object.assign, Array.prototype.concat 에 대해 알아보았고 Nested Object (중복 객체) 의 경우 어떻게 대처하면 되는지에 대해 알아보았습니다.

 

이번 포스팅에서는 함수 와 관련된 immutability (불변성) 에 대해 알아보겠습니다.

 

함수와 객체가 만나게 된다면?

JavaScript 를 사용할때 함수에 객체를 인자로 넘겨서 사용해본적이 있나요?

한번쯤은 있을텐데 만약 그럴경우 예상치도 못한 상황이 발생하게 됩니다.

다음 예제들을 보면서 알아보도록 하겠습니다.

 

const f1 = { name: "kim" }

person.name = "lee"

const fn = (person) => {
  person.name = "Lee";
};

const f1 = { name: "Kim" };

fn(f1);

console.log(f1); // { name: "Lee" }

함수로 테스트 하기 위해서 일단 fn 이라는 함수를 만들어 줍니다.

fn 함수 - 매개변수에 person 이라는 이름으로 받아주고 함수 안에서 person.name 의 값에 "Lee" 라는 문자열을 넣어줍니다.

 

그리고 fn 함수에 인자로 f1 변수를 인자에 넣고 돌리게 되면 f1의 name 속성의 값은 "Lee" 가 되게 됩니다.

immutability (불변성) 에 어긋나게 되죠.

 

이유는 매개변수로 받은 person에서 f1의 값을 받은게 아니라 주소로 받은것이기 때문에 f1 과 person 변수는 같은 객체를 가리키게 됩니다, 그래서 함수 내 매개변수로 받은 person의 객체에서 name 의 값을 바꾸게 되면 f1 의 객체 속성인 name도 변하게 됩니다.

 

이제 함수 매개변수에 객체를 넘겼을때 어떻게 하면 immutability 을 지킬수 있을까요?

 

Function Immutability - 1

첫번째 방법으로는 함수 내에서 Object.assign 를 사용하여 person 매개변수를 재정의 할것입니다.

const o1 = { name: "kim" }

---

---

Object.assign({})

---

Object.assign({}, person)

---

person = Object.assign({}, person)

---

person.name = "Lee"

const fn = (person) => {
  person = Object.assign({}, person);
  person.name = "Lee";
};

const f1 = { name: "Kim" };

fn(f1);

console.log(f1); // { name: "Kim"}

방법은 아주 간단합니다.

 

Object.assign 함수를 이용하여 함수내에서 매개변수로 받은 person 을 재정의 해줍니다.

그래서 person 변수와 f1 변수가 가리키는 객체가 서로 다르기 때문에 person의 name 속성에 "Lee" 문자열을 대입시켜도 f1의 원본 객체의 값이 변하지 않습니다.

 

Function Immutability - 2

const f1 = { name: "Kim" }

---

Object.assign({})

---

Object.assign({}, f1)

---

const f2 = Object.assign({}, f1)

---

---

person.name = "Lee"

 

const fn = (person) => {
  person.name = "Lee";
};

const f1 = { name: "Kim" };
const f2 = Object.assign({}, f1);

fn(f2);

console.log(f1);
console.log(f2);

 

두번째 방법으로는 f2 라는 변수를 따로 만들어서 Object.assign 을 통해 f1의 값을 f2로 객체 복사를 한 뒤 fn 함수 인자로 넘겨줍니다.

 

그럼 fn 함수에서 객체의 데이터를 변경하더라도 f2의 객체이기 때문에 f1의 원본 객체 데이터는 변하지 않게 되어 immutability (불변성) 을 지킬수 있게 됩니다.

 

이번 포스팅에선 함수에 객체가 인자로 들어갔을때, 매개변수로 받았을때 어떻게 동작하는지 어떤 문제점이 있는지 어떻게 하면 그 문제점을 해결할수 있는지에 대해 알아보았습니다.

 

읽어주셔서 감사하고 다음 포스팅에선 Object.freeze 에 대해 알아보겠습니다.