forEach, map, filter : 각 배열 원소에 함수 적용하기

forEach, map, filter 메서드

forEach 메서드 예제 살펴보기

javascript

var charSets = ['ab', 'bb', 'cd', 'ab', 'cc', 'ab', 'dd', 'ab'];

function replaceElement(element, idx, arr) {
	if (element == 'ab') {
		arr[idx] = '**';
	}
}
charSets.forEach(replaceElement);
console.log(charSets);

charSets.forEach(function (el, idx, arr) {
	if (el == '**') {
		arr[idx] = '***'
	}
});

console.log(charSets);

map 메서드 : 배열의 모든 원소에 함수를 적용하고 새로운 배열 반환하기

Array 객체의 map 메서드를 사용하면 원본 배열에서 새로운 배열을 만들 수 있습니다.

새로운 배열의 원소는 map 메서드에 전달된 콜백 함수를 원본 배열의 원소에 적용하여 구할 수 있습니다.

javascript

// 10진수를 16진수로 변환하는 함수
function convertToHex(element, index, array) {
	return element.toString(16);
}

var decArray = [23, 255, 122, 5, 16, 99];
var hexArray = decArray.map(convertToHex);
console.log(hexArray);

var hex = decArray.map(function (el, idx, arr) {
	return el.toString(16);
});

console.log(hex);

forEach 메서드처럼 map 메서드는 각 배열 원소에 콜백 함수를 적용합니다.

다른 점이 있다면 map 메서드는 원본 배열을 수정한 새로운 배열을 결과로 반환한다는 것입니다.

뿐만 아니라, forEach 를 사용할 때는 값을 반환하지 않았지만 map 을 사용할 때는 값을 반드시 반환해야 합니다.

filter 메서드 : 값을 걸러낸 배열 작성하기

배열 원소의 값을 걸러내어 그 결과로 새로운 배열을 만들고자 하는 경우에는 Array 객체의 filter 메서드를 사용하면 됩니다.

javascript

function removeChars(element, index, array) {
	return (element !== '**');
}

var character = ["**", "bb", "cd", "**", "cc", "**", "dd", "**"];
var newChar = character.filter(removeChars);

console.log(newChar);

filter 메서드에 인수로 전달된 함수는 배열 원소 확인 결과에 따라 불린 값, 즉 true 또는 false 를 반환합니다.

반환되는 값은 배열 원소가 새로운 배열에 추가될 것인지를 결정합니다.

함수에서 true 를 반환하면 새 배열에 추가되고, 그렇지 않으면 추가되지 않습니다.

위에서 본 예제는 원본 배열의 문자열 '**' 새 배열을 작성할 때 걸러지게 됩니다.

Jaehee's WebClub