filter(), map() 함수 - 자바스크립트 배열 관련 메서드 - 자바스크립트[JavaScript]

filter() 함수 : 원래 배열의 상태가 변하지 않는다. 배열을 돌면서 조건에 맞는 요소들을 배열 형태로 반환한다.

map() 함수 : 원래 배열의 상태가 변하지 않는다. 배열을 돌면서 조건식에 맞는 값을 배열 형태로 반환한다.

 

배열.filter(반환할 배열의 조건)

 

/////////////////////조건에 맞는 숫자 배열///////////////////////////////
var arr = [1, 2, 3, 4, 5];
var filtered = arr.filter(v => v > 3); //[4, 5] //배열 arr에서 3보다 큰 요소들을 반환하여 filtered배열에 담는다

/////////////////////JSON 무효한 값 걸러낸 배열///////////////////////////////
var ages = [
	{age : 1},
	{age : 4},
	{age : 15},
	{age : -10},
	{age : -33},
	{age : null}
];
function isNumber(obj){
	return obj !== null && typeof(obj) === 'number';
}

function filteredByAge(ages){
    if(isNumber(ages.age) && ages.age > 0){
    	   return true;
    }
    return false;
}
    
var arrByAge = ages.filter(filteredByAge); //[{age:1},{age:4},{age:15}]
//함수 조건에 맞는 null이 아니고, 타입이 숫자인 값들 그리고 age가 양수인 값들만 리턴된다.

/////////////////////배열 내용 검색///////////////////////////////
var exercises = ['golf', 'tennis', 'soccer', 'baseball', 'basketball'];

function filterItems(search) {
  return exercises.filter(function(item) {
      return item.indexOf(search) > -1;
  })
}

console.log(filterItems('ba')); // ["baseball", "basketball"]

//배열 내에서 검색하고자 하는 검색어 search를 입력하면 indexOf에 의해 값이 없으면 -1, 
//값이 있으면 해당 값이 있는 인덱스 값을 리턴한다.

 

728x90

배열.map(반환할 배열의 조건식)

 

////////////////////////////////숫자 조건식////////////////////////////////////
var num = [1,9,25];
var roots = num.map(Math.sqrt); //[1, 3, 5];
//num배열을 돌면서 요소에 조건식을 계산한 값을 반환한다.
console.log(num) //[1,9,25] //배열 num은 원래 배열 그대로이다.
////////////////////////////////객체 조건식////////////////////////////////////
var keyArray = [
	{key:1, value: 100},
	{key:2, value: 200},
	{key:3, value :300}];

var reformatted = keyArray.map(function(obj){
	var rObj = {};
    rObj[obj.key] = obj.value;
    return rObj;
});
//reformatted = [{1:100}, {2:200}, {2:300}]

////////////////////////////////인자를 받는 숫자 조건식////////////////////////////////////
var num = [1,3,5];
var double = num.map(function(item) {
	return item * 2;
}
//double = [1, 9, 25] //double배열은 조건식에 대입된 값
//num = [1, 3, 5] //num 배열은 그대로

////////////////////////////////map의 포괄적 사용////////////////////////////////////
var map = Array.prototype.map;
var asci = map.call('Hello World', function(x) { return x.charCodeAt(0); });
//asci 배열은 [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

 

---

아래는 관련 함수를 사용한 코딩테스트 예제들입니다.

 

https://leylaoriduck.tistory.com/465?category=781765 

[프로그래머스 스킬체크 레벨 1] [1차] 다트 게임 풀이 및 설명 - 자바스크립트[JavaScript]