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

LeetCode JS 30 days Challenge

2024.08.03 - [🛠️ Tool/FE] - [LeetCode-JS 30 days] #1. Closures 개념 - 1(#은닉 #보존)

[LeetCode-JS 30 days] #1. Closures 개념 - 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로 구성되며 본 포스트에서는 Basic Array Transformation에 대해 다룬다.

Apply Transformation Over Each Element in Array

문제를 푸는 것보다 해당 문제의 Discussion에 공부할 내용이 많다!

가장 많은 Upvote를 받은 Disucss

요약

Array.map() 메서드 사용을 제한하도록 문제가 세팅된 이유는 뭘까?

• Loops, functions, recursion과 같은 다른 방법을 생각해 보도록 유도한다.
• 대규모 배열에서 Array.map()이 항상 가장 효과적이진 않다.
• 다양한 배열 조작 문제 해결 방식에 익숙해지기 위함이다.
• Array.map()을 사용하면 문제가 너무 쉬워진다.

1. for문과 값을 담을 컨테이너를 사용하는 방법

각각의 배열 요소에 반복문으로 접근하여 fn 함수로 transform 반환되는 값을 컨테이너에 저장한다.

var map = function(arr, fn) {
  const transformedArr = [];
  for (let i = 0; i < arr.length; i++) {
    transformedArr[i] = fn(arr[i], i);
  }
  return transformedArr;
};

 

새로운 컨테이너가 아닌 기존에 값이 담겨 있는 arr를 변환하는 방법도 있다.

var map = function(arr, fn) {
    for (let i = 0; i < arr.length; ++i) {
        arr[i] = fn(arr[i], i);
    }
    return arr;
};

• 위 방법은 bad practice로 이렇게도 적용이 됨만을 알고 있자.
• Bad practice인 이유는 가장 중요한 원본 데이터를 가공해버리게 되는 것이기 때문이다.
• 이렇게 가공해버려서 원본 데이터를 다시 요청하느니 새로운 컨테이너에 값을 저장하는 게 낫다.

python과는 다르게 배열의 어떤 index에 값이 존재하지 않더라도 index에 값을 할당할 수 있음

 

Time Complexity, Space Complexity

• 위 코드: O(n), O(n)
• 아래 코드: O(n), O(1)

2. forEach 메서드를 사용하는 방법

forEach 메서드를 사용하여 input array를 iterate 하고, 각 element에 map function을 적용할 수 있다. 이후 새로운  배열에 변환된 값을 저장한다.

var map = function(arr, fn) {
  const transformedArr = [];
  arr.forEach((element, index) => {
    transformedArr[index] = fn(element, index);
  });
  return transformedArr;
};

map 메서드는 새로운 배열을 return 하지만 forEach는 undefined를 return 함

 

Time Complexity, Space Complexity

• O(n), O(n)

3. reduce 메서드를 사용하는 방법

reduce 메서드 또한 input array를 iterate 하고, 각 element에 map function을 적용할 수 있다. 이후 새로운 배열에 변환된 값을 accumulate 할 수 있다.

var map = function(arr, fn) {
  return arr.reduce((transformedArr, element, index) => {
    transformedArr[index] = fn(element, index);
    return transformedArr;
  }, []);
};

transformedArr를 따로 선언하지 않고, reduce 메서드 내에서 처리하며, 모든 원소를 iterate 한 후에는 accumulate 한 배열을 return 하는 것을 알 수 있음

 

Time Complexity, Space Complexity

• O(n), O(n)

reduce 메서드 형식은 아래와 같다.

arr.reduce((acc,cur,idx,src)->{
  return 결과
},초기값);

여기서 초기값이 세팅이 되어 있냐 없냐에 따라서 바뀌는 부분이 있다. 초기값이 존재하지 않는 경우 idx가 0일 때 arr 배열의 0번째 값이 acc의 초기값이 된다. 즉, 초기값이 없으면 idx는 0을 건너 띄는 것이다.

// 초기값이 있는 경우
const input = [1,2,3,4];
const result = input.reduce((acc,cur,idx)=>{
  console.log(acc,cur,idx);
  return acc+cur;
},0)
// 0 1 0
// 1 2 1
// 3 3 2
// 6 4 3
console.log(result); //10

// 초기값이 없는 경우
const input = [1,2,3,4];
const result = input.reduce((acc,cur,idx)=>{
  console.log(acc,cur,idx);
  return acc+cur;
})
// 1 2 1
// 3 3 2
// 6 4 3
console.log(result); //10

reduce((acc, cur, idx, src) => {}, 초기값) 형태이고, cur, src는 option이다.
초기값이 없으면 idx가 0일 때를 건너 띄고, acc = arr[0]이 된다.

4. for ... of loop 사용하는 방법

for문을 통해 input array를 iterate 하고, 각 element에 map function을 적용할 수 있다.

var map = function(arr, fn) {
  const transformedArr = [];
  let index = 0;
  for (const element of arr) {
    transformedArr[index] = fn(element, index);
    index++;
  }
  return transformedArr;
};

python의 `for k in arr:` 와 같음

 

Filter Elements from Array

Discuss 탭으로 달려 가자

요약

• 자바스크립트에서 truthy와 falsy

// falsy
false;
0
-0
0n (BigInt zero)
'' (empty string)
null
undefined
NaN

// truthy
// falsy를 제외한 모두
// 아래도 포함됨을 유의
'0' (단일의 zero를 포함하는 string)
'false' (문자열 false를 포함하는 string)
[] (empty array)
{} (empty object)
function() {} (empty function)

python과 달리 빈 배열, 빈 객체도 true

 

앞서 살펴본 내용과 중복된 내용은 제외하였다.

1. flatMap 메서드를 사용하는 방법

배열의 각 요소에 함수를 적용하고, 그 결과들을 새로운 배열로 만든다(flatten).

var filter = function(arr, fn) {
  return arr.flatMap((i, j) => fn(i, j) ? [i] : []);
};

arr = [1, 2, 3, 4, 5];
fn = (i, j) => i % 2 === 0;
filter(arr, fn); // [2, 4]

배열에 값이 있는 경우만으로 새로운 배열을 return 함을 알 수 있다.