1. 원본 배열을 변형하는 메서드

아래 나열된 7개의 메서드는 원본 배열을 변형시키는데, 이를 side effect(부수효과) 라고 한다. 이런 side effect를 갖는 함수(or 메서드)는 코드의 복잡도와 버그 발생확률을 높이는 원인 중 하나다. 그렇기 때문에 아래 메서드를 사용하기 보다 다음에 2. 변형 배열를 반환하는 메서드에서 소개하는 메서드를 사용을 우선시 하자~!

let arr = [1,2,3,4,5]

arr.push(0) // [1, 2, 3, 4, 5, 0] 변형된 배열의 length 리턴, 맨 뒤에 요소 추가
arr.pop() // [ 1, 2, 3, 4 ] 제거한 요소 리턴, 맨 뒤 요소 제거
arr.shift() // [ 2, 3, 4, 5 ]  제거한 요소 리턴 , 맨 앞 요소 제거 //
arr.unshift(9) // 6 ,[ 9, 1, 2, 3, 4, 5 ] 변형된 배열의 length 리턴, 맨앞에 요소 추가
arr.splice(0); // 변경된 배열 리턴 [ 1, 2, 3, 4, 5 ]
arr.splice(1);
arr.splice(4); // 잘라낸 값 리턴 [ 5 ], 결과는 남은 배열

let arr2 = [22,1,555,11,4,33]
arr2.sort() // 각 값을 문자열로 변형한뒤 사전순으로 정렬, 변형된 배열을 리턴 [ 1, 11, 22, 33, 4, 555 ]
arr2.reverse() // 변형된 배열을 리턴, [ 33, 4, 11, 555, 1, 22 ]

1) push() : 추가

• 리턴 : 변형된 배열의 length 리턴
• 결과 : 배열의 맨 마지막에 요소 추가

2) pop() : 제거

• 리턴 : 제거한 요소 리턴
• 결과 : 배열의 맨 마지막에 요소 제거

3) shift() : 제거

• 리턴 : 제거한 요소 리턴
• 결과 : 배열의 맨 앞 요소 제거

4) unshift() : 추가

• 리턴 : 변형된 배열의 length 리턴
• 결과 : 배열의 맨 앞 요소 추가

5) sort() : 정렬

sort() 메서드의 정렬방식 : mdn

값을 문자열로 변형한뒤 사전순으로 정렬한다. 인자로 compareFunction을 넘기면 해당 함수에 따라 정렬된다.

• 리턴 : 변형된 배열을 리턴
• 결과 : 정렬 적용

오름차순

const orderNum1 = arr => {
  arr.sort((left, right)=>{
  if (left < right) {
    return -1;
  }
  if (left > right) {
    return 1;
  }
  // a must be equal to b
  return 0;
})
}

내림차순

const orderNum1 = arr => {
  arr.sort((left, right)=>{
  if (left < right) {
    return 1;
  }
  if (left > right) {
    return -1;
  }
  // a must be equal to b
  return 0;
})
}

6) reverse() : 뒤집기

• 리턴 : 변형된 배열을 리턴
• 결과 : 정렬 적용

7) splice(start, range) : 잘라내기

잘라낼 배열의 인덱스를 인자로 지정

• 매개변수 갯수에 따른 결과
  • 1개 : 지정 인덱스부터 끝까지
  • 2개 : 시작 인덱스, 지정 길이
• 리턴 : 잘라낸 배열이 리턴
• 결과 : 나머지 배열이 리턴

2. 변형 배열를 반환하는 메서드

원본 배열을 변형하지 않고 새로운 배열을 반환하는 메서드를 배열접근 메서드라 부른다.

1) concat()

원본배열을 복제한뒤 인자로 받은 값을 배열 맨뒤에 추가하여 새로운 결과 리턴, 여러개의 인자를 받을 수 있다.

const originArr = [2,22]

// push() 대체하기
const newArr = originArr.concat(3,[4,44])
console.log({originArr, newArr})
// { originArr: [ 2, 22 ], newArr: [ 2, 22, 3, 4, 44 ] }

// unshift() 대체하기
const newArr2 = (['a']).concat(originArr);
console.log(newArr2) // [ 'a', 2, 22 ]

• 리턴 : 새로운 배열을 리턴
• 인자로 배열([4,44])이 입력되면, 배열에 속한 각각의 값이 1개의 인덱스(newArr: [ 2, 22, 3, 4, 44 ])로 합쳐진다!
• push(), unshift()를 대체할 수 있다

2) slice(start,end)

splice()와 매개변수의 사용이 다름.

• 1번 인자 : 시작 index
• 2번 인자 : 끝 지점, 포함되지 않는 index.
• start-index는 포함되며, end-index -1의 값까지 포함하여 잘라냄... 말보다 코드!

const arr = ['a','b','c','d']
const newArr1 = arr.slice(1)
const newArr2 = arr.slice(1,2)
const newArr3 = arr.slice(1,3)
console.log({newArr1,newArr2,newArr3})
// { 
//   newArr1: [ 'b', 'c', 'd' ],
//   newArr2: [ 'b' ],
//   newArr3: [ 'b', 'c' ]
// }

3) map(CB)

CB 에는 3개의 매개변수가 오는데 첫번째 매개변수는 배열순회 각 값, 두번째 매개변수는 해당 값의 index, 세번째 매개변수는 원본 배열이 위치함.

const arr = ['apple','banana','citron']
const newArr = arr.map((currentValue, currentIndex, originArray)=>{
  // 여기에 할 것 ~
  console.log(currentValue,currentIndex) 
  // 'apple', 0
  // 'banana', 1
  // 'citron', 2
  return currentValue.length > 5 ? currentValue : false
})

console.log(newArr) // [ false, 'banana', 'citron' ]

4) filter(CB)

CB는 map()메서드와 동일하다. 조건을 걸어 해당 조건이 참일때 값만 모은 배열을 리턴한다.

const arr = ['apple','banana','citron']
const newArr = arr.filter((currentValue, currentIndex)=>{
  // 여기에 할 것 ~
return currentValue.length > 5
})
console.log(newArr) // [ 'banana', 'citron' ]

5) reduce(CB,초기값)

reduce()의 CB는 map(), filter()와는 조금 다르다.

• 누산기 역할의 매개변수가 1번 인자로 위치
• 초기값에 배열순회하며 리턴되는 값을 누적하여 최종 리턴함

arr.reduce((acc,currentValue,currentIndex,originArray)=>{
  console.log('리듀스',{acc,currentValue,currentIndex,originArray})
},'')

// '리듀스' {
//   acc: '',
//   currentValue: 'a',
//   currentIndex: 0,
//   originArray: [ 'a', 'b', 'c', 'd' ]
// }
// '리듀스' {
//   acc: undefined,
//   currentValue: 'b',
//   currentIndex: 1,
//   originArray: [ 'a', 'b', 'c', 'd' ]
// }
// '리듀스' {
//   acc: undefined,
//   currentValue: 'c',
//   currentIndex: 2,
//   originArray: [ 'a', 'b', 'c', 'd' ]
// }
// '리듀스' {
//   acc: undefined,
//   currentValue: 'd',
//   currentIndex: 3,
//   originArray: [ 'a', 'b', 'c', 'd' ]
// }

리듀서 구현 예

reduce()를 사용하다보면 누산기 acc의 값을 직접적으로 변형하기도 하고, 객체 불변성을 유지하며 새로운 값을 리턴할수 도 있다. 객체 불변성을 유지하는 방식으로 작성하는 것이 side effect를 만들지 않고, 코드의 복잡도와 버그 발생확률을 낮칠수 있다.

const reducer = arr => arr
.reduce((acc, curr) => {
  const { key, value } = curr;
  
  // acc를 직접 변형하는 방식
  acc[key] = value;
  return acc

  // acc를 변형하지 않고 새로운 객체 리턴하는 방식
  return {
    ...acc,
    [key]: value,
  }
}, {});

5) 예외 :forEach()

forEach() 메서드는 원본 배열을 수정하지 않고 순회만 하며, 새로운 배열이 아닌 undefined 리턴한다. for문을 간편하게 쓰는 메서드!

• 리턴 : undefined
• 원본 배열 수정 : X

3. 메서드 체이닝(method chaining)

변형 배열를 반환하는 메서드는 메서드 체이닝을 할 수 있다~~

const arr = [1,10,100,200,300]
const result = arr
                .filter(data => data > 100)
                .map(data=>data.toString())
console.log(result) // [ '200', '300' ]