[자바스크립트] 배열 내장함수 사용 방법 및 예제(foreach, map, includes, indexOf, findIndex, find, filter, slice, concat, sort, join)

자바스크립트에서의 배열 내장함수 예제를 통해 배워보도록 하자.

 

배열 내장함수 예제 목차

1. foreach 

2. map : 새로운 배열에 옮기는 방법

3. includes, indexOf : 숫자 배열에 숫자 찾는 방법

4. findIndex, find : 객체 배열에 객체 찾는 방법

5. filter : 객체 배열에 필요한 내용 필터하기

6. slice : 배열 자르기

7. concat : 배열 합치기

8. sort 사용방법 

9. join

---

 

1. foreach 

소스 코드

const arr = [1, 2, 3, 4];

 

for (let i = 0; i < arr.length; i++) {

console.log(arr[i] * 2);

}

결과

2

4

6

8

우리 모두가 알고 있는 for문을 사용해서 1,2,3,4 의 배열에 곱하기 2를 하는 값을 로그로 찍고 싶다면, 위의 소스코드처럼 작성할 것이다. 

하지만, foreach 문을 통해서 좀 더 간편하게 사용할 수 있다. 

소스 코드

// 1. forEach 내장함수

arr.forEach((elm) => console.log(elm * 2)); // 콜백함수

 

arr.forEach(function (elm) {

console.log(elm * 2);

});

결과

2

4

6

8

2

4

6

8

forEach 내장함수는 콜백함수를 사용한다. 그래서 익명 함수로 위의 소스코드처럼 작성하면 사용할 수 있다. 

2 가지의 익명함수를 표기하는 방법으로 작성했다. 함수 표기 방법만 달라진 것이다. 함수를 표현하는 방법에 대해서 잘 모른다면 아래 링크를 통해 쉽게 익히도록 하자. 

https://shoney.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%95%A8%EC%88%98-%EC%84%A0%EC%96%B8-%EB%AC%B4%EB%AA%85-%ED%95%A8%EC%88%98-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%EA%B8%B0%EB%B3%B8%EC%98%88%EC%A0%9C

[자바스크립트] 함수 선언, 무명 함수, 화살표 함수 사용법 및 기본예제

 

2. map : 새로운 배열에 옮기는 방법

소스 코드

// 2. 새로운 배열에 옮기는 방법

const arr1 = [1, 2, 3, 4, 5];

 

// 2-1. forEach 내장함수를 이용

const newArr1 = [];

arr1.forEach((elm) => newArr1.push(elm * 2));

console.log(newArr1);

결과

map 내장 함수를 사용하기 전에, forEach문으로 새로운 배열에 옮겨보자.

새로운 배열을 하나 만들고 push로 값을 하나씩 밀어 넣는 방식이다. 

하지만, map 내장함수를 사용하면 엄청 간단하게 사용할 수 있다. 

소스 코드

// 2-2. map 내장함수 이용

const newArr2 = arr1.map((elm) => {

return elm * 3;

});

console.log(newArr2);

결과

map 내장함수는 배열로 반환되기 때문에, 바로 newArr2에 대입할 수 있다. 이렇게 사용하면 간편하게 배열을 옮길 수 있다. 

 

3. includes, indexOf : 숫자 배열에 숫자 찾는 방법

includes, indexOf의 내장함수를 사용하지 않고 먼저 forEach로 구현해보면 아래와 같다. 

소스 코드

const arr3 = [1, 2, 3, 4];

let number = 3;

 

// 3-1. forEach로 구현하는 방법

arr3.forEach((elm) => {

if (elm === number) {

console.log(true);

}

});

결과

true

3이라는 숫자가 있으면 true 로그를 찍으면서 3 숫자 존재를 알 수 있다. 

하지만, 내장함수를 이용하면 간단하다.

소스 코드

// 3-2. includes를 사용하는 방법

console.log(arr3.includes(number));

 

// 3-3. indexOf 사용하는 방법

console.log(arr3.indexOf(number));

결과

true

2

 

includes : true/false 반환해준다. 

indexOf : 인덱스 값을 반환해준다. 

 

4. findIndex, find : 객체 배열에 객체 찾는 방법

3. 에서 배운 내용은 숫자에서만 유효하다면, findIndex, find 내장함수는 객체 배열에서 사용 가능하다. 

소스 코드

const arr4 = [

{ color: "red" },

{ color: "black" },

{ color: "blue" },

{ color: "green" }

];

 

// findIndex : 객체의 인덱스 반환

console.log(arr4.findIndex((elm) => elm.color === "black"));

 

// find : 객체를 반환함

console.log(arr4.find((elm) => elm.color === "blue"));

결과

 

find 내장함수는 객체를 반환하는 것을 확인할 수 있다. 

 

5. filter : 객체 배열에 필요한 내용 필터 하기

소스 코드

// 5. 배열 필터하기

const arr5 = [

{ num: 1, color: "red" },

{ num: 2, color: "black" },

{ num: 3, color: "blue" },

{ num: 4, color: "green" },

{ num: 5, color: "blue" }

];

 

console.log(arr5.filter((elm) => elm.color === "blue"));

결과

filter 함수를 사용하면, color가 "blue"인 값을 가진 객체를 배열로 반환해준다.

 

6. slice : 배열 자르기

소스 코드

// 6. slice 내장함수

const arr6 = [1, 3, 4, 5, 612, 2];

 

console.log(arr6.slice(0, 2));

결과

slice는 시작할 인덱스와 끝나는 인덱스를 입력하면 배열을 잘라준다. 

 

7. concat : 배열 합치기

소스 코드

// 7. concat 내장함수

const arr7 = [1, 3, 4];

const arr8 = [11, 13];

 

console.log(arr7.concat(arr8));

결과

concat 함수는 다른 배열을 합쳐준다. 

 

8. sort 사용방법 (문자 정렬, 숫자 정렬)

소스 코드

/ 8. 배열 정렬 내장함수

// 8-1. sort()는 문자 정렬

let chars = ["나", "다", "가"];

chars.sort();

console.log(chars);

결과

(3) ["가", "나", "다"]

sort() 내장함수는 인풋 값에 아무것도 넣지 않으면 문자 순서로 정렬해준다. 

숫자를 sort 하고 싶으면 아래와 같이 compare 함수를 하나 만들어서 콜백함수로 전달해줘야 한다. 

소스 코드

// 8-2. 숫자 정렬

let numbers = [1, 2, 4, 56, 1, 44, 173, 21];

 

const compare = (a, b) => {

if (a > b) {

return 1;

}

if (a < b) {

return -1;

}

return 0;

};

 

numbers.sort(compare);

console.log(numbers);

결과

(8) [1, 1, 2, 4, 21, 44, 56, 173]

 

 

9. join

소스 코드

// 9. 배열을 문자로 합치는 방법

const arr10 = ["안녕하세요", "shoney", "블로그"];

console.log(arr10.join(" "));

결과

안녕하세요 shoney 블로그

배열의 내용을 문자 하나로 합쳐준다. " " 공백을 join 인풋 값으로 넣으면서 배열의 값 사이에 공백이 들어간 것을 확인할 수 있다.