javascript - for, foreach, filter, map, reduce, some

javascript를 사용하다보면 너무나 자주 마주하는 함수들!! 한번은 정리할 필요가 있다고 생각했다. 

📌for()

for (int i = 0; i < 10; i++) {
  console.log(arr[i]);
};

let arr = [];

for (let i = 0; i < 7; i++) {
    arr.push(i)
  }
  console.log(arr);
//   [ 0, 1, 2, 3, 4, 5, 6]

const doyi = {
    name : 'doyi',
    year : 2023
}

/*객체에서 가져오면 키값*/

for(let key in doyi){
    console.log(key);
}
// name
// year


/*인덱스에서 가져오면 키는 인덱스값*/ 
const ivememberArray = ['안유진','가을','이서','장원영','레이','리즈']

for (let key in ivememberArray) {
   console.log(key);
}
// 0
// 1
// 2
// 3
// 4
// 5

 

• 가장 빠르고 단순하다. 그래서 효율적이다.
• 모든 자료형에 대해 사용이 가능하다.
• 중간에 loop 건너뛰기나 종료가 가능하다. (continue or break)
• 반복범위 컨트롤이 가능하다. (i++, i–, i+=2*i 등)
• 변수를 활용할 수 있다. (var i 값을 사용할 수 있다)

 

📌foreach()

arr.forEach(function(v, i, arr) {
  console.log(v);
});

let numbers = [1,2,3,4,5,6];


// flag가 forEach함수문에 이름이라고 생각하면 됨 
numbers.forEach( flag => console.log(flag) ); 
// 1
// 2
// 3
// 4
// 5
// 6


// push이용한 foreach문 
 
let fruit = ['apple'];

fruit.forEach( flag => numbers.push(flag) ); 
// fruit의 배열이 numbers의 맨 뒤에 들어감
// push를 넣으면 맨 마지막에 붙는 것 flag 는 fruit.forEach함수문의 이름  

console.log(numbers);
// [ 1, 2, 3, 4, 5, 6, 'apple' ]


// sum을 이용한 forEach문 
let sum = 0;
let number = [20,40,76,80];

number.forEach(xxx); 
// 여기서 console.log(xxx)하면 에러뜸

function xxx(number){
  sum += number;
}

console.log(sum);
// 216

number.forEach( xxx => {
  sum += xxx;
})

console.log(sum);
// 432

 

for (var i = 0; i <arr.length; i++) {
  console.log('element', i, arr[i]);
  console.log(arr[i].property1 + arr[i].property2);
  console.log(arr[i].property2);
};

arr.forEach (function (v, i) {
  console.log('element', i, v);
  console.log(v.property1 + v.property2);
  console.log(v.property2);
});

• 일반 for문보다 훨씬 가독성이 좋다.
• 같은 구문이라도 다음과 같이 가독성면에서 차이가 있다.
• forEach는 복잡한 객체를 처리하는데 있어서 유리하다.
• 하지만 forEach문은 구문 밖으로 return값을 받지 못한다.

 

📌filter()

var newArr = arr.filter(function(v, i, arr) {
  return condition;
});

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

const cute = arr.filter( (value) => {
  return value !== 1;
})

console.log(cute);
// [ 2, 3, 4, 5 ]

 

• filter의 가장 큰 특징은 boolean형태의 return값을 갖는다.
• return값은 true/false이며, 요소를 반환한다.
• return값이 true일경우, 그 요소를 반환하고 false일경우, 반환하지 않는다. 기본값은 false이다.
• 빈 배열 요소를 반환하지 않는다.
• Array객체에서 사용이 가능하다.
• filter()안에 {}을 쓰려면 꼭 return 집어넣기 

 

 

📌map()

arr.map(function(element, index, array){  }, this);

 

같은 결과를 출력하는 for문과 map함수 

let arr = [3, 4, 5, 6];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}

console.log(arr); // [9, 12, 15, 18]


let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]

 

 

객체 배열에서 map()을 사용하는 방법

let users = [
    {firstName : "Susan", lastName: "Steward"},
    {firstName : "Daniel", lastName: "Longbottom"},
    {firstName : "Jacob", lastName: "Black"}
  ];


let userFullnames = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
})

console.log(userFullnames);
// ["Susan Steward", "Daniel Longbottom", "Jacob Black"]

 

완전한 map() 메소드 구문

let array = [2, 3, 5, 7]

// map() 메소드의 this 인수에 숫자 값 할당   
array.map(function(element, index, array){
	console.log(this) 
}, 80);
// [Number: 80]
// [Number: 80]
// [Number: 80]
// [Number: 80]

// 값을 확인하기 위한 인수 로깅
array.map(function(element, index, array){
    console.log(element);
    console.log(index);
    console.log(array);
    return element;
}, 80);
// 2
// 0
// [ 2, 3, 5, 7 ]
// 3
// 1
// [ 2, 3, 5, 7 ]
// 5
// 2
// [ 2, 3, 5, 7 ]
// 7
// 3
// [ 2, 3, 5, 7 ]

 대부분의 경우 나머지는 무시하고 콜백 함수 내부의 element 인수만 사용한다. 

 

• filter는 return값으로 true/false만 쓸 수 있으며, 요소를 반환하지만, map의 경우 요소가 아닌 새로운 값을 만들어서 return할 수 있다.
• 빠른편이다.
• Array객체에서 사용이 가능하다.
• chainable하다.
• 대용량 배열 처리시 메모리 overflow 가능성이 있다.
• return값 자체를 반환한다.

 

📌reduce()

배열.reduce((return 누적값, 현재값, 인덱스, 요소) => {return 결과}, 초기값);

var arr = [1, 2, 3, 4, 5];
var newArr = arr.reduce(function(acc, v, i, arr) {
  return acc + v;
});

console.log(newArr); // 15

• 첫번째 인자인 accumulator(acc)는 return값을 누적하는데, 계속해서 전달받아서 사용할 수도 있다.
• accumulator(acc)의 초기값을 설정할 수 있다. optional하며 생략시에는 첫번째 return값이 된다.

 

var arr = [1,2,3,4,5]
var newArr = arr.reduce(function(acc, v, i, arr) {
  return acc + v;
}, 100);

console.log(newArr); //115

• 초기값 설정으로 인해 115 값이 나온 것을 확인할 수 있다.

 

이전값이 아니라 누적값이라는 것에 주의해야 한다. 

const oneTwoThree = [1, 2, 3];

result = oneTwoThree.reduce((acc, cur, i) => {
  console.log(acc, cur, i);
  return acc + cur;
}, 0);
// 0 1 0
// 1 2 1
// 3 3 2
result; // 6

 

acc(누적값)이 초기값인 0부터 시작해서 return하는대로 누적되는 것을 볼 수 있다. 

 

const oneTwoThree = [1, 2, 3];

result = oneTwoThree.reduce((acc, cur, i) => {
  console.log(acc, cur, i);
  return acc + cur;
});
// 1 2 1
// 3 3 2
result; // 6

초기값을 설정해주지 않으면 다른 값이 나온다. 

 

arr = [2,8,6]

let arrMap = arr.reduce(function(i,v) {
  console.log(i ,v);
    return  i*3 
})

console.log(arrMap);

//
2 8
6 6
//
18

저렇게 특정 수를 곱하면 배열의 숫자만큼 곱해진다

 

 

추가로 some()과 every()함수도 알아보자!

 

📌some()과 every()함수

배열.every((currentValue, index, array) => {return true or false});

every()함수

every()는 배열의 모든 요소가 조건을 충족하는지 확인하는데 사용된다.(AND와 같은 역할)

callback함수를 인자로 주면 하나라도 false를 리턴할 경우 false가 된다.

즉 성능을 위해 조건을 만족하지 않는 값이 발견되면 그 즉시 순회는 중단된다.

 

배열.some((currentValue, index, array) => {return true or false});

some()

some() 함수는 배열의 1개 요소라도 특정 조건을 충족하는지 확인하는데 사용된다.(OR과 같은 역할)

callback함수를 인자로 주면 some은 각 요소들 중 하나라도 true를 리턴하면 값은 true이다.

마찬가지로 성능을 위해 조건을 만족하는 값이 발견되면 그 즉시 순회는 중단된다. 

 

 

 

참고자료

• https://www.freecodecamp.org/korean/news/javascript-map-method/
• https://velog.io/@leyuri/for-each-v퍼포먼스-함수-변수-이름-팁