[TIL]Day 25. map, sort, slice 에 관하여 (in javascript, feat.code kata)

오늘의 포스팅은 자바스크립트에서 많이 사용하는 메소드인 map, sort, slice 에 관하여 알아보도록 하겠습니다.

(map은 어제도 정리하긴 했지만 오늘 다시 보니 새로워서 한 번 더 정리하려고 합니다.)

 

1. map

 

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다(from. MDN).

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]
//(from MDN)

map 메소드는 배열내의 인자를 반복하여 새로운 배열을 만들어내는 메소드입니다. 배열안의 인자를 하나씩 꺼내서 정의된 callback 함수에 따라 각각의 요소에 대해 함수를 적용한 반환값으로 새로운 배열을 만들어 내는 원리입니다. 

 

예시) map을 활용해배열 속 객체를 재구성하기

var kvArray = [{key:1, value:10},
               {key:2, value:20},
               {key:3, value: 30}];

var reformattedArray = kvArray.map(function(obj){ 
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
// reformattedArray는 [{1:10}, {2:20}, {3:30}]

// kvArray는 그대로
// [{key:1, value:10},
//  {key:2, value:20},
//  {key:3, value: 30}]
//(from MDN)

 

 

2. sort

 

sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다(from MDN).

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

//(from MDN)

 

sort 메소드는 배열 내의 값을 정렬하는 기능을 가졌습니다. 메소드에 비교기준이 되는 함수를 설정하지 않는다면 유니코드 포인트 순서로 정렬하게 됩니다. 이때, 숫자는 사전식으로 유니코드 값이 할당되어 있기에 1, 2, 10, 20 을 정렬한다고 할 때 1, 2, 10, 20의 순으로 정렬되는 것이 아니라, 1, 10, 2, 20의 순서로 정렬됩니다. 

 

compareFunction을 설정한다면, 다음의 기준으로 정렬됩니다.

compareFunction이 제공되면 배열 요소는 compare 함수의 반환 값에 따라 정렬됩니다. a와 b가 비교되는 두 요소라면,

• compareFunction(a, b)이 0보다 작은 경우 a를 b보다 낮은 색인으로 정렬합니다. 즉, a가 먼저옵니다.
• compareFunction(a, b)이 0을 반환하면 a와 b를 서로에 대해 변경하지 않고 모든 다른 요소에 대해 정렬합니다. 참고 : ECMAscript 표준은 이러한 동작을 보장하지 않으므로 모든 브라우저(예 : Mozilla 버전은 적어도 2003 년 이후 버전 임)가 이를 존중하지는 않습니다.
• compareFunction(a, b)이 0보다 큰 경우, b를 a보다 낮은 인덱스로 소트합니다.
• compareFunction(a, b)은 요소 a와 b의 특정 쌍이 두 개의 인수로 주어질 때 항상 동일한 값을 반환해야합니다. 일치하지 않는 결과가 반환되면 정렬 순서는 정의되지 않습니다.

(from MDN)

 

3. slice

 

slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다(from MDN).

slice는 기존 배열과 특정 인덱스를 기준으로 특정 구간에 해당하는 새로운 배열을 도출하는 메소드입니다. 

 

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
//(from MDN)

 

4. code kata 문제

 

오늘 정리한 이 메소드를 활용하여 다음의 코드카타 문제를 해결할 수 있습니다.

 

 

* 문제

nums는 숫자로 이루어진 배열입니다.

가장 자주 등장한 숫자를 k 개수만큼 return해주세요.

 

nums = [1,1,1,2,2,3],

k = 2

return [1,2]

 

nums = [1]

k = 1

return [1]

//*풀이
function topK(nums, k) {
  let obj = {}; 
  
  nums.forEach((num) => {
    if (!obj[num]) {
      obj[num] = 1;
    } else {
      obj[num]++;
    }
  })
  
  let result1 = [];
  for (let i in obj) {
    result1.push([i, obj[i]])
  };
  
  result1.sort((a,b) => b[1]-a[1]);
  
  let result2 = result1.slice(0, k).map(i => Number(i[0]));
  
  return result2;
}

 

5. 마무리

오늘 알려드린 메소드는 자바스크립트를 작성하면서 매우 자주 쓰이는 메소드들인데요, 다양한 방법으로 활용하면서 그 용법을 자세히 익힌다면 조금 더 성장한 개발자가 될 수 있을 것 같습니다. 그럼 오늘도 조금 더 성장하는 개발자가 되시길 바랄게요!!