[Js] 모던 자바스크립트 Deep Dive - 변수(4장)

Wed, 01 May 2024 00:00:00 +0900

변수란 무엇일까?
변수 선언과 호이스팅

변수란 무엇일까?

프로그래밍을 하면서 가장 많이 접한 단어가 변수, 함수 단어가 아닐까 싶다. 나는 이번에 변수 챕터를 읽으면서 변수에 대해 몰랐던 것도 알게 되었다. 많이 접한 단어인데 정확한 개념을 모르고 있었단는 것을 알고 기초부터 차근차근 쌓아나가자는 생각을 많이하게 되었다.

그렇다면 본론으로 돌아가서 변수란 정확한 어떤 뜻일까? 변수란 하나의 값을 저장하기 위해 확보한 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이라고 나와있다. 한마디로 변수를 사용해서 메모리 공간을 확보하고 해당 메모리 주소를 가리키는 식별자라고 생각하면 좋을꺼 같다.

변수 선언과 호이스팅

변수를 사용하기 위해서는 반드시 선언이 필요하다. 변수를 선언하기 위해서는 var, const, let과 같은 키워드를 사용해서 선언한다. var, const, let키워드는 모두 차이점이 존재하는데 해당 키워드를 소개하는 챕터가 따로 존재해서 그 부분을 읽게 되면 다시 블로그에 정리해서 올리려고 한다.

먼저 변수를 아래 코드와 같이 선언과 동시에 할당을 하거나 선언과 동시에 할당을 하거나 두 가지 방법이 존재한다.

var sum; // 변수 선언
sum = 50; // 변수 할당

var score = 50; // 변수 선언과 동시에 할당

인터프리터에 의해 소스 코드를 한 줄씩 실행이 되는데 선언부는 Javascript 메커니즘에 의해서 코드의 상단으로 끌어올려지는 호이스팅이 발생한다. 변수인 var, let, const뿐만 아니라 function, class과 같은 키워드도 코드 상단으로 끌어올려진다.

변수가 상단으로 끌어올려지면 값이 할당이 안되어 있기 때문에 undefined가 할당되어 있을 것이다. 아래와 같이 콘솔을 찍게 되면 undefined가 출력된다.

console.log(score)
var score = 10;

변수는 선언과 동시에 메모리공간을 차지하게 되고 초기에는 undefined값이 할당되어 있을 것이다. 그 후 인터프리터에 의해 소스 코드를 한 줄씩 실행이 되며 할당이 되는데 그때 기존에 undefined가 할당되어 있던 메모리 공간을 지우고 메모리 공간에 할당하는게 아니라 새로운 메모리 공간을 확보하고 그곳에 새롭게 할당하게 된다. 이 부분은 나도 잘 몰랐던 부분이었다.

그럼 undefined가 있던 메모리 공간은 어떻게 되나싶은 생각이 있을텐데 undefined 메모리 공간은 가비지 콜렉터에 의해 정리되어지게 된다. 가비지 콜렉터란 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리 공간을 해제하는 기능을 의미한다.

[LeetCode] Debounce

Wed, 01 May 2024 00:00:00 +0900

PROBLEMS

PROBLEMS

Description

Given a function fn and a time in milliseconds t, return a debounced version of that function.

A debounced function is a function whose execution is delayed by t milliseconds and whose execution is cancelled if it is called again within that window of time. The debounced function should also receive the passed parameters.

For example, let’s say t = 50ms, and the function was called at 30ms, 60ms, and 100ms.

The first 2 function calls would be cancelled, and the 3rd function call would be executed at 150ms.

If instead t = 35ms, The 1st call would be cancelled, the 2nd would be executed at 95ms, and the 3rd would be executed at 135ms.

The above diagram shows how debounce will transform events. Each rectangle represents 100ms and the debounce time is 400ms. Each color represents a different set of inputs.

Please solve it without using lodash’s _.debounce() function.

Example

Example 1:

Input:
t = 50
calls = [
{“t”: 50, inputs: [1]},
{“t”: 75, inputs: [2]}
]
Output: [{“t”: 125, inputs: [2]}]
Explanation:
let start = Date.now();
function log(…inputs) {
console.log([Date.now() - start, inputs ])
}
const dlog = debounce(log, 50);
setTimeout(() => dlog(1), 50);
setTimeout(() => dlog(2), 75);

The 1st call is cancelled by the 2nd call because the 2nd call occurred before 100ms
The 2nd call is delayed by 50ms and executed at 125ms. The inputs were (2).

Example 2:

Input:
t = 20
calls = [
{“t”: 50, inputs: [1]},
{“t”: 100, inputs: [2]}
]
Output: [{“t”: 70, inputs: [1]}, {“t”: 120, inputs: [2]}]
Explanation: The 1st call is delayed until 70ms. The inputs were (1).
The 2nd call is delayed until 120ms. The inputs were (2).

Example 3:

Input:
t = 150
calls = [
{“t”: 50, inputs: [1, 2]},
{“t”: 300, inputs: [3, 4]},
{“t”: 300, inputs: [5, 6]}
]
Output: [{“t”: 200, inputs: [1,2]}, {“t”: 450, inputs: [5, 6]}]
Explanation:
The 1st call is delayed by 150ms and ran at 200ms. The inputs were (1, 2).
The 2nd call is cancelled by the 3rd call
The 3rd call is delayed by 150ms and ran at 450ms. The inputs were (5, 6).

Constraints

0 <= t <= 1000
1 <= calls.length <= 10
0 <= calls[i].t <= 1000
0 <= calls[i].inputs.length <= 10

Solution

Runtime: 56ms
Memory: 49.04MB

/**
 * @param {Function} fn
 * @param {number} t milliseconds
 * @return {Function}
 */
var debounce = function (fn, t) {
    let timerId
    return function (...args) {
        clearTimeout(timerId)
        timerId = setTimeout(() => fn(...args), t)
    }
};

/**
 * const log = debounce(console.log, 100);
 * log('Hello'); // cancelled
 * log('Hello'); // cancelled
 * log('Hello'); // Logged at t=100ms
 */

Retrospect

이번 문제는 debounce함수를 지속적으로 호출했을때, 파라미터로 받은 t 밀리초보다 먼저 호출하게 되면 값을 반환하지 않고 t 밀리초동안 아무 호출이 없을 경우 반환하는 함수를 만드는 것이었다. 한마디로 설명하자면 시간간격을 두고 호출하는 함수였다.

시간 간격을 두기 위해서라면 무조건 setTimeout메서드가 필요하다고 생각했다. 그리고 timerId는 전역에 선언해두었는데 이렇게 한 이유가 계속해서 debounce함수를 호출했을때, t밀리초 이전에 함수를 계속 호출하게 되면 반환하는 함수에서 바로 clearTimeout을 이용해 setTimeout를 취소하기 위해 사용했다.

timerId를 전역으로 선언하지 않고 내부에서 선언하고 return할때 clearTimeout을 사용하게 된다면, 호출할때마다 매 호출 건에 대해 t 밀리초 delay가 되서 출력이 될 것이기 때문이다.

[LeetCode] Promise Time Limit

Tue, 30 Apr 2024 00:00:00 +0900

PROBLEMS

PROBLEMS

Description

Given an asynchronous function fn and a time t in milliseconds, return a new time limited version of the input function. fn takes arguments provided to the time limited function.

The time limited function should follow these rules:

If the fn completes within the time limit of t milliseconds, the time limited function should resolve with the result. If the execution of the fn exceeds the time limit, the time limited function should reject with the string “Time Limit Exceeded”.

Example

Example 1:

Input:
fn = async (n) => {
await new Promise(res => setTimeout(res, 100));
return n * n;
}
inputs = [5]
t = 50
Output: {“rejected”:”Time Limit Exceeded”,”time”:50}
Explanation:
const limited = timeLimit(fn, t)
const start = performance.now()
let result;
try {
const res = await limited(…inputs)
result = {“resolved”: res, “time”: Math.floor(performance.now() - start)};
} catch (err) {
result = {“rejected”: err, “time”: Math.floor(performance.now() - start)};
}
console.log(result) // Output
The provided function is set to resolve after 100ms. However, the time limit is set to 50ms. It rejects at t=50ms because the time limit was reached.

Example 2:

Input:
fn = async (n) => {
await new Promise(res => setTimeout(res, 100));
return n * n;
}
inputs = [5]
t = 150
Output: {“resolved”:25,”time”:100}
Explanation:
The function resolved 5 _ 5 = 25 at t=100ms. The time limit is never reached.

Example 3:

Input:
fn = async (a, b) => {
await new Promise(res => setTimeout(res, 120));
return a + b;
}
inputs = [5,10]
t = 150
Output: {“resolved”:15,”time”:120}
Explanation:
The function resolved 5 + 10 = 15 at t=120ms. The time limit is never reached.

Example 4:

Input:
fn = async () => {
throw “Error”;
}
inputs = []
t = 1000
Output: {“rejected”:”Error”,”time”:0}
Explanation:
The function immediately throws an error.

Constraints

0 <= inputs.length <= 10
0 <= t <= 1000
fn returns a promise

Solution

Runtime: 54ms
Memory: 49.05MB

/**
 * @param {Function} fn
 * @param {number} t
 * @return {Function}
 */
 // Solution1
var timeLimit = function (fn, t) {
    return async function (...args) {

        const timeoutPromise = new Promise((_, reject) => {
            setTimeout(() => { reject('Time Limit Exceeded') }, t);
        })

        return Promise.race([fn(...args), timeoutPromise]);
    }
};

Retrospect

이번 문제는 온전히 나의 힘으로 풀지 못했고 풀이에 의존해야했다. 문제를 해석하자면, fn함수에 있는 setTimeout의 시간보다 파라미터를 통해 넘겨준 t시간이 더 크면 setTimeout을 실행시킨 값을 반환하면 되고 아니면 에러를 반환하면 됐다. 일단 문제를 보면 resolve로 실행된 Fn함수와 reject로 ‘Time Limit Exceeded’를 반환하는 문제였기 때문에 new Promise를 새로 생성해서 Promise를 반환하자는 생각을 하였다.

그런데 나는 new Promise 안쪽에서 setTimeout를 선언하긴 했는데 setTimeout함수에 Fn함수를 같이 넣어서 자꾸 이상하게 문제를 푸는 것이었다. 계속 고민하다가 이 방법은 아닌거 같아서 풀이를 보니 new Promise안쪽에서 setTimeout은 Fn함수를 넣을게 아니라 그냥 reject로 에러를 넘겨주고 받아온 t밀리초 만큼 딜레이를 주면 되는 것이었다. fn함수는 그냥 Promise.race에 넘겨주면 끝이었다.

Promise.race란 iterable 안에 있는 프로미스 중에 가장 먼저 완료된 것의 결과값으로 그대로 이행하거나 거부합니다.라고 문서에 나와있다. 그 말은 즉, new Promise로 만들어준 setTimeout이 먼저 끝나면 reject가 반환 될 것이고 그게 아니라면 Fn함수에서 실행한 setTimeout이 Promise로 반환 될 것이다.

이번에 Promise.race라는 메서드를 처음 알게 되었는데 실제로 현업에서 나는 사용해본적이 없지만 되게 유용하게 사용할 수 있을꺼 같은 느낌이 든다.

Reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/race

[LeetCode](Linked List) Convert Binary Number in a Linked List to Integer

Mon, 29 Apr 2024 00:00:00 +0900

PROBLEMS

PROBLEMS

Description

Given head which is a reference node to a singly-linked list. The value of each node in the linked list is either 0 or 1. The linked list holds the binary representation of a number.

Return the decimal value of the number in the linked list.

The most significant bit is at the head of the linked list.

Example

Example 1:

Input: head = [1,0,1]
Output: 5
Explanation: (101) in base 2 = (5) in base 10

Example 2:

Input: head = [0]
Output: 0

Constraints

The Linked List is not empty.
Number of nodes will not exceed 30.
Each node’s value is either 0 or 1.

Solution

Runtime: 58ms
Memory: 51.54MB

/**
 * Definition for singly-linked list.
 * class ListNode {
 *     val: number
 *     next: ListNode | null
 *     constructor(val?: number, next?: ListNode | null) {
 *         this.val = (val===undefined ? 0 : val)
 *         this.next = (next===undefined ? null : next)
 *     }
 * }
 */

// My Solution
function getDecimalValue(head: ListNode | null): number {
    let current: ListNode = head
    let sum = 0
    const valList = []

    while (current !== null) {
        valList.push(current.val)
        current = current.next
    }

    valList.reverse().map((val: number, idx: number) => {
        if(val === 1) {
            sum += 2 ** idx
        }
    })

    return sum
};

// Another Solution
function getDecimalValue(head: ListNode | null): number {
    let current: ListNode = head
    let binary = ""

    while (current !== null) {
        binary += current.val
        current = current.next
    }

    return parseInt(binary, 2)
};

Retrospect

자료구조에 대해서 학습할 필요가 있을꺼 같아 이번에 Linked List에 대해서 문제를 풀었다. 내가 푼 문제는 Linked List중에 쉽고 정답률이 높은 편이었지만 나한테는 처음 접하는 Linked List의 알고리즘 문제였고 생각보다 어렵게만 다가왔었다. 그리고 Linked List의 Node, next등의 개념이 처음에는 잘 이해가 되지 않았다.

그렇지만 계속해서 이해할려고하고 보다보니 어느정도 이해는 된거 같다. 대략적으로 설명하자면, head라는 것은 Linked List에서 가장 처음 위치하는 노드를 가리키며 리스트 전체를 참조하는데 사용된다. Node라는 것은 데이터를 저장하는 데이터 필드와 다음 노드를 가리키는 링크 필드로 구성되어 있다. 문제에서 next라는 것이 다음 노드를 가리키는 링크 필드인 것이다.

문제의 내용을 살펴보면 [1, 0, 1]과 같이 데이터가 들어올때, 배열이 ListNode로 변환되어서 들어오는거 같은데 해당 부분은 좀 더 찾아봐야할꺼 같다. 하여튼 배열이 들어오게 되면 101을 이진수로 바꾸면 되는 문제였다. 여기서 제일 처음에 나는 101을 그냥 순서대로 2의 0승, 2의 1승으로 계산했었는데 알고 보니 반대로 뒤집어서 문제를 풀어야했다. 그래서 while문을 통해 무한 반복을 하는데 current를 current.next로 할당하면서 다음 노드로 자꾸 옮겨가게 했으며, valList라는 변수에 데이터를 누적해서 담아주었다.

그 후, reverse와 map을 이용해서 배열을 반대로 뒤집었고 반복을 했다. 반복문을 통해 1인 경우에 해당 인덱스를 2의 인덱스승수를 계속해서 sum에 누적해서 더해 나갔고 마지막엔 sum을 반환해 답을 찾아냈다.

문제를 다 풀고 난 후, 다른 사람의 풀이를 보니 각 노드를 순회하면서 binary라는 변수를 통해 값을 누적해서 더한 다음 parseInt를 통해 이진수로 정말 간단하게 변형하는 것이었다. 이번 기회를 통해 좀 더 쉽게 구하는 방법을 알아가는 계기가 되었다.

[LeetCode] Interval Cancellation

Sun, 28 Apr 2024 00:00:00 +0900

PROBLEMS

PROBLEMS

Description

Given a function fn, an array of arguments args, and an interval time t, return a cancel function cancelFn.

After a delay of cancelTimeMs, the returned cancel function cancelFn will be invoked.

setTimeout(cancelFn, cancelTimeMs)

The function fn should be called with args immediately and then called again every t milliseconds until cancelFn is called at cancelTimeMs ms.

Example

Example 1:

Input: fn = (x) => x _ 2, args = [4], t = 35
Output:
[

{“time”: 0, “returned”: 8}, {“time”: 35, “returned”: 8}, {“time”: 70, “returned”: 8}, { “time”: 105, “returned”: 8}, {“time”: 140, “returned”: 8}, {“time”: 175, “returned”: 8} ]
Explanation:
const cancelTimeMs = 190;
const cancelFn = cancellable((x) => x _ 2, [4], 35);
setTimeout(cancelFn, cancelTimeMs);

Every 35ms, fn(4) is called. Until t=190ms, then it is cancelled.
1st fn call is at 0ms. fn(4) returns 8.
2nd fn call is at 35ms. fn(4) returns 8.
3rd fn call is at 70ms. fn(4) returns 8.
4th fn call is at 105ms. fn(4) returns 8.
5th fn call is at 140ms. fn(4) returns 8.
6th fn call is at 175ms. fn(4) returns 8.
Cancelled at 190ms

Example 2:

Input: fn = (x1, x2) => (x1 _ x2), args = [2, 5], t = 30
Output:
[

{“time”: 0, “returned”: 10}, {“time”: 30, “returned”: 10}, {“time”: 60, “returned”: 10}, {“time”: 90, “returned”: 10}, {“time”: 120, “returned”: 10}, {“time”: 150, “returned”: 10} ]
Explanation:
const cancelTimeMs = 165;
const cancelFn = cancellable((x1, x2) => (x1 _ x2), [2, 5], 30)
setTimeout(cancelFn, cancelTimeMs)

Every 30ms, fn(2, 5) is called. Until t=165ms, then it is cancelled.
1st fn call is at 0ms
2nd fn call is at 30ms
3rd fn call is at 60ms
4th fn call is at 90ms
5th fn call is at 120ms
6th fn call is at 150ms
Cancelled at 165ms

Example 3:

Input: fn = (x1, x2, x3) => (x1 + x2 + x3), args = [5, 1, 3], t = 50
Output:
[
{“time”: 0, “returned”: 9},
{“time”: 50, “returned”: 9},
{“time”: 100, “returned”: 9},
{“time”: 150, “returned”: 9}
]
Explanation:
const cancelTimeMs = 180;
const cancelFn = cancellable((x1, x2, x3) => (x1 + x2 + x3), [5, 1, 3], 50)
setTimeout(cancelFn, cancelTimeMs)

Every 50ms, fn(5, 1, 3) is called. Until t=180ms, then it is cancelled.
1st fn call is at 0ms
2nd fn call is at 50ms
3rd fn call is at 100ms
4th fn call is at 150ms
Cancelled at 180ms

Constraints

fn is a function
args is a valid JSON array
1 <= args.length <= 10
30 <= t <= 100
10 <= cancelTimeMs <= 500

Solution

Runtime: 63ms
Memory: 49.82MB

/**
 * @param {Function} fn
 * @param {Array} args
 * @param {number} t
 * @return {Function}
 */
var cancellable = function(fn, args, t) {
    fn(...args);

    const timeout = setInterval(() => {
        fn(...args)
    }, t);

    return function cancel() {
        clearInterval(timeout);
    }
};

/**
 *  const result = [];
 *
 *  const fn = (x) => x * 2;
 *  const args = [4], t = 35, cancelTimeMs = 190;
 *
 *  const start = performance.now();
 *
 *  const log = (...argsArr) => {
 *      const diff = Math.floor(performance.now() - start);
 *      result.push({"time": diff, "returned": fn(...argsArr)});
 *  }
 *
 *  const cancel = cancellable(log, args, t);
 *
 *  setTimeout(cancel, cancelTimeMs);
 *
 *  setTimeout(() => {
 *      console.log(result); // [
 *                           //     {"time":0,"returned":8},
 *                           //     {"time":35,"returned":8},
 *                           //     {"time":70,"returned":8},
 *                           //     {"time":105,"returned":8},
 *                           //     {"time":140,"returned":8},
 *                           //     {"time":175,"returned":8}
 *                           // ]
 *  }, cancelTimeMs + t + 15)
 */

Retrospect

이전에 풀었던 setTimeout이랑 비슷한 유형의 문제같다는 생각을 했다. setTimeout으로 cancelTimeMs변수의 시간이 끝난 후, cancelFn를 실행시키면 되는 문제였기 때문에 cancelFn안에서는 interval을 멈추는 함수를 실행해주었다.

제일 처음 cancellable함수에 값을 넘겨주면 cancellable안쪽에서는 setInterval함수를 호출해서 계속해서 interval을 하게끔 만들어주었다. 처음에 cancellable함수에 생설될때 time은 0이 될텐데 setInterval로만 실행하게 되면 time이 0일때는 실행이 안되어서 fn(...args)로 따로 빼서 한번 실행해주었다.

마지막 반환값으로는 interval을 멈추는 clearInterval함수를 호출하여 외부에서 setTimeout이 호출될때 interval을 중지시키므로써 문제에서 요구하는 답을 추출하게끔 했다.

[LeetCode] Timeout Cancellation

Sat, 27 Apr 2024 00:00:00 +0900

PROBLEMS

PROBLEMS

Description

Given a function fn, an array of arguments args, and a timeout t in milliseconds, return a cancel function cancelFn.

After a delay of cancelTimeMs, the returned cancel function cancelFn will be invoked.

setTimeout(cancelFn, cancelTimeMs)

Initially, the execution of the function fn should be delayed by t milliseconds.

If, before the delay of t milliseconds, the function cancelFn is invoked, it should cancel the delayed execution of fn. Otherwise, if cancelFn is not invoked within the specified delay t, fn should be executed with the provided args as arguments.

Example

Example 1:

Input: fn = (x) => x _ 5, args = [2], t = 20
Output: [{“time”: 20, “returned”: 10}]
Explanation:
const cancelTimeMs = 50;
const cancelFn = cancellable((x) => x _ 5, [2], 20);
setTimeout(cancelFn, cancelTimeMs);

The cancellation was scheduled to occur after a delay of cancelTimeMs (50ms), which happened after the execution of fn(2) at 20ms.

Example 2:

Input: fn = (x) => x2, args = [2], t = 100
Output: []
Explanation:
const cancelTimeMs = 50;
const cancelFn = cancellable((x) => x2, [2], 100);
setTimeout(cancelFn, cancelTimeMs);

The cancellation was scheduled to occur after a delay of cancelTimeMs (50ms), which happened before the execution of fn(2) at 100ms, resulting in fn(2) never being called.

Example 3:

Input: fn = (x1, x2) => x1 _ x2, args = [2,4], t = 30
Output: [{“time”: 30, “returned”: 8}]
Explanation:
const cancelTimeMs = 100;
const cancelFn = cancellable((x1, x2) => x1 _ x2, [2,4], 30);
setTimeout(cancelFn, cancelTimeMs);

The cancellation was scheduled to occur after a delay of cancelTimeMs (100ms), which happened after the execution of fn(2,4) at 30ms.

Constraints

fn is a function
args is a valid JSON array
1 <= args.length <= 10
20 <= t <= 1000
10 <= cancelTimeMs <= 1000

Solution

Runtime: 58ms
Memory: 49.49MB

/**
 * @param {Function} fn
 * @param {Array} args
 * @param {number} t
 * @return {Function}
 */
var cancellable = function (fn, args, t) {
    const timer = setTimeout(() => {
        fn(...args)
    }, t)

    return ()=> {
        clearTimeout(timer)
    }
};

/**
 *  const result = [];
 *
 *  const fn = (x) => x * 5;
 *  const args = [2], t = 20, cancelTimeMs = 50;
 *
 *  const start = performance.now();
 *
 *  const log = (...argsArr) => {
 *      const diff = Math.floor(performance.now() - start);
 *      result.push({"time": diff, "returned": fn(...argsArr)});
 *  }
 *
 *  const cancel = cancellable(log, args, t);
 *
 *  const maxT = Math.max(t, cancelTimeMs);
 *
 *  setTimeout(cancel, cancelTimeMs);
 *
 *  setTimeout(() => {
 *      console.log(result); // [{"time":20,"returned":10}]
 *  }, maxT + 15)
 */

Retrospect

이번 문제는 솔직히 오로지 나 혼자만의 힘으로 푼게 아니다.. 구글링을 통해 setTimeout과 clearTimeout을 검색해서 헷갈리거나 자세하게 알지 못했던 내용을 이해하고 문제를 풀었다. setTimeout, clearTimeout 간단하게 요약하자면 setTimeout같은 경우 일정 시간이 지난 후에 실행되는 함수이고, clearTimeout은 setTimeout함수를 취소하고 싶을때 사용하는 함수이다.

먼저, 문제의 설명을 살펴보면 cancellable함수는 파라미터로 받는 t만큼 시간 지연을 두고 fn함수를 실행해야하는 함수이다. 그러나 cancellable외부에서는 setTimeou함수를 통해 cancelTimeMs만큼 시간 지연을 하게 되는데, 만약 cancellable함수로 넘겨준 t보다 cancelTimeMs가 작을 경우 fn함수는 실행하면 안되고 t가 cancelTimeMs보다 더 크게 될 경우 fn함수를 실행시키면 된다. 설명이 좀 어렵다고 느껴질 수 있는데 차근차근 풀이를 살펴보도록 하자.

cancellable함수에서는 t만큼의 시간 지연이 필요하니 무조건 setTimeout함수를 사용해야한다. setTimeout함수 timerId를 반환하게 되는데 setTimeout을 취소 하고 싶을때 필요하기 때문에 timer라는 변수로 따로 선언해두었다. 반환 값으로는 clearTimeout함수를 사용했는데, 외부에서 setTimeout함수를 실행할때 t보다 cancelTimeMs가 작을 경우 내부의 setTimeout을 실행시키면 안되기 때문에 실행되기 전에 clearTimeout을 통해 실행되지 않게 했다.

이번은 좀 더 깊게 생각하고 문제에 접근하는 계기가 된거 같다. 난이도는 easy로 표시되어 있었으나 나는 그렇게 쉬운 문제였던게 아니었다. js 개념이나 동작원리에 대한 이해도가 낮구나라는 생각을 많이해서 조금씩 쌓아가면 개발해야겠다고 생각을 많이 하게되었다.

[LeetCode] Sleep

Fri, 26 Apr 2024 00:00:00 +0900

PROBLEMS

PROBLEMS

Description

Given a positive integer millis, write an asynchronous function that sleeps for millis milliseconds. It can resolve any value.

Example

Example 1:

Input: millis = 100
Output: 100
Explanation: It should return a promise that resolves after 100ms.
let t = Date.now();
sleep(100).then(() => { console.log(Date.now() - t); // 100 });

Example 2:

Input: millis = 200
Output: 200
Explanation: It should return a promise that resolves after 200ms.

Constraints

1 <= millis <= 1000

Solution

Runtime: 51ms
Memory: 49MB

/**
 * @param {number} millis
 * @return {Promise}
 */
async function sleep(millis) {
    return new Promise((resolve) => {
        setTimeout(() =>{
            resolve(millis)
        }, millis)
    })
}

/**
 * let t = Date.now()
 * sleep(100).then(() => console.log(Date.now() - t)) // 100
 */

Retrospect

양의 정수가 파라미터로 들어오면 들어온 파라미터만큼 뒤에 실행되는 Promise객체를 반환하면 되는 문제였고 반환 값은 어떤 것이든 상관 없었다. new Promise를 이용해서 Promise 객체를 생성한 후 setTimeout으로 파라미터로 들어온 양의 정수로 시간 간격을 두고 값을 반환해주었다.

[LeetCode] Add Two Promises

Fri, 26 Apr 2024 00:00:00 +0900

PROBLEMS

PROBLEMS

Description

Given two promises promise1 and promise2, return a new promise. promise1 and promise2 will both resolve with a number. The returned promise should resolve with the sum of the two numbers.

Example

Example 1:

Input:
promise1 = new Promise(resolve => setTimeout(() => resolve(2), 20)),
promise2 = new Promise(resolve => setTimeout(() => resolve(5), 60))
Output: 7
Explanation: The two input promises resolve with the values of 2 and 5 respectively. The returned promise should resolve with a value of 2 + 5 = 7. The time the returned promise resolves is not judged for this problem.

Example 2:

Input:
promise1 = new Promise(resolve => setTimeout(() => resolve(10), 50)),
promise2 = new Promise(resolve => setTimeout(() => resolve(-12), 30))
Output: -2
Explanation: The two input promises resolve with the values of 10 and -12 respectively. The returned promise should resolve with a value of 10 + -12 = -2.

Constraints

promise1 and promise2 are promises that resolve with a number

Solution

Runtime: 68ms
Memory: 49.57MB

/**
 * @param {Promise} promise1
 * @param {Promise} promise2
 * @return {Promise}
 */
const addTwoPromises = async function(promise1, promise2) {
    const firstNum = await promise1
    const secondNum = await promise2
    return firstNum + secondNum
};

/**
 * addTwoPromises(Promise.resolve(2), Promise.resolve(2))
 *   .then(console.log); // 4
 */

Retrospect

비동기함수로 이제 들어왔다 많이 써보지는 않았지만 개념은 알고 있는 async await promise에 대한 것들이 나왔다. 처음에 문제를 봤을때 Promise 객체로 받으니까 각 Promise에 대해 await를 걸어줘 Promise를 기다렸다가 숫자를 받아오게끔 처리했다. 그 후 각 받아온 값에 대해 반환을 하여 정답을 구했다.

이번문제는 비동기에 대한 정말 기초적인 개념에 대해서 알려주고 있는거 같다. async를 사용하게 되면 항상 Promise객체를 반환하게 되고 안쪽에서 API를 받아와서 반환하는 로직이 많이 작성되는거 같다.

[LeetCode] Memoize

Thu, 25 Apr 2024 00:00:00 +0900

PROBLEMS

PROBLEMS

Description

Given a function fn, return a memoized version of that function.

A memoized function is a function that will never be called twice with the same inputs. Instead it will return a cached value.

You can assume there are 3 possible input functions: sum, fib, and factorial.

sum accepts two integers a and b and returns a + b. Assume that if a value has already been cached for the arguments (b, a) where a != b, it cannot be used for the arguments (a, b). For example, if the arguments are (3, 2) and (2, 3), two separate calls should be made.
fib accepts a single integer n and returns 1 if n <= 1 or fib(n - 1) + fib(n - 2) otherwise.
factorial accepts a single integer n and returns 1 if n <= 1 or factorial(n - 1) * n otherwise.

Example

Example 1:

Input:
fnName = “sum”
actions = [“call”,”call”,”getCallCount”,”call”,”getCallCount”]
values = [[2,2],[2,2],[],[1,2],[]]
Output: [4,4,1,3,2]
Explanation:
const sum = (a, b) => a + b;
const memoizedSum = memoize(sum);
memoizedSum(2, 2); // “call” - returns 4. sum() was called as (2, 2) was not seen before.
memoizedSum(2, 2); // “call” - returns 4. However sum() was not called because the same inputs were seen before.
// “getCallCount” - total call count: 1
memoizedSum(1, 2); // “call” - returns 3. sum() was called as (1, 2) was not seen before.
// “getCallCount” - total call count: 2

Example 2:

Input:
fnName = “factorial”
actions = [“call”,”call”,”call”,”getCallCount”,”call”,”getCallCount”]
values = [[2],[3],[2],[],[3],[]]
Output: [2,6,2,2,6,2]
Explanation:
const factorial = (n) => (n <= 1) ? 1 : (n * factorial(n - 1));
const memoFactorial = memoize(factorial);
memoFactorial(2); // “call” - returns 2.
memoFactorial(3); // “call” - returns 6.
memoFactorial(2); // “call” - returns 2. However factorial was not called because 2 was seen before.
// “getCallCount” - total call count: 2
memoFactorial(3); // “call” - returns 6. However factorial was not called because 3 was seen before.
// “getCallCount” - total call count: 2

Example 3:

Input:
fnName = “fib”
actions = [“call”,”getCallCount”]
values = [[5],[]]
Output: [8,1]
Explanation:
fib(5) = 8 // “call”
// “getCallCount” - total call count: 1

Constraints

0 <= a, b <= 105
1 <= n <= 10
0 <= actions.length <= 105
actions.length === values.length
actions[i] is one of “call” and “getCallCount”
fnName is one of “sum”, “factorial” and “fib”

Solution

Runtime: 366ms
Memory: 85.91MB

/**
 * @param {Function} fn
 * @return {Function}
 */
function memoize(fn) {
    const cache = {}
    return function (...args) {
        if(args in cache) {
            return cache[args]
        }
        const getValue = fn(...args)
        cache[args] = getValue
        return getValue
    }
}


/**
 * let callCount = 0;
 * const memoizedFn = memoize(function (a, b) {
 *	 callCount += 1;
 *   return a + b;
 * })
 * memoizedFn(2, 3) // 5
 * memoizedFn(2, 3) // 5
 * console.log(callCount) // 1
 */

Retrospect

문제의 설명은 memozie함수가 아닌 inner함수(return function(...arge){})를 여러번 호출하게 될 경우 동일한 파라미터를 넘겨주게 되면 memoize함수를 실행하지 않는 것이었고, 이전에 들어왔던 동일한 값을 캐싱하고 있다가 반환해주는 것이었다. 그래서 나는 outer함수인 memozie함수에 cache라는 변수를 하나 선언해두고 해당 변수에 값을 캐싱하여 동일한 값이 들어오면 캐싱 된 값을 반환을 했다.

if 조건문을 통해 cache의 속성에 파라미터로 넘어온 args가 존재하게 되면, 캐싱된 값을 리턴하게 했다. 그게 아니라면 memozie함수를 호출하여 값을 얻은 값을 cache에 args가 키를 가지도록 해서 넣어주었고, 함수 실행을 통해 얻은 값을 반환했다.

이번 문제는 생각보다 시간이 오래걸렸는데 자꾸 실행을하니 getCallCount가 자꾸 함수를 실행한만큼 나오는 것이었다. 나는 함수를 실행시키고 추출해서 나온 동일한 값에 대해서만 조건을 주고 캐싱된 값을 반환하고 있었는데 문제를 다시 읽어보니, A memoized function is a function that will never be called twice with the same inputs라는 문구가 눈에 띄었다.

실제로 함수를 메모이제이션해서 호출되지 않게끔 해야했었다. useMemo, useCallBack과 동일한 개념이 사용되었다. 이렇게 메모이제이션해서 사용하게 되면 메모리가 절약되기 때문에 성능상 유리한 측면이 있다고 생각된다.

[LeetCode] Allow One Function Call

Wed, 24 Apr 2024 00:00:00 +0900

PROBLEMS

PROBLEMS

Description

Given a function fn, return a new function that is identical to the original function except that it ensures fn is called at most once.

The first time the returned function is called, it should return the same result as fn.
Every subsequent time it is called, it should return undefined.

Example

Example 1:

Input: fn = (a,b,c) => (a + b + c), calls = [[1,2,3],[2,3,6]]
Output: [{“calls”:1,”value”:6}]
Explanation:
const onceFn = once(fn);
onceFn(1, 2, 3); // 6
onceFn(2, 3, 6); // undefined, fn was not called

Example 2:

Input: fn = (a,b,c) => (a * b * c), calls = [[5,7,4],[2,3,6],[4,6,8]]
Output: [{“calls”:1,”value”:140}]
Explanation:
const onceFn = once(fn);
onceFn(5, 7, 4); // 140
onceFn(2, 3, 6); // undefined, fn was not called
onceFn(4, 6, 8); // undefined, fn was not called

Constraints

calls is a valid JSON array
1 <= calls.length <= 10
1 <= calls[i].length <= 100
2 <= JSON.stringify(calls).length <= 1000

Solution

Runtime: 39ms
Memory: 48.32MB

/**
 * @param {Function} fn
 * @return {Function}
 */
var once = function(fn) {
    let isFirstCall = true
    return function(...args) {
        if(isFirstCall) {
            isFirstCall = false
            return fn(...args)
        }
    }
};

/**
 * let fn = (a,b,c) => (a + b + c)
 * let onceFn = once(fn)
 *
 * onceFn(1,2,3); // 6
 * onceFn(2,3,6); // returns undefined without calling fn
 */

Retrospect

문제의 설명은 once라는 함수가 여러번 호출되게 될 경우 처음만 호출되고 나머지 호출이 되지 않아야한다라고 나와있다. 나는 once함수를 제일 처음 생성했을때 isFirstCall라는 변수 명을 하나 같이 선언해주었는데 이렇게 해준 이유는 once함수를 처음 호출했는지 확인하기 위해서이다.

onceFn(1,2,3)을 호출하게 되면 isFirstCall은 true가 되니 조건문 안쪽으로 들어가겠고, 함수에 파라미터를 전달해 원하는 값을 추추할 수 있게 된다. 여기서 이제 isFristCall변수를 false로 바꿔 처음 함수 호출이 끝났다고 알려주면 다음에 호출할때는 onceFn함수가 호출되지 않을꺼고 문제에서 원하는 답을 찾을 수 있게 될 것이다.

onceFn함수 내에서 isFirstCall을 생성하게되면 isFirstCall이라는 변수는 onceFn의 렉시컬 환경에 대한 참조를 저장하게 된다. 안쪽 함수에서는 isFirstCall을 사용할 수 있게 되고 상태가 바뀌게 되면 바뀐 상태 값도 참조할 수 있게 되는 것이다. 만약 안쪽 함수에서 isFirstCall을 선언하고 return 전에 값을 true로 바꾸게 된다면, onceFn 다시 호출될 때 isFirstCall은 초기값인 false로 바껴있을 것이다.

실질적으로 호출되는 부분은 function(..args)인데 해당 함수를 호출하게 되면 렉시컬환경이 계속 새롭게 생성되어질 것이고, 값은 초기화가 될 것이다. 그래서 렉시컬스코프에 의해 상위 스코프에 변수를 선언해서 사용하면 상태 변화를 알 수 있을 것이다.