[JavaScript, TypeScript] map(), filter(), some()메소드

오늘도 실무에서 디지게 많이 쓰는 세 메소드를 살펴볼 것이다.

셋 다 배열과 관련된 JavaScript, TypeScript메소드이므로 찬찬히 살펴보도록 한다!

주의(?)사항 : 배열 내 문자열에 원래 ''를 씌우는게 정석이지만,,, 귀찮아서 걍 생략했다ㅋ

1. map() 메소드

기능 : 배열의 각 요소를 변환하여 새로운 배열로 반환하여 만든다.

각각의 요소에 대해 한번씩 순회하며 콜백 함수를 적용 → 새로운 배열로 반환한다.

map메소드를 통해 배열을 새로이 구성해서 똑같은 길이로 반환할 수 있다.

[어떠한 배열] + 내가 설정한 콜백 함수 () = [내가 새로 만든 배열]

정확하지 않지만 이러한 뉘앙스의 새로운 배열을 뱉어낸다고 생각하면 된다.

Vue3.0 js에선 새로운 배열을 뱉어내기 때문에 얕은 복사가 된다 ➡️ readonly상태에서 벗어나 값을 변경할 수 있게 된다!

map()함수는 배열의 각 요소를 변환하거나 가공한 결과를 적용한 새로운 요소로 배열을 생성하기 위해 사용됩니다.

const oldArr = [A,B,C,D];

const newArr = oldArr.map(item => item.toLowerCase()); // [a, b, c, d]반환

 

map 함수의 꼴은 다음과 같이 생겼다.

array.map((item, index, array) => {
    // 콜백 함수 내용
});

arr : map함수를 적용시킬 배열

item :  현재 처리 중인 배열의 요소 하나하나 (oldArr을 예시로 들자면 A, B, C, D)

index(선택사항) : 현재 처리중인 요소의 인덱스

array(선택사항) : map메소드를 호출한 원본 배열 자체

 

2. filter() 메소드

기능 : 조건에 맞는 요소만 걸러내서 새로운 배열을 만든다.

특정 조건을 충족하는 요소를 선택할 때 사용할 수 있다.

filter()함수는 배열의 각 요소들 중에서 원하는 조건에 맞는 요소들만 필터링된 배열을 생성하기 위해 사용됩니다.

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

function isEven(value:number){ // 짝수를 찾는 메소드 설정
	return value % 2 === 0; 
}

const result = numArr.filter(isEven); // 짝수 [2, 4, 6, 8, 10] 반환

 

filter도 다음과 같은 매개변수들을 받을 수 있다.

array.filter((item, index, array) => {
	// 콜백 함수 내용
}

item : 현재 처리 중인 배열의 요소 하나하나(위 예시를 예로 들자면, 숫자 배열들 1, 2, 3,...)

index(선택 사항) : 현재 처리중인 요소의 인덱스

array(선택 사항) : filter 메소드를 호출한 원본 배열 자체

 

3. some() 메소드

기능 : 배열의 요소 중 하나라도 조건을 만족하면 true를 반환하는 메소드

조건을 만족하면 true, 그렇지 않으면 false를 반환한다. 배열 내 특정 조건을 만족하는 요소가 있는지 확인할 때 사용한다.

some()메소드는 배열 요소를 하나씩 순회하여, 콜백 함수의 조건을 만족하는 요소가 하나라도 있는지 판별합니다.

const arr = [a, b, c, d, e];

function searchLetter(value){ // 배열에 a가 있는지 확인하는 메소드
	return value === 'a';
}

const hasA = arr.some(searchLetter); // true 반환

 

some 메소드의 매개변수는 다음과 같다.

array.some((item, index, array) => {
	// 콜백 함수 내용
})

item : 순회를 돌 배열의 요소 하나하나

index(선택 사항) : 순회를 돌 배열의 인덱스

array (선택 사항) : 메소드를 호출한 원본 배열 자체

 

+ 참고사항

(1) index와 array는 선택적 매개변수이다. 필요한 경우에만 사용한다!

(2) 세 메소드 모두 원본 배열을 수정하진 않으며, 원본 배열은 불변이다.

 

[출처] https://codingeverybody.kr/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-map-%ED%95%A8%EC%88%98/

자바스크립트 map() 함수 – 개념 정리 및 사용 예제 - 코딩에브리바디

https://codingeverybody.kr/%ec%9e%90%eb%b0%94%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8-filter-%ed%95%a8%ec%88%98/

자바스크립트 filter() 함수 – 개념 정리 및 사용 예제 - 코딩에브리바디

 

https://codingeverybody.kr/%ec%9e%90%eb%b0%94%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8-some-%ed%95%a8%ec%88%98/

자바스크립트 some() 함수 – 배열의 특정 조건을 만족하는 요소가 있는지 확인 - 코딩에브리바디