[JavaScript] 배열

배열이란?

배열

• 데이터를 순서대로 저장하는 객체
• 인덱스로 요소에 접근
• 다양한 데이터 처리 구현

배열의 특징

• 0부터 시작하는 인덱스를 기반으로 함
• 동적인 크기, 크기가 고정되어 있지 않음
• 다양한 데이터 타입 저장 가능
• 유연한 데이터 구조로,
  리스트 or 스택 or 큐 등의 자료구조를 간단히 구현 가능
• 반복문과 메서드로 효율적인 데이터 처리 가능

---

배열 기본 작성

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

---

배열 메서드

push()

• 배열의 마지막에 요소 추가

    let arr1 = [1, 2, 3];
    arr1.push("10");            // [1, 2, 3, "10"]
    arr1.push("딸기, 복숭아");  // [1, 2, 3, "10", "딸기", "복숭아"]
  

pop()

• 배열의 마지막에 있는 요소 제거

    let arr2 = [1, 2, 3];
    arr2.pop();     // [1, 2]
  

unshift()

• 배열의 맨 앞에 요소 추가

    let arr3 = [1, 2, 3];
    arr3.unshift(4);  // [4, 1, 2, 3]
  

shift()

• 배열의 맨 앞에 있는 요소 제거

    let arr4 = ["갈비", "삼겹살", "껍데기"];
    arr4.shift();     // ["삼겹살, "껍데기"]
  

map()

• 배열의 요소를 순회하며, 콜백함수를 적용하여 새로운 배열 생성
• 원본 배열 그대로, 항상 새로운 배열 반환

    let arr5_1 = [1, 2, 3, 4, 5];
    let arr5_2 = arr5_1.map((i) => i * i);
    // [1, 4, 9, 16, 25]
            
    let arr5_3 = ["이재건", "손흥민", "김민재"];
    let arr5_4 = arr5_3.map((i) => `${i}님`);
    // ["이재건님", "손흥민님", "김민재님"]
  

filter()

• 조건(콜백함수)에 맞는 요소를 선택 반환

    let arr6_1 = [11, 12, 13, 14, 15];
    let arr6_2 = arr6_1.filter((i) => i % 2 === 0);
    // [12, 14]
      
    let arr6_3 = [
    	{ name: "이재건", point: 150 },
    	{ name: "손흥민", point: 180 },
    	{ name: "김민재", point: 170 },
    ];
    let arr6_4 = arr6_3.filter((i) => i.point > 150);
    // [{ name: "손흥민", point: 180 }, { name: "김민재", point: 170 }]
  

sort()

• 배열 안의 요소를 정렬

    let arr7_1 = [10, 12, 1, 8, 5];
    arr7_1.sort((a, b) => a - b);
    console.log("오름차순 정렬: " + arr7_1);
    // 오름차순 정렬: 1,5,8,10,12
      
    arr7_1.sort((a, b) => b - a);
    console.log("내림차순 정렬: " + arr7_1);
    // 내림차순 정렬: 12,10,8,5,1
      
    const arr7_2 = ["바나나", "포도", "감", "사과"];
    arr7_2.sort();
    console.log("알파벳 정렬: " + arr7_2);
    // 알파벳 정렬: 감,바나나,사과,포도
      
    arr7_2.sort((a, b) => a.length - b.length);
    console.log("길이순 정렬: " + arr7_2);
    // 길이순 정렬: 감,사과,포도,바나나
  

reverse()

• 배열 안의 요소를 뒤집어서 반환

    const arr8_1 = [10, 20, 30, 40, 50];
    arr8_1.reverse();
    // [50, 40, 30, 20, 10]
      
    const arr8_2 = ["안녕하세요.", "저는", "이재건입니다."];
    arr8_2.reverse();
    // ['이재건입니다.', '저는', '안녕하세요.']
  

join()

• 배열 안의 요소를 하나의 문자열로 합쳐서 반환

    const arr9_1 = [10, 20, 30, 40, 50];
    const str9_1 = arr9_1.join(" ");
    // 10 20 30 40 50 문자열 반환
      
    const arr9_2 = ["안녕하세요", "저는", "이재건입니다"];
    const str9_2 = arr9_2.join();
    // 안녕하세요,저는,이재건입니다 문자열 반환
  

split()

• 문자열을 특정 구분자를 기준으로 나누어서 배열로 반환

    const spt10_1 = "안녕하세요. 저는 이재건입니다.";
    const arr10_1 = spt10_1.split(" ");
    // ["안녕하세요.", "저는", "이재건입니다."]
      
    const spt10_2 = "바나나,포도,감,사과";
    const arr10_2 = spt10_2.split(",");
    // ['바나나', '포도', '감', '사과']
      
    const spt10_3 = "안녕하세요.";
    const arr10_3 = spt10_3.split("");
    // ['안', '녕', '하', '세', '요', '.']
  

reduce()

• 배열의 각 요소에 대해 주어진 콜백 함수를 실행하고, 하나의 누적된 결과를 반환

    const arr11 = [
    	{ item: "우유", price: 2000 },
    	{ item: "빵", price: 3000 },
    	{ item: "사과", price: 1500 },
    ];
    const arr11_res = arr11.reduce((total, current) => total + current.price, 0);
    console.log(arr11_res);
  

… 연산자 (스프레드 문법)

• 데이터를 개별요소로 분해하거나 복사할 때

    const arr12 = [1, 2, 3];
    const arr12_new = [...arr12, 4, 5];
    // [1, 2, 3, 4, 5]
      
    const ins12 = { name: "손흥민", age: 34 };
    const ins12_new = { ...ins12, job: "축구선수" };
    // {name: '손흥민', age: 34, job: '축구선수'}
  

• 전개 연산자로 복사한 복사본은 원본과 독립적인 배열이다!

    const origin = [1, 2, 3];
    const copy = [...origin];
      
    console.log(copy);
    console.log(origin === copy);  // false