2024/03/20 단락평가 and 웹개발 A to Z 강의 4

5주차 강의

github

개발자들이 자신의 코드를 저장하고 다른 사람들과 공유하는 곳

---

단락평가

내 블로그 글 정리하면서 본 reduce메소드 예시다.

const fruits = ['apple', 'banana', 'orange', 'apple', 'orange'];
const count = fruits.reduce(function(accumulator, currentValue){
   accumulator[currentValue] = (accumulator[currentValue] || 0) + 1;
   return accumulator;
},{})
console.log(count); // { apple: 2, banana: 1, orange: 2 }

짚고 넘어가야할 부분이 있었다. 오늘은 이거 하느라 시간을 다쓴듯.

논리 연산에서 주로 사용되며, 논리 연산자 &&와 ||를 사용할 때 발생하는 특별한 연산 방식

나는 단순히
or연산자 = a||b 는 a나 b 둘중 하나가 참일경우 true값을 반환
and연산자 = a && b 는 a와 b 둘다 참일경우 true값을 반환
이런식으로만 이해하고 넘겼었다.

|| (OR) 연산자의 단락 평가

• || 연산자는 두 피연산자 중 하나라도 true (truthy한 값)일 경우 true를 반환(여기까진 아는부분)
• 단락 평가에서 || 연산자는 첫 번째 피연산자가 true로 평가될 경우, 두 번째 피연산자를 평가하지 않고 첫 번째 피연산자의 값을 반환
• 반대로, 첫 번째 피연산자가 false (falsy한 값)로 평가될 경우에 두 번째 피연산자를 평가하고 그 결과를 반환
• 둘다 falsy한 값일 경우 마지막 값을 반환

const a = null;
const b = '기본값';
const c = a || b; // '기본값'

위 reduce예시는 상수count에 fruits를 reduce메소드로 순환하면서 각각의 fruits배열안 요소들 갯수를 카운팅 하는 코드다.

accumulator[currentValue] = (accumulator[currentValue] || 0) + 1

함수가 처음실행 기준으로

accumulator객채에서 currentValue에 해당하는 키값을 참조함.
첫바퀴에서는 당연히 없음. 초기값에 {}빈객채만 설정했기때문.
그래서 accumulator[currentValue("apple")]는 애플이라는 요소가 없기때문에 false.
단락평가에 의해서 (0)+1되고 accumulator[currentValue("apple")] 는 1이 됨.
4번째 "apple"은 accumulator['apple'] 값이 있음. truthy 이기때문에 단락평가(1)+1이 되고 accumulator[currentValue("apple")] 는 2가됨. 5번째 orabge도 마찬가지.

---

&& (AND) 연산자의 단락 평가

• && 연산자는 두 피연산자 모두 true일 때만 true를 반환
• 단락 평가에서 && 연산자는 첫 번째 피연산자가 false로 평가될 경우, 두 번째 피연산자를 평가하지 않고 첫 번째 피연산자의 값을 반환
• 반대로, 첫 번째 피연산자가 true로 평가될 경우에만 두 번째 피연산자를 평가하고 그 결과를 반환

const a = true;
const b = '두 번째 값';
const c = a && b; // '두 번째 값'

const numbers = [1, 2, 3, 4, 5];
const doubledEvenNumbers = numbers.map(function(number) {
  return number % 2 === 0 && number * 2;
}).filter(Boolean);

console.log(doubledEvenNumbers); // [4, 8]

상수 numbers를 맵매서드를 이용해 순환하면서 짝수일때 그값을 두배곱한후 출력하는 코드다.

return number % 2 === 0 && number * 2;

매개변수number로 받은 숫자를 2로 나눈후 나머지값이 0이면(true), 앤드연산자 단락평가로
오른쪽 number*2가 반환된다. 짝수가 아닌경우는 앤드연산자 왼쪽에서 바로 false가 되기때문에
[false,4,false,8,false]상태가 되는데 여기에 filter(Boolean)을 사용해 false값들을 거름.
filter(Boolean)은 배열의 각 요소를 Boolean 생성자 함수에 전달하여, 그 결과가 true인 요소만을 새 배열에 포함시킴. 어렵다

예시를 보다 보니 이건 이프문으로도 쓸수 있지않나? 아니나다를까 물어봤더니
상황에 따라 적합한 방법을 선택하란다..
앤드연산자의 장점은
1. 더짧고
2. if문보다 유연성이 높아 함수의 반환갑으로 바로 사용할수있는등 map,filter같은 고차함수와 잘어울린다.
3. 함수형 프로그래밍 스타일
이라고 하는데 난 모르겠다 하나 기억하기도 힘들어서..

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

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    doubledEvenNumbers.push(numbers[i] * 2);
  }
}

console.log(doubledEvenNumbers); // [4, 8]

똑같은 결과값이 나오는 if문이다.