배열

배열 기초

배열 = 순서(인덱스)가 있는 값(요소)

인덱스는 0부터 시작되는 Zero-based numbering

대괄호(square bracket)를 이용해서 만들고, 각각의 원소(element)는 쉼표로 구분

값은 인덱스를 이용해 접근

let myNumber = [73, 98, 86, 61, 96];

// “myNumber라는 배열의 3번째 인덱스” 값을 변경하려면

myNumber[3] = 200;

console.log(myNumber) // [73, 98, 86, 200, 96]

배열은 중첩하여 2차원, 3차원 배열을 만들 수 있음

myNumber = [[1, 2], [3, 4], [5, 6]];

myNumber[1][0] // 3

배열의 반복

반복문과 배열을 조합하는 경우가 많음

• 배열 arr의 모든 element 출력하기

  • 조건 1: 숫자(n)는 0부터 시작
  • 조건 2: 숫자(n)는 배열의 길이보다 작을 때까지 반복
  • 조건 3: 숫자(n)는 1씩 증가

  let arr = [73, 98, 86, 61];
  
  // 배열 내 모든 요소를 돌 때 공식처럼 사용하는 if문 조건식
  for (let i = 0; i < arr.length; i++) {
      console.log(arr[n]);
  }
  
  // 배열 내 요소만 필요하고 index를 활용하지 않아도 된다면 for of 문 사용
  // 위의 for 문과 출력은 동일하다
  for (let el of arr) {
      console.log(el);
  }

• 배열 arr의 모든 element를 누적해서 더하기

  • 조건 1: 0번째 인덱스부터 시작
  • 조건 2: 인덱스가 배열의 길이보다 작을 때까지 반복
  • 조건 3: 1씩 증가

  let arr = [10, 20, 40, 10];
  let sum = 0; // 모든 요소 더한 값을 넣어줄 변수 선언 및 초기값 할당
  
  for (let i = 0; i < arr.length; i++) {
      sum += arr[i];
  }
  
  console.log(sum); // 80

배열의 프로퍼티와 메소드

배열의 메소드는 크게 원본 배열이 변하지 않는(immutable) 불변성 메소드와 원본 배열이 변하는(mutable) 가변성 메소드로 나뉜다.

immutable 하게 리턴하는 메소드에는 arr.slice, arr.concat 등이 있고,
mutable 하게 리턴하는 메소드는 arr.push, arr.pop, arr.shift, arr.unshift, arr.splice 등이 있다.

배열 메소드를 사용할 땐 가변, 불변을 잘 구분해서 사용해야 의도한 대로 사용이 가능하다.

프로퍼티

.length: 배열의 길이 확인

const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']
console.log(numbers.length) // 4
console.log(fruits.length) // 3
console.log([1, 2].length) // 2
console.log([].length) // 0

Array의 내장 메서드

1. Array.isArray(arr): 배열인지 아닌지 판별하기

   • 배열은 typeof로 판별할 수 없음 (object로 나옴)

2. .push(), .unshift() mutable

   push() 메소드는 배열의 맨 뒤에 element(이하 el)을 삽입, unshift() 메소드는 배열의 맨 앞에 el을 삽입함

   const numbers = [1, 2, 3, 4]
   
   numbers.push(5)
   console.log(numbers) // [1, 2, 3, 4, 5]
   
   numbers.unshift(0)
   console.log(numbers) // [0, 1, 2, 3, 4, 5]

3. .pop(), .shift() mutable

   pop() 메소드는 배열의 마지막 el을 삭제, unshift() 메소드는 배열의 맨 앞 el을 삭제함

   const numbers = [0, 1, 2, 3, 4, 5]
   
   numbers.pop()
   console.log(numbers) // [0, 1, 2, 3, 4]
   
   numbers.shift()
   console.log(numbers) // [1, 2, 3, 4]

4. .indexOf()

   indexOf() 메소드는 인수로 사용되는 특정 데이터가 해당 배열의 몇 번째 인덱스인지 반환

   반환된 값이 -1인 경우, 해당 배열에 인수에 들어간 데이터가 포함되지 않은 것

   const fruits = ['Apple', 'Banana', 'Cherry']
   
   console.log(fruits.indexOf('Banana')) // 1
   console.log(fruits.indexOf('Pineapple')) // -1

5. .includes()

   includes() 메소드는 인수로 사용되는 특정 데이터가 해당 배열에 들어있는지 확인하여 불린 데이터로 반환함

   const numbers = [1, 2, 3, 4]
   const fruits = ['Apple', 'Banana', 'Cherry']
   
   console.log(numbers.includes(3)) // true
   console.log(fruits.includes('Pineapple')) // false

6. .concat() immutable
   

   concat() 메소드는 인자로 들어온 배열(혹은 값)들을 기존 배열에 합쳐 새 배열을 반환함

    const numbers = [1, 2, 3, 4]
    const fruits = ['Apple', 'Banana', 'Cherry']
    
    console.log(numbers.concat(fruits)) // (7) [1, 2, 3, 4, 'Apple', 'Banana', 'Cherry']

7. .slice immutable

   slice() 메소드는 해당 배열의 시작점부터 종료지점까지(종료지점 앞 인덱스까지) 잘라 새로운 배열을 반환함 → 이 때, 원본 배열은 바뀌지 않고 새로운 배열에 특정 범위가 복사 된다고 생각하면 됨!

    const numbers = [1, 2, 3, 4]
    
    // numbers 배열의 [0]번째 인덱스부터 [3]번째 인덱스 바로 앞([2])까지의 배열을 반환하여 sliceNums 변수에 할당
    let sliceNums = numbers.slice(0, 3)
    console.log(numbers) // [1, 2, 3, 4]
    console.log(sliceNums) // [1, 2, 3]
    

8. .splice() mutable

   splice() 메소드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경함

   • array.splice(배열 변경을 시작할 인덱스 번호, 배열에서 제거할 요소의 수, 배열에 추가할 요소)

   const numbers = [1, 2, 3, 4]
   const fruits = ['Apple', 'Banana', 'Cherry']
   
   // [2]번째 인덱스자리의 item부터 1개의 item을 삭제
   numbers.splice(2, 1)
   console.log(numbers) // [1, 2, 4]
   // [1]번째 인덱스자리에 'mango' item을 추가
   fruits.splice(1, 0, 'mango')
   console.log(fruits) // ['Apple', 'mango', 'Banana', 'Cherry']

9. .join() immutable

   join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듦
   인자로 들어온 문자열을 구분자로 사용하며, 생략하면 쉼표로 구분됨

    const fruits = ['Apple', 'Banana', 'Cherry'];
   
    console.log(fruits.join()); // Apple,Banana,Cherry
    console.log(fruits.join(" ")); // Apple Banana Cherry
    console.log(fruits.join("")); // AppleBananaCherry
    console.log(fruits); // ['Apple', 'Banana', 'Cherry']

10. .forEach()

    forEach() 메소드는 반환되는 값(return)이 없음

    const fruits = ['Apple', 'Banana', 'Cherry']
    
    fruits.forEach(function (fruit, index, array) {
      console.log(fruit, index)
    })
    // Apple 0
    // Banana 1
    // Cherry 2

11. .map()

    map() 메소드는 인수로 사용하는 콜백함수의 내부에서 반환되는 값으로 새로운 배열을 만들어 반환함

    const numbers = [1, 2, 3, 4]
    const fruits = ['Apple', 'Banana', 'Cherry']
    
    const b = fruits.map((fruit, index) => ({
      id: index,
      name: fruit
    }))
    console.log(b)
    /* 
    3) [{…}, {…}, {…}]
    0: {id: 0, name: 'Apple'}
    1: {id: 1, name: 'Banana'}
    2: {id: 2, name: 'Cherry'}
    length: 3
    */

12. .filter()

    filter() 메소드는 인수로 사용하는 콜백함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환함

    const numbers = [1, 2, 3, 4]
    
    const b = numbers.filter(number => number < 3)
    console.log(b)
    /*
    (2) [1, 2]
    0: 1
    1: 2
    length: 2
    */

13. .find(), .findIndex()

    const fruits = ['Apple', 'Banana', 'Cherry']
    
    const a = fruits.find(fruit =>  /^B/.test(fruit))
    console.log(a) // Banana
    
    const b = fruits.findIndex(fruit =>  /^B/.test(fruit))
    console.log(b) // 1

14. .reverse()

    reverse() 메소드는 원본 배열의 순서를 뒤집음

    • 원본이 수정되는 파괴적 처리

    const numbers = [1, 2, 3, 4]
    const fruits = ['Apple', 'Banana', 'Cherry']
    
    numbers.reverse()
    fruits.reverse()
    
    console.log(numbers) // [4, 3, 2, 1]
    console.log(fruits) // ['Cherry', 'Banana', 'Apple']

---

참고

console.table(): console.log()보다 시각적으로 볼 수 있음