[프로그래머스] 음양 더하기 + 자바스크립트 반복문 / 배열 메서드

https://programmers.co.kr/learn/courses/30/lessons/76501

코딩테스트 연습 - 음양 더하기

문제 설명

어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요.

문제 해결 아이디어

반복문만 돌리면 되는 정말 쉬운 문제다. 그래서 여기서 찾아봐야겠다고 생각했던 건 과연 어떤 반복문을 써야 가장 빠르게 풀 수 있을까? 였다. 처음에는 map을 사용해서 풀었는데 오리지널 for문이 가장 빠르다고 얼핏 봤기에 다시 for문으로 풀어 봤다. 그리고 자바스크립트의 다양한 반복문과 배열 메서드를 비교해 봤다.

문제 풀이

function solution(absolutes, signs) {
    let answer = 0;
    for (let i = 0; i < absolutes.length; i++) {
        if(signs[i])
            answer += absolutes[i];
        else
           answer -= absolutes[i];
    }
    return answer;
}

• for문 돌려서 true면 양수값으로 더하고, false면 음수값으로 더한다(뺀다).

반복문 종류

for 문 / do... while 문 / while 문

for...in 문

• 객체
• 속성 이름을 통해 반복

for... of 문

• 반복 가능한 객체 (배열, Map, Set ...)
• 속성 값을 통해 반복

let arr = [3, 5, 7];
arr.foo = "hello";

for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}

for (let i of arr) {
   console.log(i); // logs "3", "5", "7"
}

따라서 인덱스를 사용할 거면 배열에서는 for...of나 전통적인 for문을 사용하는 게 좋음

배열 반복 메서드

forEach

• 가독성이 좋음
• 객체형을 다루기 좋음
• 빠른 편

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

filter

• return 값이 true일 경우 그 요소를 리턴하고, false인 경우 리턴하지 않는다.
• 말 그대로 걸러낸다
• 빈 배열 요소를 반환하지 않는다

var arr = [0, , , 1, , , , , 2, , , , 3];
var newArr = arr.filter(function() { return true; });
var newArr = arr.filter(function(el) { return el; });
// 0, 1, 2, 3

map

• filter와 사용 방법 동일
• 다른 점은 filter는 리턴값으로 true/false만 쓸 수 있지만 map은 새로운 값을 만들어서 리턴한다.

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

reduce

• 콜백 함수의 첫 번째 인자로 accumulator를 받아서 그 값을 반환함
  • return 값을 누적함. reduce 메소드의 두 번째 인자로 초기값 설정도 가능.
  • accumulator의 값은 배열이 될 수도 있고 객체가 될 수도 있다.

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

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  function(accumulator, currentValue) {
    return accumulator.concat(currentValue);
  },
  []
);
// 펼친 결과: [0, 1, 2, 3, 4, 5]

문제 풀이 응용

function solution(absolutes, signs) {
  return absolutes.reduce(
    (acc, val, i) => acc + (val * (signs[i] ? 1 : -1)), 0
  )
}

결론: 그렇다면 속도의 차이는?

• 브라우저마다 차이가 있다
  • 크롬에서는 for of나 일반적인 for문이 빠른 쪽
  • 파이어폭스에서도 마찬가지지만 map이나 forEach가 훨씬 느려짐
  • 삼성 브라우저에서는 forEach가 제일 빠름
• 따라서 적재적소에 맞는 반복문과 메서드를 사용하도록 하자!

출처 https://velog.io/@zuyonze/자바스크립트-성능-최적화에-대한-의문-glk00t4bxk