본문 바로가기
FE/HTML_CSS_JavaScript

Array 관련 메소드 (2)

by Lulurem 2024. 1. 1.

 

filter 배열을 받아 필터링된 값들만 배열로 반환하기 위해
reduce 배열을 받아 무언가의 값으로 만들어 반환하기 위해
forEach 배열을 받아 순환하기 위해 (값 반환 x)
map 배열을 받아 새로운 배열을 반환하기 위해

arr.map()

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

const array1 = [1, 4, 9, 16];

const map1 = array1.map((x) => x * 2);

console.log(map1);
// Expected output: Array [2, 8, 18, 32]

**map() 함수와 forEach() 함수와의 차이점

둘 다 배열의 요소를 순회하는 함수이지만,

map() 함수는 각 요소를 주어진 함수로 매핑하여 새로운 배열을 반환하는 반면,

forEach() 함수는 각 요소를 단순히 순회하는 함수입니다.

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

// map()
const squaredNumbersMap = numbers.map(function(number) {
    return number * number;
});

console.log(squaredNumbersMap);
// Expected output: [1, 4, 9, 16, 25]

// forEach()
const squaredNumbersForEach = [];

numbers.forEach(function(number) {
    squaredNumbersForEach.push(number * number);
});

console.log(squaredNumbersForEach);
// Expected output: [1, 4, 9, 16, 25]

arr.filter()

**filter()** 메서드는 배열의 모든 요소에 대하여 주어진 함수의 조건을 통과한 요소로만 필터링 합니다.

조건을 통과한 요소가 없으면 빈 배열이 반환됩니다.

const num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

function isEven(value) {
    return value % 2 === 0;
}

const result = num.filter(isEven);
console.log(result);
// Expected output: [2, 4, 6, 8, 10]

arr.some()

**some()** 메서드는 배열의 요소중에 하나라도 주어진 함수를 통과하는지 테스트합니다.

조건을 통과한 요소가 있으면 true 아니면 false를 반환하고

true를 반환하면 즉시 순회를 멈춥니다.

arr.every()

every() 메서드는 배열의 모든 요소가 주어진 함수를 통과하는지 테스트합니다.

모든 요소가 조건을 통과하면 true 아니면 false를 반환하고

false 를 반환하면 즉시 순회를 멈춥니다.

'FE > HTML_CSS_JavaScript' 카테고리의 다른 글

SEO(검색 엔진 최적화)에 대해서  (1) 2024.01.03
Array 관련 메소드 (1)  (0) 2023.12.04
Sass vs Tailwind CSS  (0) 2023.11.30
HTML 2  (1) 2023.10.30
HTML 1  (0) 2023.10.27