JavaScript 배열 built-in 함수

CodeLog·2020년 11월 26일
0

forEach

일반적인 for문과 같다고 생각할 수 있다.

arr.forEach(function(currentValue, index , array){},thisArg)
반화값 undefined

let numberArray = [1,2,3];

function sum (arr){
	arr.forEach(function(currentValue, index, array){
		console.log(`현재 배열의 요소 ${currentValue} 현재 배열의 인덱스 ${index}`);
	});
}
sum(numberArray);
// 현재 배열의 요소 1 현재 배열의 인덱스 0
// 현재 배열의 요소 2 현재 배열의 인덱스 1
// 현재 배열의 요소 3 현재 배열의 인덱스 2

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

map

배열 내 모든요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

array.map(function(currentValue, index, array){},thisArg)
배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열

let testArray = [1,2,3];

function multiplyElementByTwo(arr){
	return arr.map(function(currentValue, index, array){
		return currentValue * 2;
	})
}
console.log(multiplyElementByTwo(testArray));
//[2, 4, 6]

//객체에서 필요한 정보만을 원할때.
let students = [
	{
		name : 'kim',
		age : 17,
		gender : 'male'
	},
	{
		name : 'lee',
		age : 18,
		gender : 'female'
	},{
		name : 'john',
		age : 18,
		gender : 'male'
	}
]
let onlyStudentsNnme = students.map(function(key){
	return key.name;
})
console.log(onlyStudentsNnme);
//['kim', 'lee', 'john']

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

filter

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환.
어떠한 요소도 통과하지 못하면 빈 배열을 반환한다.

array.filter(function(currentValue, index, array){},thisArg)

let number = [1,2,3,4,5,6]

let changedNumber= number.filter(function(currentValue , index, array){
	return currentValue > 4;
})
console.log(changedNumber);
//[5, 6]

//객체에서 filter 할때
let employee = [
	{
		name : 'kim',
		age : 17,
		gender : 'male'
	},
	{
		name : 'lee',
		age : 18,
		gender : 'female'
	},{
		name : 'john',
		age : 19,
		gender : 'male'
	}
]
let overEighteen= employee.filter(function(currentValue , index, array){
	return currentValue.age > 18;
})
console.log(overEighteen);
//{name: 'john', age: 19, gender: 'male'}

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

reduce

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

array.reduce(function(accmulator, currentValue , currentIndex, array){},initalValue),

리듀서 함수는 네가지 인자를 가진다.
1. 누산기 (accumulator)
2. 현재값 (currentValue)
3. 현재 인덱스 (currentIndex)
4. 원본매열 (array)
리듀서의 함수 반환값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이된다.

!!initialValue를 제공하지 않을 경우 인덱스를 1부터 시작하고,initialValue를 제공하면 인덱스는 0에서 시작한다.

let numberArr = [1,2,3,4];

let totalNumber = numberArr.reduce(function(acc , cur , index, array){
	return acc = acc + cur;
}, 0)
console.log(totalNumber);
//10

//배열 내 요소 세기
var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

var countedNames = names.reduce(function (allNames, name) { 
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

every

배열안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트한다.

array.every(function(currentVlaue , index, array ) {},thisArg);
반환값 : 모든 요소에 대해 truthy한 값일 경우 true, 아니면 false를 반환.

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/every

profile
개발로그

0개의 댓글