배열관련 메소드💡

---

🧡원본배열에 손상을 주지않는 메소드

💛.length

• 함수의 전체 길이를 반환

  const numbers = [1,2,3,4]

  console.log(numbers.length) // 4

💛.find(cb)

• 콜백함수 내 주어진 조건을 만족하는 첫번째 요소를 반환

  const numbers = [1,2,3,4]

  console.log(numbers.find((num) => num > 2) //3
  // num > 2 의 조건을 만족하는 요소가 여러개 이지만 첫번째 값만 반환 됨

💛.findIndex(cb)

• 콜백함수 내 주어진 조건을 만족하는 첫번째 요소의 인덱스값 반환

  const numbers = [1,2,3,4]

  console.log(numbers.findIndex((num) => num > 2) //2
  // 2보다 큰 요소 중 첫번째 요소인 3의 index값 => 2

💛.includes()

• 인자로 주어진 값과 일치하는 요소가 배열에 포함되어 있는지의 여부를 boolean데이터로 반환

  const numbers = [1,2,3,4]

  console.log(numbers.includes(3)) //true
  console.log(numbers.includes(6)) //false

💛.concat()

• 두개의 배열 데이터를 병합하여 하나의 데이터로 반환

  const abc = ['a', 'b', 'c']
  const def = ['d', 'e', 'f']

  console.log(abc.concat(def)) //['a', 'b', 'c', 'd', 'e', 'f']

💛.forEach(cb)

• 해당 배열의 요소의 갯수만큼 콜백함수가 반복실행됨
• 각 item, 각 index값, 전체배열이 인자로 주어집니다
• 반환되는 값은 없음

  const fruits = ["Apple","Banana","Cherry"]

  fruits.forEach((item, idx, arr) => {
    console.log(item, idx, arr)
  });
  /* 
    출력값
    Apple 0 [ 'Apple', 'Banana', 'Cherry' ]
    Banana 1 [ 'Apple', 'Banana', 'Cherry' ]
    Cherry 2 [ 'Apple', 'Banana', 'Cherry' ]
  */

• 결과값을 반환 할 수 없기때문에 값을 return해도 undefined를 반환한다

  const fruits = ["Apple","Banana","Cherry"]

  const fruit = fruits.forEach((item) => {
    return item
  });

  console.log(fruit) //undefined

💛.map(cb)

• 해당 배열의 갯수만큼 콜백함수가 반복실행됨
• 각 item 과 index값이 인자로 주어짐
• return값을 배열의 형태로 반환

  const fruits = ["Apple","Banana","Cherry"]

  const a = fruits.map((item,idx) => (
    return {
    item: item, 
    index: idx
    }
  ))

  console.log(a)
  /* 
    반환값
    [
      { item: 'Apple', index: 0 },
      { item: 'Banana', index: 1 },
      { item: 'Cherry', index: 2 }
    ]
  */

forEach()와 map()의 가장 큰 차이는 return하는 값이 있느냐 없느냐로 나눌 수 있다

💛.reduce()

• 대상 배열의 길이만큼 주어진 콜백을 실행 한 뒤, 누적값을 반환
• acc : 누적값
  cur : 현재 요소

const numbers = [1,2,3,4]

numbers.reduce((acc,cur) => acc + cur) // 10
// 1 + 2 + 3 + 4 = 10 반환

블로그에 reduce에 대해 더 자세히 기술한 포스트가 있습니다. Click!

💛.filter(cb)

• 콜백함수 내의 조건식에 true로 대응하는 요소만 배열에 담아 반환

  const numbers = [1,2,3,4]

  //map의 경우 비교연산자로 조건식 작성 시 boolean데이터로 값이 반환 됨
  const b = numbers.map((num) => num < 3) 
  console.log(b) //[ true, true, false, false ]

  //filter의 경우 true값으로 대응하는 요소를 배열에 담아 반환
  const c = numbers.filter((num) => num < 3) 
  console.log(c) //[ 1, 2 ]

💛.every()

• 모든 조건을 만족해야만 true를 return

  const arr = [1,2,3,4,5]
  
  arr.every((item) => item > 3) // false
  arr.every((item) => item < 6) //true

💛.some()

• 하나의 조건만 만족해도 true를  return

  const arr = [1,2,3,4,5]
  
  arr.some((item) => item > 3) // true
  arr.some((item) => item > 6) // false

💛Array.from(), Array.isArray()

• Array.from() : 유사배열을 실제 배열로 바꿔주는 정적메소드
• Array.isArray() : 해당 요소가 배열인지 아닌지 boolean값을 반환

// querySelectorAll() 로 선택해 온 요소들은 유사배열
const liEls = document.querySelectorAll('li');

console.log(liEls); //NodeList(8) [li, li, li, li, li, li, li, li]
console.log(Array.isArray(liEls)) //false


// Array.from() 을 통해 실제 배열로 전환
const arrLiEls = Array.from(liEls);

console.log(arrLiEls); //Array(8) [li, li, li, li, li, li, li, li]
console.log(Array.isArray(arrLiEls)) //true

---

🧡원본 배열이 수정되는 메소드

💛.push()

• 배열의 마지막 요소로 데이터를 삽입

  const numbers = [1,2,3,4]

  numbers.push(5)

  console.log(numbers) // [1, 2, 3, 4, 5]

💛.pop()

• 배열의 마지막 요소를 제거하고 그 요소를 반환

  const numbers = [1,2,3,4]

  console.log(numbers.pop()) //4
  console.log(numbers) // [1, 2, 3]

💛.shift()

• 배열의 첫번째 요소를 제거하고 그 요소를 반환

  const numbers = [1,2,3,4]

  console.log(numbers.pop()) //1
  console.log(numbers) // [2, 3, 4]

💛.unshift()

• 배열의 첫번째 요소로 데이터를 삽입

  const numbers = [1,2,3,4]

  numbers.unshift(0)

  console.log(numbers) // [0, 1, 2, 3, 4]

💛.sort()

• 대상 배열을 콜백의 반환값에 따라 정렬
• 두개의 인자 제공. (이전요소, 현재요소)
• 콜백을 제공하지 않으면 요소를 문자열로 변환하고 유니코드 코트 포인트 순서로 정렬

const numbers  = [4, 17, 21, 103, 1, 0, 78]

// 유니코드 포인트 순서 정렬 (숫자 앞자리 크기 순)
numbers.sort()
console.log(numbers) // [0, 1, 103, 17, 21, 4, 78]

//a - b 의 결과값이 음수면 a가 더 큰 수 , 양수면 b가 더 큰수 라는 법칙을 통해 숫자를 크기순 정렬
numbers.sort((a,b) => a - b)
console.log(numbers) // [0, 1, 4, 17, 21, 78, 103]

// b - a로 뒤집으면 큰수부터 작은 수 순서로 정렬
numbers.sort((a, b) => b - a)
console.log(numbers) // [103, 78, 21, 17, 4, 1, 0]

💛.reverse()

• 배열데이터를 거꾸로 뒤집어줌

  const numbers = [1,2,3,4]

  numbers.reverse()

  console.log(numbers) //[4, 3, 2, 1]

💛.splice()

• 배열을 원하는 위치(인덱스)에서부터 원하는 길이만큼 삭제
• 최소 3개의 인자를 넣을 수 있음

• 첫번째 인자 : 시작 index
• 두번째 인자 : 삭제할 요소의 갯수
• 세번째 인자 : 해당 자리에 추가 할 값 (옵셔널. 생략가능)
• 위에서 최소 3개의 인자를 넣을 수 있다고 했는데, 세번째 인자 이후로는 모두 추가할 값으로 인식됨

  const numbers = [1,2,3,4]

  //기본 사용법
  numbers.splice(2,1); //2번 아이템부터 1개의 아이템 삭제
  console.log(numbers) //[ 1, 2, 4 ]


  //현재 numbers 의 값 = [ 1, 2, 4 ]
  //삭제할 요소의 갯수를 0으로 지정하면 삭제되는 요소 없이 아이템 추가 가능
  numbers.splice(2, 0, 3); //2번 아이템부터 0개의 아이템 삭제, 3 추가
  console.log(numbers) //[ 1, 2, 3, 4 ]


  //현재 numbers 의 값 = [ 1, 2, 3, 4 ]
  //하나의 아이템을 제거하고 하나의 아이템을 추가하여 해당 요소를 교체
  numbers.splice(2, 1, 0); //2번 아이템부터 1개의 아이템 삭제, 0 추가
  console.log(numbers) //[ 1, 2, 0, 4 ]

---

마치며🙌

알고는 있지만 익숙하지 않아서 사용해 본 적이 없었던 메소드들은 이번 기회에 다시한번 사용법을 익히며 리마인드 되었고, 일부 메서드들은 익히 사용하던 것임에도 새롭게 다가왔다.
특히 forEach와 map가 어떤 상황에서 쓰이는지 그 차이를 그냥 느낌적(..)으로만 알고 있었는데 정확한 차이점을 처음으로 인지했다...!!
개발자에게 왜? 어떻게? 라는 궁금증은 계속해서 품고다녀야 하는 질문인것을 간과하고, 느낌적인 느낌으로만 익히고 사용하고 있었던 것은 아닐까..하며 나를 되돌아보게 된다...😶‍🌫️