[패스트캠퍼스] 프론트엔드 인강 환급 챌린지(2) JavaScript - 배열 내장함수 forEach, map, filter 등등

수강한 클립명 && 수강 인증샷

(1) 22. 배열 내장 함수 - forEach

(2) 23. 배열 내장 함수 - map

(3) 24. 배열 내장 함수 - filter

 

forEach

- 배열 안의 원소들을 가지고 어떤 작업을 일괄적으로 하고 싶을 때 사용합니다.

- 즉, 모든 배열 안의 원소에 접근하고 싶을 때 사용합니다.

 

const superHeroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

superHeroes.forEach(hero => {
	console.log(hero);
});

// 아이언맨, 캡틴 아메리카, 토르, 닥터 스트레인지 출력.

보시다시피 forEach는 forans과 마찬가지인 반복적인 기능을 수행할 때 사용합니다.

하지만 for문처럼 초기식, 조건식, 증감식을 정의하지 않아도 callback 함수를 통해 동일하게 수행할 수 있습니다.

 

forEach의 callback 함수는 세 가지를 매개변수(인자)로 받습니다. 

(1) currentValue : 처리할 현재 요소.

(2) index : currentValue의 인덱스

(3) array : 현재의 전체 배열( forEach()를 호출한 배열)

const superHeroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

superHeroes.forEach((currentValue, index, array)=> {
	console.log(`${array}배열의 ${index}번째 요소 : ${currentValue}`);
});

/*
아이언맨,캡틴 아메리카,토르,닥터 스트레인지 배열의 0번째 요소 : 아이언맨 
아이언맨,캡틴 아메리카,토르,닥터 스트레인지 배열의 1번째 요소 : 캡틴 아메리카 
아이언맨,캡틴 아메리카,토르,닥터 스트레인지 배열의 2번째 요소 : 토르 
아이언맨,캡틴 아메리카,토르,닥터 스트레인지 배열의 3번째 요소 : 닥터 스트레인지 
출력.
*/

 

map

- 배열에 있는 값들을 가지고 원하는 방식으로 변환 및 활용하고 싶을 때 사용합니다.

- 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

 

- map()도 callback 함수는 세 가지를 매개변수(인자)로 받습니다. 

  (1) currentValue : 처리할 현재 요소.

  (2) index : currentValue의 인덱스

  (3) array : 현재의 전체 배열( map()를 호출한 배열)

const array = [1, 2, 3, 4, 5, 6, 7, 8];

const squared = array.map(n => n * n);

console.log(squared);
//[1, 4, 9, 16, 25, 36, 49, 64] 출력.


const items = [
	{
    	id: 1,
        text: 'hello'
    },
    {
    	id: 2,
        text: 'bye'
    }
];

const texts = items.map(item => item.text);

console.log(texts);

// ["hello", "bye"] 출력.

map은 callback 함수를 각각의 요소에 대해 한 번씩 순서대로 불러 그 함수의 반환 값으로 새로운 배열을 만듭니다. 

callback 함수는 undefined를 포함한 배열 값이 들어있는 인덱스에 대해서만 호출됩니다. 

즉, 값이 삭제되거나 아직 값이 할당 혹은 정의되지 않은 인덱스에 대해서는 호출되지 않습니다. 

 

indexOf, findIndex, find

- indexOf : 해당 값이 속해 있는 인덱스 번호를 반환합니다.

 

- findIndex : 특정 조건으로 객체 혹은 원소의 인덱스 번호를 찾고자 할 때 사용합니다.

가장 첫 번째로 찾은 항목을 알려줍니다.

 

- find : findIndex와 유사하나 객체 자체 혹은 원소 자체를 반환합니다. 

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

const index = superheroes.indexOf('토르');
console.log(index);
// 2 출력.

const todos = [
    {
        id: 1,
        text: '자바스크립트 입문',
        done: true,
    },
    {
        id: 2,
        text: '함수 배우기',
        done: true,
    },
    {
        id: 3,
        text: '객체와 배열 배우기',
        done: true,
    },
    {
        id: 4,
        text: '배열 내장함수 배우기',
        done: false,
    },
]

const index = todos.findIndex(todo => todo.id === 3);
console.log(index);
// 2 출력.

const todo = todos.find(todo => todo.id === 3);
console.log(todo);
// Object {id: 3, text: "객체와 배열 배우기", done: true} 출력.

 

filter

- 특정 조건을 만족하는 원소들을 찾아서 그 원소들로 새로운 배열을 만드는 함수입니다.

- filter() callback 함수는 세 가지를 매개변수(인자)로 받습니다. 

  (1) element : 처리할 현재 요소.

  (2) index : element의 인덱스

  (3) array : 현재의 전체 배열( filter()를 호출한 배열)

 

반환 값은 특정 조건을 만족하는 원소들로 이루어진 새로운 배열입니다.

어떤 원소도 특정 조건을 만족하지 못했으면 빈 배열을 반환합니다.

const todos = [
    {
        id: 1,
        text: '자바스크립트 입문',
        done: true,
    },
    {
        id: 2,
        text: '함수 배우기',
        done: true,
    },
    {
        id: 3,
        text: '객체와 배열 배우기',
        done: true,
    },
    {
        id: 4,
        text: '배열 내장함수 배우기',
        done: false,
    },
]

const tasksNotDone = todos.filter(todo => todo.done === true);

console.log(tasksNotDone);

//[Object, Object, Object] 출력.
// 0: Object
//	id: 1
//	text: "자바스크립트 입문"
//	done: true
// ~2 까지 출력 

 

splice, slice

splice : 기존 배열을 특정 인덱스부터 특정 인덱스까지 삭제하고 반환합니다.

 

slice : splice와 다르게 기존의 배열을 건드리지 않습니다.. 시작 인덱스부터 끝 인덱스 전까지 자릅니다.

const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30);
const spliced = numbers.splice(index, 2); // index부터 2개를 삭제한다.

console.log(spliced); // [30, 40] 출력. (삭제된 원소들 출력)
console.log(numbers); // [10, 20] 출력. (삭제하고 남은 결과 출력)


const numbers = [10, 20, 30, 40];

const sliced = numbers.slice(0, 2); // 0번째 원소부터 2번째 원소 전까지 자른다.

console.log(sliced); // [10, 20] 출력. (삭제된 원소들 출력)
console.log(numbers); // [10, 20, 30, 40] 출력. (그대로 유지)

 

Concat, join

- concat 

두 배열을 합쳐줍니다. 기존의 배열은 수정하지 않고 합친 새로운 배열을 반환합니다.

 

- join

배열을 String으로 변환해줍니다. 기존의 배열은 수정하지 않고 새로운 String 값을 반환합니다. 

인자로는 구분자를 넣어줍니다. 

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

const concated = arr1.concat(arr2);
// 스프레드 연산자 사용해서 const concated = [...arr1, ...arr2];도 가능하다.
console.log(concated);
// [1, 2, 3, 4, 5, 6] 출력.


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

console.log(array.join()); // 1,2,3,4,5 출력.
console.log(array.join(' ')); // 1 2 3 4 5 출력.
console.log(array.join(', ')); // 1, 2, 3, 4, 5 출력.

 

 

강의 링크

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스 (fastcampus.co.kr)

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스