[JavaScript] 배열(Array)이란, 요소 추가 및 제거

---

1.  배열 Array

배열명["값1", "값2", ...]
배열명[] // 빈 배열 선언

 

✏️  여러 자료를 하나로 묶어서 사용할 수 있는 특수한 자료형
✏️  배열은 대괄호[...]를 사용해 생성하고 내부의 값을 쉼표(,)로 구분해 입력
✏️  배열 내부에 들어있는 값을 요소 element 라고 함

        📁  하나의 배열에 여러가지 타입의 자료형이 요소가 될 수 있음
        📁  컴파일 계통의 언어(C, C++, JAVA)등은 하나의 배열이 동일한 타입의 자료형만 요소가 될 수 있음

✏️  자바의 배열 보다는 파이썬의 리스트에 가까움

 

    1. 자바 배열의 특징
    동일한 데이터 타입을 미리 지정된 개수 만큼 저장. 중괄호 사용.
    2. 파이썬 리스트의 특징
    다른 데이터 타입을 동적으로 추가 삭제 가능. 대괄호 사용.

 

  📌  요소에 접근하고 싶은 경우에는 인덱스를 사용
  📌  순서대로 0부터 시작해서 1씩 증가하는 정수를 라벨링

  📌  [ 배열이름.length ] 자바 스크립트에서 기본으로 제공하는 기능으로, 배열의 개수를 자동으로 반환

<script>
    let scores = [90, 80, 70, 60, 50];
    console.log(scores[1]); // 80

    /* 문자열도 문자의 배열 */
    const str = '안녕하세요';

    console.log(str[2]); // 하
    console.log(str.length); // 5
    console.log(str[str.length - 1]); // 요

    // 숫자 자료형, 문자열 자료형, 불린 자료형, 함수, 객체, 배열
    const array = [273, 'String', true, function () {}, {}, [273, 103]];
    console.log(array);
    // 0: 273 1: "String" 2: true 3: ƒ () 4: {} 5: (2) [273, 103]

</script>

 

---

2. 배열 요소 추가

배열 뒷 부분에 요소 추가 ; push() 메소드 사용

배열.push(요소)

<script>
    const todos = ['우유구매', '업무 메일 확인하기', '필라테스 수업'];
    console.log(todos); // (3) ['우유구매', '업무 메일 확인하기', '필라테스 수업']

    todos.push('저녁 식사 준비하기');
    todos.push('피아노 연습하기');

    // 배열의 뒷부분에 요소 2개가 추가됨
    console.log(todos); // (5) ['우유구매', '업무 메일 확인하기', '필라테스 수업', '저녁 식사 준비하기', '피아노 연습하기']

    // 배열은 참조변수라서 const 라도 값 변경이 가능.
    const fruitsA = ['사과', '배', '바나나'];
    fruitsA.push('망고');
    console.log(fruitsA); // (4) ['사과', '배', '바나나', '망고']

    // 재할당은 불가
    // fruitsA = ['우유구매', '업무 메일 확인하기', '필라테스 수업'];
    // Uncaught TypeError: Assignment to constant variable;
</script>

 

---

배열 뒷 부분에 요소 추가 ; 인덱스 사용

 

  📌  배열의 길이는 고정이 아니기 때문에 인덱스 번호를 사용해서 강제로 요소를 추가할 수 있음

<script>
    const fruitsA = ['사과', '배', '바나나'];
    fruitsA[10] = '귤'; // 배열의 길이는 3개, 마지막 요소의 인덱스는 2번인데 10번 인덱스를 강제로 입력.

    // 4 ~ 10 번째 요소는 아무것도 없음
    console.log(fruitsA); // (11) ['사과', '배', '바나나', 비어 있음 x 7, '귤']

    const fruitsB = ['사과', '배', '바나나'];

    // length 속성 사용
    fruitsB[fruitsB.length] = '귤';

    console.log(fruitsB); // ['사과', '배', '바나나', '귤']
</script>

 

---

배열의 특정 위치에 요소 추가 ; splice() 메소드 사용 

배열.splice(인덱스, 제거할 요소의 수, 요소);

 

  📌  1번째 매개변수인 인덱스는 필수이고 제거할 요소의 수와 삽입할 요소는 생략 가능

  📌  2번째 매개변수인 제거할 요소의 수: 배열 안의 인덱스 요소부터 삭제 ▶️ 생략시 끝까지 삭제

         ⚡️ 2번째 매개변수에 0을 입력하면 splice() 메소드가 요소를 삭제하지는 않고, 3번째 매개변수에 있는 요소를 추가함

  📌  3번째 매개변수인 요소는 추가할 값을 입력

<script>
    const items = ['사과', '귤', '바나나', '오렌지'];
    console.log(items); // (4) ['사과', '귤', '바나나', '오렌지']

    items.splice(1, 0, '양파'); // 1번 인덱스에 요소를 추가.
    console.log(items); // (5) ['사과', '양파', '귤', '바나나', '오렌지']

    // 요소를 변경하고 싶은 경우
    items[1] = '키위';
    console.log(items); // (5) ['사과', '키위', '귤', '바나나', '오렌지']
</script>

 

---

3.  배열 요소 제거

 인덱스 기반으로 제거

    📌  배열의 특정 인덱스에 있은 요소를 제거할 때는 splice() 메소드를 사용

배열.splice(인덱스, 제거할 요소의 개수)

<script>
    const fruitsA = ['사과', '배', '바나나'];
    console.log(fruitsA); // (3) ['사과', '배', '바나나']

    fruitsA.splice(2, 1); // 배열의 2번째 인덱스로 부터 1개 요소를 제거
    console.log(fruitsA); // (2) ['사과', '배']
</script>

 

---

 값으로 요소 제거

    📌  배열 내부에서 특정 값의 위치를 찾는 indexOf() 메소드를 사용해서 값의 위치를 추출한 후,
          splice() 메소드를 사용해서 제거

    📌  indexOf() 매개변수에 배열에 없는 요소를 넣은 경우 -1을 반환

const 인덱스 = 배열.indexOf(요소);
배열.splice(인덱스, 1);

<script>
    const fruits = ['사과', '배', '바나나'];

    const index = fruits.indexOf('바나나'); // 바나나를 값으로 가지는 인덱스 구함.
    console.log(index); // 2

    fruits.splice(index, 1);
    console.log(fruits); // (2) ['사과', '배']

    console.log(fruits.indexOf('바나나')); // 배열에 없는 경우 -1을 출력
    if (fruits.indexOf('바나나') >= 0) {
        fruits.splice()
    }
</script>

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]