[Javascript] High Order Method & Array
너무나도 자주 쓰이고 자주 들어봤떤 High Order Method & Array에 대해 알아보자!
forEach
filter
map
sort
reduce
const companies = [
{name: "Company One", category: "Finance", start: 1981, end: 2003},
{name: "Company Two", category: "Retail", start: 1992, end: 2008},
{name: "Company Three", category: "Auto", start: 1999, end: 2007},
{name: "Company Four", category: "Retail", start: 1989, end: 2010},
{name: "Company Five", category: "Technology", start: 2009, end: 2014},
{name: "Company Six", category: "Finance", start: 1987, end: 2010},
{name: "Company Seven", category: "Auto", start: 1986, end: 1996},
{name: "Company Eight", category: "Technology", start: 2011, end: 2016},
{name: "Company Nine", category: "Retail", start: 1981, end: 1989}
];
먼저 우리는 companies라는 배열을 가지고 시작한다
High Order Method를 쓰기 전에 먼저 기본적인 for Loop을 해보겠다
for(let i = 0; i < companies.length; i++) {
console.log(companies[i]);
}
이렇게 for loop을 돌리면 companies 배열에 있는 각각의 companies가 출력 된다
이제 for loop 대신에 high order method중 하나인 forEach를 사용 해 보겠다!
forEach
companies.forEach(function(company) {
console.log(company)
});
forEach를 써도 똑같은 결과가 출력되고 훨신더 깔끔하게 출력이 된다.
companies.forEach(function(company) {
console.log(company.name)
});
그냥 컴퍼니의 이름만 출력하고 싶을떄는 company.name을 통해서 해주면 된다!
Filter
const ages = [33, 12, 20, 16, 5, 54, 21, 44, 61, 13, 15, 45, 25, 64, 32];
먼저 filter에 대해 배우기전에 ages라는 나이가 담긴 배열을 만들었다.
그리고 위와같이 High Order Method 대신 for loop으로 먼저 진행을 해봤다
let canDrink = [];
for(let i = 0; i < ages.length; i++) {
if(ages[i] >= 21) {
canDrink.push(ages[i]);
}
}
console.log(canDrink)
이렇게 하면은 canDrink라는 빈배열안에 if 조건문에 부합하는 21살이거나 더 많은 나이가 push를통해 들어가게 된다
이 방법을 filter로 변환하면
const canDrink = ages.filter(function(age) {
if(age >= 21) {
return true;
}
})
console.log(canDrink)
이렇게 쓰고 똑같은 결과값이 출력되는거를 알 수 있다
ES6의 arrow function을 사용하면은 더욱더 간결한 코드를 작성 할 수 있다 const Arrow = () => {}
const canDrink = ages.filter(age => age >= 21);
console.log(canDrink)
ages.filter() 소괄호안에 function을 넣는대신 arrow function으로 대체해 훨씬 더 깔끔한 코드를 작성할 수 있다
위에있는 Companies 배열을통해 filter를 한번 더 복습 해보자
company의 category가 retail인 company를 filter를 해보자
//filter retail companies
const retailCompanies = companies.filter( company => {
if (company.category === 'Retail') {
return true;
}
})
console.log(retailCompanies)
Map
맵을 통해 새로운 ARRAY를 만들어 낼 수 있다
//create array of company names
const companyNames = companies.map(company => {return company.name})
console.log(companyNames)
Map을 통해 ages 배열에 있는 각각의 나이를 *2를 해볼수도 있다
//ages * 2
const agesTimesTwo = ages.map(age => age * 2);
console.log(agesTimesTwo);
Map을 한번만 하는게 아니라 map을 한 상태에서 또 다시 map을 할 수 있다
//mapping twice
const ageMap = ages
.map(age => Math.sqrt(age))
.map(age => age *2);
console.log(ageMap)
이렇게 하면은 먼저 ages에있는 age값들을 Math.sqrt을통해 제곱을 하고 그다음에 또다시 그 제곱된 ages 배열에있는 age값들을 다시 *2를 해준다 그리고 출력은 최종 결과 값이다
Sort
companies배열에 있는 company들의 시작연도에 따라 배열을 sort할 수 있다
//sorting companies based on thier start year
const sortedCompanies = companies.sort( (a,b) => (a.start > b.start ? 1 : -1));
console.log(sortedCompanies);
여기서 삼항연산자를 사용하여 a의 시작연도가 b의 시작연도보다 클때 1 true를 리턴하고 아니면 -1 false를 리턴한다
[
{
name: 'Company Nine',
category: 'Retail',
start: 1981,
end: 1989
},
{
name: 'Company One',
category: 'Finance',
start: 1981,
end: 2003
},
{
name: 'Company Seven',
category: 'Auto',
start: 1986,
end: 1996
},
{
name: 'Company Six',
category: 'Finance',
start: 1987,
end: 2010
},
{
name: 'Company Four',
category: 'Retail',
start: 1989,
end: 2010
},
{
name: 'Company Two',
category: 'Retail',
start: 1992,
end: 2008
},
{
name: 'Company Three',
category: 'Auto',
start: 1999,
end: 2007
},
{
name: 'Company Five',
category: 'Technology',
start: 2009,
end: 2014
},
{
name: 'Company Eight',
category: 'Technology',
start: 2011,
end: 2016
}
]
이번에는 ages배열에있는 age값들을 sort를 해보자
//sort ages
const sortAges = ages.sort();
console.log(sortAges);
이렇게 할때에는 값이 이상하게 출력이된다 왜냐하면 그냥 sort()를하면 맨 앞자리의 숫자만 보고 sort를 한다
예를 들어 14와 2둘중에 더 작은건 2인데 14가 더 앞에 나오는 식으로 sort가 된다
따라서 이거를 수정하기 위해서는
const sortAges = ages.sort( (a,b) => a - b);
해주면 된다 역순으로 sort를 하고 싶을 때에는
const sortAges = ages.sort((a,b) => b - a);
b - a를 통해 역순으로 sort가 된다
Reduce
Reduce를 통해 sum값을 얻을수가 있다
ages배열에 있는 age값을 reduce를 통해 다 더해진 값을 출력 할 수 있다
const ageSum = ages.reduce((total, age) => total + age, 0;)
console.log(ageSum);
이러게하면 모든 age값이 다 더해진 값이 출력된다 460
지금까지 배운 High Order Methods를 다 합쳐서 사용을 할 수 있다
//combine methods
const combined = ages
.map(age => age *2)
.filter(age => age >= 40)
.sort((a,b) => a - b)
.reduce( (a,b) => a + b, 0)
console.log(combined)
먼저 ages배열에 있는 모든 age값들을 *2를 해주고
그다음 age 값중에서 40보다 크거나 같은 값들을 filter 해준다
그뒤 a - b sort를 통해 값을 순서대로 나열하고
reduce를 통해 순서대로 나열된 age값들을 다 더한 총 합을 구한다.
Author And Source
이 문제에 관하여([Javascript] High Order Method & Array), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@esphoenixc/Javascript-High-Order-Method-Array저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)