30 Days of JavaScript - Function Transformations | LeetCode

문제를 풀면서 문제의 의도와 연관된 개념에 대해 정리합니다.

2629. Function Composition

함수 합성(Function Composition) 구현하기

• 함수 합성에 대한 이해
  • 여러 개의 함수를 순서대로 적용해서 하나의 큰 함수를 만드는 과정
  • 함수를 반환하거나 다른 함수에 전달할 수 있는 특성을 활용하여 함수를 합성하는 패턴 익히기
  • 함수 배열이 비어있는 경우, 아무것도 적용하지 않은 원래 값을 반환 ⇒ 항등 함수(Identity Function)
• 고차 함수 활용
• 반복문을 이용한 함수 연결 방식 이해
  • f(g(h(x))): 오른쪽에서 왼쪽으로 실행됨
  • 함수 배열을 오른쪽에서 왼쪽으로 순회(역방향 순회)하며 입력값을 순차적으로 적용
• 클로저에 대한 이해
  • 함수 배열을 순회하며 이전 함수의 반환값을 다음 함수의 입력으로 연결

2703. Return Length of Arguments Passed

함수에 전달된 인자의 개수 반환하기

• JavaScript에서 함수 인자 처리 방식 이해
  • JavaScript 함수는 전달된 인자의 개수를 제한하지 않으며, 함수 선언부와 별개로 호출 시 전달된 모든 인자를 다룰 수 있음
  • 전달된 인자는 arguments 객체(array-like) 또는 rest parameter (...args)로 접근할 수 있음

arguments 객체

• 함수에 전달된 인수에 해당하는 유사 배열 객체입니다.
• arguments 객체는 모든 함수 내에서 이용 가능한 지역 변수로 함수 내에서 모든 인수를 참조할 수 있습니다.
• arguments 객체는 화살표 함수에서 존재하지 않고, 배열 메서드를 가지고 있지 않아 사용하기 번거롭습니다.

2666. Allow One Function Call

클로저를 활용해 함수의 호출 횟수 제한하기

• 클로저에 대한 이해
  • 함수 내부에 변수를 통해 함수 호출 여부 값을 저장
  • 반환된 함수를 통해서만 함수 호출 여부 변수에 접근하여 외부에서 접근할 수 없도록 제어
• 고차 함수에 대한 이해
  • fn을 인자로 받아 새로운 함수를 반환
• 함수 호출 제어 패턴 이해
  • 실제 개발에서 이벤트 리스너나 초기화 함수가 한 번만 실행되도록 제한할 때 자주 사용

2623. Memoize

메모이제이션(memoization) 구현하기

• 메모이제이션 개념 이해
  • 메모이제이션은 동일한 입력값에 대해 함수를 반복 호출하지 않도록 이전에 계산한 결과를 캐시에 저장해 재사용하는 최적화 기법
• 클로저를 이용하여 캐시 객체(상태) 유지
• 입력값을 기반으로 한 캐싱 전략
  • 입력이 여러 개인 경우 이를 구분하기 위해 각 입력 조합을 고유한 문자열 키로 저장해야 함
  • 입력값에 따라 다른 캐싱 전략이 필요

Object.prototype.hasOwnProperty()

• JavaScript 객체 인스턴스의 메서드로, 해당 객체가 지정된 속성(property)을 직접 가지고 있는지(즉, 상속받은 것이 아닌지)를 확인하고 true 또는 false를 반환합니다.
• 구문

  object.hasOwnProperty(prop)

  • prop: 검사할 속성명(String) 또는 Symbol
• 반환값
  • 객체가 특정 속성을 고유한 속성으로 가지고 있으면 true, 그렇지 않으면 false 반환
  • 특정 속성이 해당 객체의 고유한 속성이라면 이 값이 null, undefined 일지라도 true 반환
  • in 연산자와 다르게, 프로토타입 체인까지 검사하지 않고 오직 객체 자신의 속성만 검사

    const obj = {};
    obj.hasOwnProperty("toString"); // false, toString은 prototype에서 상속됨
    "toString" in obj; // true

  • 배열도 객체이므로 hasOwnProperty() 메서드를 사용하여 인덱스가 존재하는지 확인 가능

    const fruits = ["Apple", "Banana", "Watermelon", "Orange"];
    fruits.hasOwnProperty(3); // true ('Orange')
    fruits.hasOwnProperty(4); // false - not defined

• 주의할 점
  • 객체에 hasOwnProperty라는 이름의 속성이 별도로 정의되어 있을 경우, 의도치 않은 동작을 할 수 있음
  • Object.create(null)로 생성된 객체인 경우, Object.prototype 로부터 상속된 것이 아니기 때문에 hasOwnProperty() 에 접근할 수 없어 에러 발생

    const foo = Object.create(null);
    foo.prop = "exists";
    foo.hasOwnProperty("prop"); // Uncaught TypeError: foo.hasOwnProperty is not a function

Object.hasOwn()

• hasOwnProperty()의 단점을 보완한 메서드로 hasOwn() 사용을 권장합니다.

• 객체에 hasOwnProperty라는 이름의 속성이 별도로 정의되어 있어도 영향을 받지 않습니다.

  const foo = {
    hasOwnProperty() {
      return false;
    },
    bar: "The dragons be out of office",
  };
  
  console.log(foo.hasOwnProperty("bar")); // false
  
  console.log(Object.hasOwn(foo, "bar")); // true

• Object.create(null)로 생성된 객체인 경우에 hasOwn() 메서드를 사용할 수 있습니다.

  const foo = Object.create(null);
  foo.prop = "exists";
  
  console.log(foo.hasOwnProperty("prop")); // Uncaught TypeError: foo.hasOwnProperty is not a function
  
  console.log(Object.hasOwn(foo, "prop")); // true

• 구문

  Object.hasOwn(obj, prop)

  • obj: 평가할 JavaScript 객체 인스턴스
  • prop: 검사할 속성명(String) 또는 Symbol

• 반환값

  • 지정된 객체가 직접 명시된 속성을 정의했다면 true, 그렇지 않으면 false 반환
  • 명시된 속성이 값이 null 혹은 undefined일 경우일지라도 객체의 직접적인 속성인 경우 Object.hasOwn() 메서드는 true를 반환
  • in 연산자와는 달리, 이 메서드는 객체의 프로토타입 체인에서 지정된 속성을 확인하지 않음
  • 배열의 특정 인덱스의 존재여부 확인 가능

    const fruits = ["Apple", "Banana", "Watermelon", "Orange"];
    Object.hasOwn(fruits, 3); // true ('Orange')
    Object.hasOwn(fruits, 4); // false - not defined