[LeetCode-JS 30 days] #3.Function Transformations - 1(#함수객체)

LeetCode JS 30 days Challenge

2024.08.06 - [🛠️ Tool/FE] - [LeetCode-JS 30 days] #2. Array Transformation - 1(#순회)

[LeetCode-JS 30 days] #2. Array Transformation - 1(#순회)

알기 쉽게 쓰였고 많은 사람들에게 검증된 설명이 LeetCode Discuss에 올라오는 것을 확인하고, JS Basic 공부에 이를 활용해보고자 하였다. LeetCode PS처럼 문제를 해결하며 JS의 basic skill을 익힐 수 있도록 구성되어 있다.

1. Closures
2. Basic Array Transformations
3. Function Transformations
4. Promises and Time
5. JSON
6. Classes

총 6개의 Part로 구성되며 본 포스트에서는 Function Transformations에 대해 다룬다.

Function Composition

가장 많은 Upvote를 받은 Discuss

요약

합성함수를 어떻게 JS로 적용할 것인가? Parameters로 주어진 함수 배열의 index가 가장 큰 함수가 합성함수 가장 내부에 적용되는 함수이다. 아래의 접근 방식은 어떤 input data에 연속적인 변환을 가하고자 할 때 유용하다.

1. ReduceRight란?

• JS의 array에서 사용 가능한 method로 reduce method와 배열 순회 방향만 반대이다.
• reduceRight method는 두 개의 arguments가 있는 callback function을 갖는다. Arguments는 'accumulator' 와 'current' value를 나타낸다(a.k.a acc, cur).
• 이 callback function은 array의 각 element로 한 번 씩 호출된다.

const arr = [1, 2, 3, 4, 5];

const sum = arr.reduceRight((prev, curr) => {
  return prev + curr;
});

console.log(sum); // Output: 15

• 위 코드는 arr 배열의 element의 총합을 reverse order로 구하는 것이다.
• reduce method와 마찬가지로 초기값이 지정되어 있지 않은 경우 첫번 째 배열 element가 accumulator에 할당되고, 두 번째 cur부터 계산된다.
• 모든 element를 순회한 후에는 accumulator가 반환된다 

문제의 정답은 아래와 같다.

var compose = function(functions) {
	if (functions.length === 0) {
    return function(x) { return x; };
  }

  return ((x) => {
    return functions.reduceRight((acc, nextFn) => {
        return nextFn(acc);
      }, x);
  })
};


const fn = compose([x => x + 1, x => 2 * x]);
console.log(fn(4)); // 9

• fn에는 일반적인 함수가 할당된다.
  • return ((x) => { ... }) 으로 함수가 반환되기 때문
  • fn(4)를 하면 반환된 함수의 인자로 4가 입력됨
• x로 인자가 입력되면, 합성함수(composition function)가 실행된다.
  • functions.reduceRight()에 의해서 최종적으로 acc가 반환됨

Time, Space Complexity

• O(n), O(n)

reduceRight() method를 사용하면 Space Complexity가 O(n)이 된다.

 

reduceRight() method가 재귀적 형태로 작동하며, 각 함수 호출이 끝날 때까지 스택에 함수 호출이 쌓이기 때문이다. 모든 함수가 실행된 후에야 최종적으로 스택에서 함수들이 제거된다. 각 함수 호출 시 함수의 실행 컨텍스트가 콜 스택에 추가되고, 각 함수가 반환되기 전에 다음 함수가 스택에 쌓이는 구조로, 콜 스택에 최대 n개의 함수가 동시에 존재할 수 있게 되는 것이다.

Space Complexity == O(1)인 접근 방식

var compose = function(functions) {
  if (functions.length === 0) {
    return function(x) { return x; };
  }
  
  return function(x) {
    let result = x;
    for (let i = functions.length - 1; i >= 0; i--) {
      result = functions[i](result);
    }
    return result;
  }
};

• reduceRight() method와 달리 반복문을 사용하여 함수를 순차적으로 실행한다.
• 각 함수 실행 결과를 result 변수에 저장한다.
  • result 변수는 덮어써지는 것으로 콜 스택에 함수가 쌓이지 않음
  • 어떤 함수가 실행되든 함수가 끝나면 콜 스택에서 제거됨
• 이 과정에서 단 하나의 result 변수만 사용되며, 추가적인 메모리 할당이 발생하지 않는다.

Return Length of Arguments Passed

가장 많은 Upvote를 받은 Discuss

요약

왜 rest parameter를 사용하는가?

Javascript에서 rest parameter를 사용해 함수 내에서 무한한 수의 인수를 배열로 표현할 수 있다. 이를 통해 명시적으로 정의하지 않고도 여러 arguments를 처리할 수 있다.

let array = [1,2,3,4,5];

// 일반적인 arguments가 전달되는 방식
function sum (a,b,c,d,e){
    console.log(a,b,c,d,e) // 1 2 3 4 5 
}
 
// 브루트 포스 method
sum(array[0],array[1],array[2],array[3],array[4]);

// 문제 : 각각의 value를 개별적으로 pass해야 한다.
// 위 방식은 arguments가 많아졌을 때 하나 하나 pass 해야 한다는 점에서 타당하지 않다.

// spread parameter를 사용하면 모든 value를 한 번에 pass할 수 있다.
sum(...array);

// 함수 내에서 spread parameter는 배열(array)로서 무한한 수의 arguments를 전달하도록 한다.
function sum (...args){
    console.log(args) // [1,2,3,4,5]
}

// arguments의 일부를 array로 가져오기 위해 rest parameter를 사용할 수도 있다.
function sum (a,b,...args){
    console.log(a,b,args) // 1 2 [3,4,5]
}

rest parameter VS spread parameter

• values를 어딘가에 pass하는 경우는 spread parameter
  • 할당 연산자의 우측
  • function으로 arguments를 pass되는 경우
• values를 receive하는 경우 rest parameter
  • 할당 연산자의 좌측
  • function에서 received한 parameter

// Spread parameters
const arr = [1, 2, 3];
myFunction(...arr);

// Rest parameters
const myFunction = function(...arr){
    // do something
}

Allow One Function Call

가장 많은 Upvote를 받은 Discuss

요약

이전에 호출되었는지 여부를 트래킹할 수 있는 함수를 반환해야 한다. 트래킹하기 위해 클로저가 포함된 함수를 반환할 수 있다. 클로저의 값이 default false였다가 한 번 호출되어 true로 바뀌면 다음 함수 호출부터는 지속 undefined를 반환하는 함수를 작성한다.

반환된 어떤 함수의 상태를 저장하기 위해 클로저를 사용할 수 있다.
반환된 함수는 클로저가 생성될 때의 context를 계속해서 유지하기 때문!

var once = function(fn) {

  let hasBeenCalled = false;
  let result;

  return function(...args) {
    if (!hasBeenCalled) {
      result = fn(...args);
      hasBeenCalled = true;
      return result;
    } else {
      return undefined;
    }
  }

};

let fn = (a,b,c) => (a + b + c);
let onceFn = once(fn);

console.log(onceFn(1,2,3)); // 6
console.log(onceFn(2,3,6)); // undefined

• hasBeencalled 클로저 변수를 통해 함수의 재호출을 막고 있음

Class를 이용한 접근 방법

위 코드의 반환된 함수의 역할을 할 수 있는 Once Class를 정의하여 함수의 재호출을 막을 수도 있다.

class Once {
  hasBeenCalled = false;
  result;

  call(fn, ...args) {
    if (!this.hasBeenCalled) {
      this.result = fn(...args);
      this.hasBeenCalled = true;
      return this.result;
    } else {
      return undefined;
    }
  }
}

function once(fn) {
  const instance = new Once();
  return instance.call.bind(instance, fn);
}

•