티스토리 뷰
https://www.notion.so/simsimjae/3-vs-75d0eafdb36b4ec2ba1dc9f519a15555
두 객체가 같은지 비교하기
이 말에는 두가지 의미가 담겨있다.
- 두 객체의 참조가 같은것인지?
- 두 객체의 내용이 같은것이지?
두 객체의 참조가 같은가?
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));
-
인자로 받은 alex 객체를 복사한 새로운 객체를 만들어준다.
-
객체 → JSON → 객체 , 형태로 객체를 복사하고있다.
newPersonObj.age = 25; return newPersonObj; var alexChanged = changeAgePure(alex);
-
새롭게 클론된 객체에 프로퍼티를 추가하고 리턴하고
-
그 객체를 alexChanged에 담았다.
console.log(alex); // -> {name: 'Alex', age: 30} console.log(alexChanged); // -> {name: 'Alex', age: 25}
-
이제 인자로 넘기기전 객체인 alex와
-
리턴된 객체 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); // -> ?
- 각 출력값이 어떻게 될지 예상해보시오.
- 이 함수는 순수함수인가?
A.
console.log(personObj1); // -> {name: 'Alex', age: 25} console.log(personObj2); // -> {name: 'John', age: 50}
- 순수함수가 아니다.
인자로 넘겨진 person객체의 age 프로퍼티를 25로 변경했기 때문에 함수 외부를 변화시켰다. 따라서 순수함수가 아니다.
'Javascript' 카테고리의 다른 글
#5 ==와 ===의 차이 (1) | 2019.07.29 |
---|---|
#4 암묵적 타입 변환 (0) | 2019.07.29 |
#2 자바스크립트의 원시타입 (0) | 2019.07.29 |
#1 자바스크립트 함수 실행의 이해 - 콜스택, 이벤트루프, Task, 실행컨텍스트 (0) | 2019.07.29 |
[JS] ==, ===, 값에 의한 비교, 참조에 의한 비교 (0) | 2019.06.17 |
- Total
- Today
- Yesterday
- react
- webpack
- promise
- await
- storybook
- async
- react hooks
- Next.js
- reactdom
- reflow
- type alias
- hydrate
- server side rendering
- rendering scope
- es6
- mobx
- state
- Polyfill
- reducer
- design system
- useEffect
- atomic design
- Babel
- useRef
- javascript
- props
- computed
- return type
- Action
- typescript
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |