[JavaScript] 14. 자바스크립트 배열의 내장함수

오늘은 배열의 여러 내장함수에 대해 공부해보려고 합니다.

💡forEach

for문 대체하여 사용

const animals = ['Dog', 'Rabbit', 'Pig'];

    /* for(let i=0; i<animals.length; i++) {
         console.log(animals[i])
    }*/

    animals.forEach(function (animal) {
        console.log(animal);
    });

💡map 💚💚💚💚💚

배열 안 요소들을 변환할 때 사용
반환된 값을 통해 새로운 배열을 생성

예를 들어 아래와 같이 숫자가 들어있는 배열의 제곱값을 가지는 새로운 배열을 만들어보려고 합니다.

먼저, 위에서 다뤘던 forEach를 사용해서 만들어볼까요?

const oddNum = [1,3,5];
const square = [];
oddNum.forEach(num => square.push(num * num));

그렇다면, 이번에는 map을 사용해서 만들어볼게요!

const oddNum = [1,3,5];
const square = oddNum.map(num => (num * num));

map을 사용하면 forEach를 사용할 때보다 좀 더 간결하게 코드를 작성할 수 있습니다.

💡findIndex

배열 안에 값이 배열 또는 객체일 때 해당 요소의 인덱스를 찾아주는 함수
찾는 요소가 존재하지 않는다면 -1을 반환

다음은 학생들의 이름을 담고 있는 students배열에 특정 학생을 조회하는 코드입니다.

const students = [{name: "송우든"}, {name: "조구미"}, {name: "정어리"}]
const isStudent = students.findIndex(({name}) => (name === "송아지"))
console.log(isStudent) // 출력 : -1

"송아지"라는 학생은 존재하지 않음으로 -1을 반환합니다.
하지만, 다음과 같이 일치하는 요소가 있다면 해당 요소의 인덱스를 반환해줍니다.

const students = [{name: "송우든"}, {name: "조구미"}, {name: "정어리"}]
const isStudent = students.findIndex(({name}) => (name === "조구미"))
console.log(isStudent) // 출력 : 1

💡find

findIndex와 유사하지만, 인덱스가 아닌 값 자체를 반환하는 함수
요소가 존재하지 않는다면 undefiend를 반환

const students = [{name: "송우든"}, {name: "조구미"}, {name: "정어리"}]
const isStudent = students.find(({name}) => (name === "조구미"))
console.log(isStudent) // 출력 : {name: "조구미"}

💡filter 💚💚💚💚💚

주어진 함수를 통과하는 모든 요소들을 모아 새로운 배열을 반환하는 함수

조건이 만족하면 true값을 주어 아래와 같이 새로운 배열을 생성해줍니다.

const fruits = ["banana","apple","strawberry", "orange"];
console.log(fruits.filter(fruits => fruits.length > 6)); // 출력 :['strawberry']
console.log(fruits.filter(fruits => fruits.length < 6)); // 출력 : ['apple'] 

💡reduce 💚💚💚💚💚

배열의 총합을 구하거나 누적값을 구할때 유용한 함수

const oddNum = [1,3,5,7,9]
const sum = oddNum.reduce((previousNum, currentNum) => previousNum + currentNum, 0)
console.log(sum) // 출력 : 25