[JavaScript] 배열 내장 함수

forEach

배열의 요소들을 반복하여 작업을 수행할 수 있다. 

forEach 구문의 인자로 콜백 함수를 등록할 수 있으며, 배열의 요소를 순회할 때 해당 콜백 함수가 호출된다. 이때, 배열 요소의 인덱스와 값에 접근 가능하다.

const arr = [1, 2, 3, 4, 5];
arr.forEach((elm) => console.log(elm * 2));

arr.forEach(function(item, index){
	console.log(item, index);
}); // item: 배열 각각의 아이템 & index: 배열 아이템의 index

 

map

원본 배열의 모든 요소를 순회하며 연산을 한 후, return 값으로 해당 연산의 결과를 받아올 수 있다.

const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((elm) => {
	return elm * 2;
});

console.log(newArr); // [2, 4, 6, 8, 10]

 

includes

특정한 값이 배열 안에 존재하는 지 확인하고 싶을 때 사용 가능

#2 Case를 보면, includes는 === 연산처럼 type이 같은지 역시 확인하므로, 1이 아닌 문자열 "1"이 전달되면 false를 return 한다.

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

// #1 Case
let num = 1;
console.log(arr.includes(num)); // true

// #2 Case
let str = "1";
console.log(arr.includes(str)); // false

 

indexOf

includes와 동일한 역할 + 몇 번째 index에 위치하는 지

존재하지 않는다면? → return -1

 

find

배열에서 해당 판별 함수를 만족하는 첫 요소를 return

원하는 요소 찾으면? → Method 종료

존재하지 않는다면? → return undefinded

 

findIndex

배열에서 해당 판별 함수를 만족하는 첫 요소에 대한 index return

존재하지 않는다면? → return -1

 

join

배열의 모든 문자열을 합쳐주는 메소드

구분자: join()의 인자로 들어가는 값 

const arr = ["고양이", "강아지", "멍멍이", "왈왈이"];
console.log(arr.join(' ')); // 고양이 강아지 멍멍이 왈왈이

 

filter

특정 조건을 만족하는 새로운 배열이 필요할 때 주로 사용, 말그대로 필터링 역할

순차적으로 값을 접근하기 때문에 순회를 위한 for 문 같은 코드 작성이 불필요하다.

const arr = [1, 2, 3, 4, 5]; 
const result = arr.filter(num => num > 3); 

console.log(result); // [4, 5]

json과 같은 객체에도 효과적으로 사용할 수 있다. 

const person = [
	{name: "a", money: 900000},
    {name: "b", money: 300000},
    {name: "c", money: 700000},
    {name: "d", money: 400000}
]

const rich = person.filter(p => p.money > 500000);

console.log(rich); // [{name: "a", money: 900000}, {name: "c", money: 700000}]

const richName = rich.map(p => p.name);

console.log(richName); // ["a", "c"]

 

slice

배열을 자르고 싶을 때 사용하며, 자른 배열을 반환한다.

const person = [
	{name: "a", money: 900000},
    {name: "b", money: 300000},
    {name: "c", money: 700000},
    {name: "d", money: 400000}
]

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

/* 출력:
[ { name: 'a', money: 900000 },
  { name: 'b', money: 300000 },
  { name: 'c', money: 700000 },
  { name: 'd', money: 400000 } ]
  
[ { name: 'a', money: 900000 }, { name: 'b', money: 300000 } ] */

 

concat

배열을 붙이고 싶을 때 사용하며, 결과 배열을 반환한다.

const arr1 = [
  { num: 1, color: "red" },
  { num: 2, color: "green" },
  { num: 3, color: "blue" }
];

const arr2 = [
  { num: 4, color: "red" },
  { num: 5, color: "white" }
];

console.log(arr1.concat(arr2));

/*
출력: 
[ { num: 1, color: 'red' },
  { num: 2, color: 'green' },
  { num: 3, color: 'blue' },
  { num: 4, color: 'red' },
  { num: 5, color: 'white' } ] */