[JS] map/slice/sort

1. map

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}]입니다. 새로운 배열을 반환하기 때문에 기존의 배열에는 변화를 주지 않습니다.

2. sort

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]

sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다.

다만, 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따르기 때문에 정렬은 stable sort가 아닐 수 있습니다.
예를 들어 "바나나"는 "체리" 앞에 옵니다. 'ㅂ'이 'ㅊ'보다 먼저 오기 때문입니다. 그러나 숫자 정렬에서 9가 80보다 앞에 오지만 숫자는 문자열로 변환되기 때문에 "80"은 유니 코드 순서에서 "9"앞에옵니다.

compareFunction

이를 방지하기 위해서는 compareFunction을 설정해주면 됩니다. compareFunction을 설정해주면 배열 요소는 compare 함수의 반환 값에 따라 정렬됩니다.

예를 들어 a와 b가 비교되는 두 요소라면,

compareFunction(a, b)이 0보다 작은 경우 a를 b보다 낮은 색인으로 정렬합니다. 즉, a가 먼저옵니다.
compareFunction(a, b)이 0을 반환하면 a와 b를 서로에 대해 변경하지 않고 모든 다른 요소에 대해 정렬합니다.
compareFunction(a, b)이 0보다 큰 경우, b를 a보다 낮은 인덱스로 소트합니다.
compareFunction(a, b)은 요소 a와 b의 특정 쌍이 두 개의 인수로 주어질 때 항상 동일한 값을 반환해야합니다. 일치하지 않는 결과가 반환되면 정렬 순서는 정의되지 않습니다.

3. slice

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

구간을 설정해 줄 경우, 기존 배열과 특정 인덱스를 기준으로 특정 구간에 해당하는 새로운 배열을 도출하는 것도 가능합니다.

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)

요로코롬 구간을 설정해주면 됩니다.