티스토리 뷰

Javascript

#3 값 vs 참조

심재철 2019. 7. 29. 10:40

https://www.notion.so/simsimjae/3-vs-75d0eafdb36b4ec2ba1dc9f519a15555

두 객체가 같은지 비교하기

이 말에는 두가지 의미가 담겨있다.

  1. 두 객체의 참조가 같은것인지?
  2. 두 객체의 내용이 같은것이지?

두 객체의 참조가 같은가?

var obj = { 'title' : 'hello'; }; var obj2 = obj; obj === obj2 // true

두 객체의 내용이 같은가?

var obj = { 'title' : 'hello' } var obj2 = { 'title' : 'hey' } obj === obj2 // true

  • 두 객체의 내용이 다른데도 true를 보여주고 있다.
  • 이것은 변수에 담긴 참조값을 기준으로 비교해서 그렇다.
  • 그렇다면 값을 기준으로 비교하고 싶다면?

JSON.stringify()

var arr1str = JSON.stringify(arr1); var arr2str = JSON.stringify(arr2); console.log(arr1str === arr2str); // true

  • 두개의 배열이 같은지를 확인하고 싶을때는 스트링으로 변환한다음 비교하면 된다.
  • 스트링 원시타입으로 변환한다음 값을 ===로 비교하게 되면 참조값을 기준으로 비교하는게 아니라 값을 기준으로 비교하기 때문에 내용이 같은지를 확인할 수 있게 된다.

객체를 재귀적으로 탐색하면서 값이 같은지를 확인하는 방법도 있다.

순수함수

함수 외부에 어떤 변형도 가하지 않는 함수를 의미한다.

  • 함수의 인자로 원시타입만을 받아서 무조건 call-by-value가 일어난다.
  • 값을 인자로 받아서 내부적으로 처리한다음 리턴하는데, 이때 사용된 지역변수들은 함수가 종료되면 가비지 컬렉션 된다.
  • 만약 객체를 인자로 받는다면 call-by-reference가 일어나기 때문에 함수 내부에서 가한 조작이 함수 외부에도 영향을 미치게 된다. 그럼 그 함수는 순수함수가 아니게 된다.
  • 순수함수가 아닌 함수는 디버깅을 어렵게 만들고 여러 부작용이 일어날 수 있다.

Array.map Array.filter 와 같은 메소드들은 순수함수로 작성되어 있다. → 인자로 받은 배열을 함수 내에서 다른 배열로 클론한다음 그 배열로 작업을 해서 리턴시킨다.

순수 함수 - 예제1

function changeAgePure(person) { var newPerson = JSON.parse(JSON.stringify(person)); newPersonObj.age = 25; return newPersonObj; }; var alex = { name: 'Alex', age: 30 }; var alexChanged = changeAgePure(alex); console.log(alex); // -> {name: 'Alex', age: 30} console.log(alexChanged); // -> {name: 'Alex', age: 25}

한줄씩 살펴보자.

var newPerson = JSON.parse(JSON.stringify(person));

  1. 인자로 받은 alex 객체를 복사한 새로운 객체를 만들어준다.

  2. 객체 → JSON → 객체 , 형태로 객체를 복사하고있다.

    newPersonObj.age = 25; return newPersonObj; var alexChanged = changeAgePure(alex);

  3. 새롭게 클론된 객체에 프로퍼티를 추가하고 리턴하고

  4. 그 객체를 alexChanged에 담았다.

    console.log(alex); // -> {name: 'Alex', age: 30} console.log(alexChanged); // -> {name: 'Alex', age: 25}

  5. 이제 인자로 넘기기전 객체인 alex와

  6. 리턴된 객체 alexChanged는 서로 다른 객체이다. (둘의 참조값도 다르다.)

이렇게 함수 외부에 아무런 조작을 가하지않은 changeAgePure와 같은 함수를 순수함수라고 한다

Q. 문제

function changeAgeAndReference(person) { person.age = 25; person = { name: 'John', age: 50 }; return person; } var personObj1 = { name: 'Alex', age: 30 }; var personObj2 = changeAgeAndReference(personObj1); console.log(personObj1); // -> ? console.log(personObj2); // -> ?

  1. 각 출력값이 어떻게 될지 예상해보시오.
  2. 이 함수는 순수함수인가?

A.

console.log(personObj1); // -> {name: 'Alex', age: 25} console.log(personObj2); // -> {name: 'John', age: 50}

  1. 순수함수가 아니다.

인자로 넘겨진 person객체의 age 프로퍼티를 25로 변경했기 때문에 함수 외부를 변화시켰다. 따라서 순수함수가 아니다.

댓글
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함