[패캠 인강] 배열과 배열 내장함수 (3)

2-14) .concat( ) 

  concat은 여러 배열을 하나로 합쳐준다. 원본에는 지장이 없다. concat의 인자로는 합쳐줄 배열이 들어간다.

 

let myFavoriteDrama = ['슬기로운 의사생활', '나의 아저씨', '멜로가 체질']
let herFavoriteDrama = ['비밀의 숲', '멜로가 체질', '동백꽃 필무렵']

console.log(myFavoriteDrama.concat(herFavoriteDrama))
  // ["슬기로운 의사생활", "나의 아저씨", "멜로가 체질", "비밀의 숲", "멜로가 체질", "동백꽃 필무렵"]
 
 // 중복된 요소라 해도 추가해서 포함된다.

console.log(myFavoriteDrama)
  // ['슬기로운 의사생활', '나의 아저씨', '멜로가 체질']
console.log(herFavoriteDrama)
  // ['비밀의 숲', '멜로가 체질', '동백꽃 필무렵']
  
// 원본에는 지장이 없다

 

---

 

2-15) .join(separator)

  join은 배열에 있는 모든 요소를 활용해 문자열로 바꿔준다. 이 때 join 안에 있는 인자가 그 요소들 사이에 끼어 든다.

let beAngry = ["아니", "넌", "어떻게", "된게", "매일", 0.5, "분씩이나", "늦어?"]
  // join은 요소가 숫자라도 문자열로 이어 붙여준다.

let veryAngry = beAngry.join() // 인자: 아무것도 주지 않음
console.log(veryAngry) // 아니,넌,어떻게,된게,매일,0.5,분씩이나,늦어?
  // 쉼표가 자동으로 구분 짓는 역할을 하게 됨


let soManyAngry = beAngry.join('') // 인자: '' => 빈 문자열
console.log(soManyAngry) // 아니넌어떻게된게매일0.5분씩이나늦어?
  // 띄어쓰기 없이 이어 붙임

let normalAngry = beAngry.join(' ') // 인자: ' ' => 한 칸 띄어쓰기를 씀
console.log(normalAngry) // 아니 넌 어떻게 된게 매일 0.5 분씩이나 늦어?

let powerfulAngry = beAngry.join('!!!')
console.log(powerfulAngry) // 아니!!!넌!!!어떻게!!!된게!!!매일!!!0.5!!!분씩이나!!!늦어?

let mbtiIAngry = beAngry.join('...')
console.log(mbtiIAngry) // 아니...넌...어떻게...된게...매일...0.5...분씩이나...늦어?


let funAngry = beAngry.join('용 ') // 인자: '용 ' => 용하고 한 칸 띄어쓰기
console.log(funAngry)// 아니용 넌용 어떻게용 된게용 매일용 0.5용 분씩이나용 늦어?
  // 보면 알겠지만 인자는 문자와 문자 사이에만 적용되므로 맨 마지막 늦어? 뒤에는 인자가 붙지 않음

 

---

 

2-16) .reduce( )

  reduce는 배열이 주어졌을 때, 배열의 모든 값을 활용해서 보통 연산할 때 사용된다. 이건 내용이 조금 많은데 복잡해서 이해가 잘 안 됐던 것만 사용하겠다. 

 

  reduce는 인자로 두 개를 받는다 하나는 함수, 다른 하나는 accumulator 초기값이다.  accumulator는 함수의 인자로 들어가는 값이고, 함수는 accumulator 포함 인자로 네 개를 받을 수 있다. 각 순서에 맞춰서

 

1. accumulator : 연산 후 누적된 값 
2. currentValue : 현재 연산해줄 요소의 값
3. index (optional) : 현재 current가 몇 번째 인덱스인지 알려줌
4. array : 함수를 실행하는 자기 자신을 의미

 

  솔직히 보면 무슨말인지 모르지만 화살표 함수 모양으로 꾸미면 아래처럼 된다.

 

const useReduce = arr.reduce((accumulator, current, index, array) => {
  // 함수 내용
}, accumulator초기값 );

 

  그럼 이번에 한 번 연산을 실제로 연산을 해보겠다. 배열에 있는 모든 요소를 더한 후 평균값을 낼 것이다.

 

let array = [10, 20, 30, 40, 50]
const useReduce = array.reduce((acc, curr, i, arr) => {
    // 축약식으로 인자를 표현했다.
  if ( i === array.length - 1 /* index가 array 맨 끝으로 갔을 때*/) {
    return ( acc + curr ) / array.length
  } 
  
  console.log(acc) // 0 => 10 => 30 => 60
  console.log(curr) // 10 => 20 => 30 => 40
  
  return acc + curr // 이 값이 다시 acc로 올라간다. 
                    // for문처럼 생각하면 acc = acc + curr
}, 0)

console.log(useReduce) // 30

 

  난 이걸 보면서 마치 for문과 같다고 생각했다. console.log(acc)와 console.log(curr)는 acculator와 current가 어떻게 값이 변하는 지를 보기 위해 사용했다.