자바스크립트의 동등 비교, 함수

1.1 자바스크립트의 동등 비교

• 자바스크립트의 데이터 타입
  • 원시 타입
    • boolean, null, undefined, number, string, symbol, bigint
    • 객체 외 모든 타입으로, 메서드를 갖지 않는다.
    • undefined와 null의 차이
      • undefined 는 선언됐지만 할당되지 않은 값이고, null 은 명시적으로 비어있음을 나타내는 값.
    • falsy 값
      • false, 0, NaN, “”(빈 문자열), null, undefined
    • String 은 한번 생성 시 그 문자열을 변경할 수 없다.
    • Symbol 은 중복되지 않는 어떠한 고유한 값이며 생성 시 반드시 Symbol()을 사용
  • 객체 타입(참조 타입)
    • object (배열, 함수, 정규식, 클래스 등)
    원시타입과 객체 타입의 가장 큰 차이점
    • 원시 타입은 불변 형태의 값으로 저장되는데, 객체 타입은 참조를 저장하기 때문에 값은 같았을지언정 참조하는 곳이 달라져 동등 비교를 했을 때 false가 나온다.
  • Object.is
    • 두개의 인수를 받고, 두 인수가 동일한지 확인하고 반환하는 메서드
    • == 처럼 형변환을 하지 않고 === 와 동일하게 타입이 다르면 그냥 false.
    • === 보다 좀 더 정확히 비교함(원시타입 간 비교)

    -0 === +0 // true    
    Object.is(-0, +0) // false
    

    • 객체 간 비교에서는 === 와 동일하게 동작
    • 오래된 브라우저 지원 시 폴리필이 필요할 수 있음
  • 리액트에서의 얕은 비교
    • 기본적으로 Object.is() 메서드를 사용하여 얕은 비교를 수행한다.
    • 깊은 비교를 하기 위해서 재귀적 비교 시 성능 악화 가능성 有

1.2 함수

• 함수란 작업을 수행하거나 값을 계산하는 등의 과정을 표현하고, 이를 하나의 블록으로 감싸서 실행 단위로 만들어 놓은 것
• 함수를 정의하는 4가지 방법
  1. 함수 선언문
     • function 키워드를 사용함
     • function 자체로 호이스팅됨 → 함수 선언 위치와 관계 없이 호출 가능
  2. 함수 표현식
     • var func = function () { ... } 처럼 변수에 할당하면 함수 표현식
     • 호이스팅 시 undefined 로 초기화 → 함수 선언 위치보다 먼저 호출하면 undefined 반환
  3. 화살표 함수
     • var func = () => {} 꼴로 작성된 함수
     • 별도 this 바인딩을 하지 않아 상위 스코프의 this를 그대로 사용하게 됨
     • constructor(생성자)가 없고, arguments가 별도로 생성되지 않음
  4. 함수 생성자
     • 클래스처럼 new 키워드를 통해 생성된 함수 (const add = new Function(’a’, ‘b’, ‘return a+b’) )
     • 클로저 생성 불가능 등으로 잘 사용되지 않음
• 즉시 실행 함수(IIFE, )
  • 정의 즉시 실행되는 함수
  • 전역 스코프를 오염시키지 않는 독립적인 함수 스코프 운용 가능
• 고차 함수
  • 함수를 인자로 받거나 결과로 함수를 반환하는 함수
  • 대표적인 예시 : 콜백 함수로 쓰이는 경우
• 함수 만들 때 주의사항
  • 함수 부수효과 최대한 없애기
    • 함수 작동 시 함수 외부에 대한 영향을 줄이기 : 함수 결과를 예측할 수 있도록
    • useEffect 작동 최소화
  • 함수 크기를 작게 만들기
    • 하나의 함수에서 너무 많은 기능을 하지 않도록 주의
    • 함수는 하나의 일을, 그 하나만 잘하면 된다(Do One Thing, and Do It Well)
  • 누구나 이해할 수 있는 이름을 붙이기
    • 콜백 함수에도 이름을 붙여주면 좋다