Deep Dive : Javascript 동등비교 / 함수

🖤 React 컴포넌트에서 렌더링이 일어나는 이유
- prop간 동등비교
- 얕은 비교 기반 
 
 
1-1. 자바스크립트 동등 비교
 
✓ 원시 타입(primitive type)
- boolean / null / undefined / number / string / symbol / bigint
- 불변 형태의 값
 
✓ 객체 타입(object/reference type) : object
- 변경 가능한 값 -> 프로퍼티 추가
- 참조 값 -> 변수 재할당 시 주소 저장
 
✓ Object.is
- cf) == : type casting 이후 비교
- 객체 간 비교 시 == 와 동일하게 동작(주소값 비교)
 
✓ shallowEqual
- React에서 사용
- 객체 간 얕은 비교
- 1 depth 까지 비교
- 객체 안의 객체(2 depth 이상)의 경우 제대로 동작하기 어려움
 
+ truthy, falsy
- truthy :  https://developer.mozilla.org/ko/docs/Glossary/Truthy
- falsy :  https://developer.mozilla.org/ko/docs/Glossary/Falsy
- quiz : https://quizzesforyou.com/quiz/jstruthyfalsy
 
1-2. 함수
- 작업을 수행하거나 값을 계산하는 등의 과정을 표현, 이를 하나의 블록으로 감싸 실행 단위로 만들어 놓은 것
 
✓ function ( ) { } 
- 함수 선언문(statement)
- 호이스팅 -> 실행 전 메모리에 등록, 선언을 하단에서 했어도 상단에서 사용 가능
 
✓ const ___ ( ) => { } / const ___ = function ( ) { }
- 함수 표현식 
- 변수에 할당해서 호이스팅 되는 경우 변수 값이 undefined로 호이스팅
 
✓ function 생성자
- new Functon(...params, return)
- 권장되지 않는 방법
 
✓ 화살표 함수
- this : 상위 스코프의 this 를 가리킴 -> React에서는 컴포넌트
- cf) function 선언에서 this : 런타임 시점의 this, 전역 객체
 
✓ 즉시 실행 함수
- ( function () { } )
- ( ( ) => { } )
 
✓ 고차 함수 
- 함수를 인수로 받거나 새로운 함수 반환
- ex) map