JavaScript 배열 메서드

유연희·2022년 5월 19일
0

배열 메서드

forEach()는 배열의 처음부터 끝까지 주어진 함수를 반복실행하는 메서드이다.

forEach()

구문

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

사용예시

인덱스의 경우 필요에 따라 생략할 수 있으며, forEach()의 경우 중간에 멈추는 것이 불가능 하다.

//배열.forEach(functon(요소,인덱스){ 함수 }

arr = [1,2,3,4,5,6]

arr.forEach(function(el){
	console.log(el*3)
})

//화살표 함수 사용
arr.forEach((el, index)=>{
	console.log(index, el*3)
})

filter()

filter()는 주어진 함수의 테스트를 통과하는 모든 요소들로 이루어진 새로운 배열을 반환하는 메서드이다.

구문

arr.filter(callback(element[, index[, array]])[, thisArg])

사용예시

//배열.filter((요소)=>( 조건 ))

//객체가 들어있는 배열에서 "토끼초등학교"에 다니는 객체만 골라 새로운 배열로 저장.

const classmates = [
{ name: "철수", age:10, school: "토끼초등학교"},
{ name: "영희", age:13, school: "다람쥐초등학교"},
{ name: "훈이", age:11, school: "토끼초등학교"}
];

let who = classmates.filter((student) => (student.school ==="토끼초등학교"))

console.log(who)

map()

map()메서드는 배열 내의 모든 요소에 주어진 함수를 호출한 결과를 새로운 배열로 반환하는 메서드이다.

구문

arr.map(callback(currentValue[, index[, array]])[, thisArg])

사용예시

map의 경우 이전 배열에 영향을 주지 않는다.

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

let result = arr.map((el)=> el*5)

console.log(arr) //[ 1, 2, 3, 4, 5 ]
console.log(result) //[ 5, 10, 15, 20, 25 ]

every()

every()메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트하고, Boolean 값으로 반환한다.

배열의 모든 요소의 판별 값이 참인 경우 true, 판별 값이 거짓 인 경우 즉시 false를 반환
즉. 모든 값이 참인지 확인하는 함수

사용 예시

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

console.log(arr.every((el)=>el<9))

//true

console.log(arr.every((el)=>el<3))

//false

some()

some()메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트하고, Boolean값으로 반환한다.

배열의 모든 요소의 판별 값이 거짓인 경우 false, 판별 값이 참 인 경우 즉시 true를 반환

사용예시

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

console.log(arr.some((el)=>el>9))
//false

console.log(arr.some((el)=>el<3))
//true

reduce()

reduce()는 누적 계산의 결과 값을 반환하는 메서드이다.

reduce() 메서드는 4개의 인자를 갖는다.
-> 누산기 (acc), 현재 값 (cur), 현재 인덱스 (idx), 원본 배열 (src)
순회를 반복하며 callback함수의 반환 값이 acc값이 되고, 최종 결과로 누적된 acc 값 하나가 결과 값으로 반환된다.

구문

arr.reduce(callback[, initialValue])

사용예시

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

const initialValue = 0;
const sum = array1.reduce(
  (acc, cur) => acc + cur,
  initialValue
);

console.log(sum); // 10

map() vs forEach()

forEach()문과 map()의 차이점으로 map()은 새로운 배열을 반환한다는 것이다.
forEach()의 경우 현재 배열을 변경한 뒤 반환 값은 버린다.
속도는 forEach()가 더 빠르다.

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

let result1 = arr.map((el)=>el*5)
console.log(result1)

//[ 5, 10, 15, 20, 25 ]


let result2 = arr.forEach((el)=>el*5)
console.log(result2)

//undefined

+mathod chaining

메서드의 반환 값인 객체에 또 다른 메서드를 적용시켜 다른 함수를 호출하는 것을 말한다.

사용예시

//3보다 큰 요소만 찾아 2배 시킨 값을 반환한다.

const arr = [1,2,3,4,5] 
console.log(arr.filter((el)=>el>3).map((el)=>el*2))

MDN 문서 참고 https://developer.mozilla.org/ko/

profile
developer

0개의 댓글