1️⃣ map
map() 함수는 배열 내의 모든 요소 각각에 대해 call back 함수를 호출한 결과를 모아 새로운 배열을 반환 합니다.
map 함수는 아래와 같은 형태의 콜백함수를 인자로 받습니다.
(value,index,arr) => {}
value는 배열의 요소를 말하고, index는 해당 요소의 인덱스, arr은 해당 map함수를 호출한 배열을 의미합니다.
const array = [1, 4, 9, 16];
const map = array.map((x) => x * 2);
console.log(map); //[2, 8, 18, 32]const array = [1, 4, 9, 16];
const map = array.map((x) => x * 2);
console.log(map); //[2, 8, 18, 32]배열 내의 요소가 객체인 경우에도 사용할 수 있습니다.
var kvArray = [
{ key: 1, value: 10 },
{ key: 2, value: 20 },
{ key: 3, value: 30 },
];
var reformattedArray = kvArray.map(function (obj) {
if (obj.key % 2 === 1) {
//짝수
var rObj = {};
rObj[obj.key] = obj.value;
return rObj;
} else {
//홀수
var rObj = {};
rObj[obj.key] = obj.value + 1;
return rObj;
}
});
// reformattedArray는 [{1:10}, {2:21}, {3:30}]
// kvArray는 그대로
// [{key:1, value:10},
// {key:2, value:20},
// {key:3, value: 30}]var kvArray = [
{ key: 1, value: 10 },
{ key: 2, value: 20 },
{ key: 3, value: 30 },
];
var reformattedArray = kvArray.map(function (obj) {
if (obj.key % 2 === 1) {
//짝수
var rObj = {};
rObj[obj.key] = obj.value;
return rObj;
} else {
//홀수
var rObj = {};
rObj[obj.key] = obj.value + 1;
return rObj;
}
});
// reformattedArray는 [{1:10}, {2:21}, {3:30}]
// kvArray는 그대로
// [{key:1, value:10},
// {key:2, value:20},
// {key:3, value: 30}]다음과 같이 함수안에서 홀수 짝수를 나누어 사용할 수도 있습니다.
직접 구현해보기
map 함수를 직접 구현 후 Array.prototype에 객체에 등록 후 사용해보겠습니다.
Array.prototype.myMap = function myMap(cb) {
const result = [];
for (let idx = 0; idx < this.length; idx++) {
result.push(cb(this[idx], idx, this));
}
return result;
};Array.prototype.myMap = function myMap(cb) {
const result = [];
for (let idx = 0; idx < this.length; idx++) {
result.push(cb(this[idx], idx, this));
}
return result;
};[1, 2, 3].myMap((v) => v * 2); // [2, 4, 6][1, 2, 3].myMap((v) => v * 2); // [2, 4, 6][1, 2, 3].myMap((v, idx) => {
if (idx > 1) {
return v * 2;
} else {
return v;
}
}); // [1, 2, 6][1, 2, 3].myMap((v, idx) => {
if (idx > 1) {
return v * 2;
} else {
return v;
}
}); // [1, 2, 6]2️⃣ filter
filter함수는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환 합니다.
const words = [
"spray",
"limit",
"elite",
"exuberant",
"destruction",
"present",
];
const result = words.filter((word) => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]const words = [
"spray",
"limit",
"elite",
"exuberant",
"destruction",
"present",
];
const result = words.filter((word) => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]위 예제에서는 length가 6이상인 요소를 모아 새로운 배열을 만듭니다.
const guys = [
{ name: "YD", money: 500000 },
{ name: "Bill", money: 400000 },
{ name: "Andy", money: 300000 },
{ name: "Roky", money: 200000 },
];
const richNames = guys
.filter((man) => man.money > 300000)
.map((man) => man.name);
console.log(richNames); // ["YD", "Bill"]const guys = [
{ name: "YD", money: 500000 },
{ name: "Bill", money: 400000 },
{ name: "Andy", money: 300000 },
{ name: "Roky", money: 200000 },
];
const richNames = guys
.filter((man) => man.money > 300000)
.map((man) => man.name);
console.log(richNames); // ["YD", "Bill"]filter의 반환값이 배열이라는 점을 이용해 map함수와 함께 사용할 수 있습니다.
직접 구현해보기
filter 함수를 직접 구현 후 Array.prototype에 객체에 등록 후 사용해보겠습니다.
Array.prototype.myFilter = function myMap(cb) {
const result = [];
for (let idx = 0; idx < this.length; idx++) {
if (cb(this[idx], idx, this)) {
result.push(this[idx]);
}
}
return result;
};Array.prototype.myFilter = function myMap(cb) {
const result = [];
for (let idx = 0; idx < this.length; idx++) {
if (cb(this[idx], idx, this)) {
result.push(this[idx]);
}
}
return result;
};[1, 2, 3].myFilter((v) => v > 1); // [2, 3][1, 2, 3].myFilter((v) => v > 1); // [2, 3][1, 2, 3].myFilter((v, idx) => idx > 1); // [3][1, 2, 3].myFilter((v, idx) => idx > 1); // [3]3️⃣ reduce
reduce() 함수는 배열의 각 요소에 대해 주어진 reducer함수를 실행하고, 하나의 결과값을 반환합니다.
reduce 함수의 원형은 다음과 같습니다.
reduce((누적값, 현재값, index, value) => {return 결과;} , 초기값)
누적값은 현재까지의 누적값을 의미합니다.
const arr = [1, 2, 3];
const result = arr.reduce((acc, cur, i) => {
console.log(acc, cur, i);
return acc + cur;
}, 0);
// 0 1 0
// 1 2 1
// 3 3 2
// result : 6
const arr = [1, 2, 3];
const result = arr.reduce((acc, cur, i) => {
console.log(acc, cur, i);
return acc + cur;
}, 10);
// 10 1 0
// 11 2 1
// 13 3 2
// result : 16const arr = [1, 2, 3];
const result = arr.reduce((acc, cur, i) => {
console.log(acc, cur, i);
return acc + cur;
}, 0);
// 0 1 0
// 1 2 1
// 3 3 2
// result : 6
const arr = [1, 2, 3];
const result = arr.reduce((acc, cur, i) => {
console.log(acc, cur, i);
return acc + cur;
}, 10);
// 10 1 0
// 11 2 1
// 13 3 2
// result : 16초기값을 적어주지 않을 경우, 자동으로 첫번째 요소로 초기화됩니다.
위 코드를 통해 초기값은 첫번째 callback함수의 인수로 제공되는 값임을 알 수 있습니다.
const arr = [1, 2, 3];
const result = arr.reduce((acc, cur, i) => {
if (cur % 2 === 1) acc.push(cur);
return acc;
}, []);const arr = [1, 2, 3];
const result = arr.reduce((acc, cur, i) => {
if (cur % 2 === 1) acc.push(cur);
return acc;
}, []);다음과 같이 초기값을 배열로 세팅하고, 조건문을 이용하면, filter함수의 역할을 하는 reduce함수를 만들 수 있습니다.
filter함수 뿐만 아니라, sort, find, findIndex 등등 다른 함수들도 reduce함수를 이용해 구현할 수 있습니다.
직접 구현해보기
reduce 함수를 직접 구현 후 Array.prototype에 객체에 등록 후 사용해보겠습니다.
Array.prototype.myReduce = function myMap(cb, initialValue) {
let result = initialValue;
for (let idx = 0; idx < this.length; idx++) {
result = cb(result, this[idx], this);
}
return result;
};Array.prototype.myReduce = function myMap(cb, initialValue) {
let result = initialValue;
for (let idx = 0; idx < this.length; idx++) {
result = cb(result, this[idx], this);
}
return result;
};[1, 2, 3].myReduce((acc, cur) => acc + cur, 0); // 6[1, 2, 3].myReduce((acc, cur) => acc + cur, 0); // 6["1", "2", "3"].myReduce((acc, cur) => acc + cur, ""); // "123"["1", "2", "3"].myReduce((acc, cur) => acc + cur, ""); // "123"