[JavaScript] reduce method, spread syntax, computed property name, ternary operator

사용된 개념: spread syntax, computed property name, ternary operator

 

alphabets라는 array에 각 알파벳이 몇번씩 등장하는지 세는 object를 만들고 싶다.

let alphabets = ['a', 'a', 'b']

let countAlphabets = alphabets.reduce((value, alphabet) => {
  if (!value[alphabet]) {
    value[alphabet] = 1
  } else {
    value[alphabet] += 1
  }
  return value
},{})


> { a: 2, b: 1 }

reduce 메소드를 이용하여 위와 같이 구해볼 수 있을 것이다.

---

오늘은 아래와 같이 좀 더 멋있게(?) reduce 메소드를 쓰는 방법을 만났다.

let alphabets = ['a', 'a', 'b']

let countAlphabets = alphabets.reduce((value, alphabet) => {
  return {
    ...value,
    [alphabet]: value[alphabet] ? value[alphabet] + 1 : 1
  }
},{})

> { a: 2, b: 1 }

value object에 계속 key, value를 누적시켜주기 위해서 spread syntax를 이용했다. {...value, <추가될 값>}

key값에 alphabet 변수 값을 넣어주기 위해서 computed property name 개념을 이용해서 []로 묶어줬다. 안 그러면 'alphabet'이라는 string 값이 들어갈 것이다.

if else문 대신에 ternary operator(삼항 연산자)를 이용하면 구문을 간결히 할 수 있다.