[ JavaScript ] 자바스크립트의 배열 (생성 / 값 저장 / 조회 / 삭제)

하루입니다.

 

 

---

 

 

자바스크립트의 배열

• 길이가 가변적이다.
• 같은 타입의 값 혹은 다른 타입의 값을 저장할 수 있다.
• 자바의 ArrayList 객체와 유사하다.
• 자료구조와 관련된 다양한 메소드를 제공한다.  (저장, 검색, 삭제, 필터링, 매핑, 리듀싱, 정렬 등)

 

 

 

배열 객체의 주요 API

 

배열 생성하기

let 변수명 = [];
let 변수명 = [10, 20, 30, 40];
let 변수명 = [10, "가가", 30, "나나"];
let 변수명 = [['년도', '매출액', '영업이익'], [2020, '1조', '250억'], [2021, '5천억', '500억']];

모두 가능하다. 심지어 타입 달라도 상관 없음.

 

배열에 값 저장하기

1. index 사용해서 지정된 위치에 값 저장하기
     let names = [];
     names[0] = "가가";
     names[1] = "나나";
     names[100] = "다다";
     * names[2] ~ names[99]번째까지는 empty 상태다.

2. .unshift(값) 메소드를 이용해서 배열의 맨 앞에 새로운 값을 저장하기
     let names =["가가", "나나"]
     names.unshift("다다");
     * names 배열은 ["다다", "가가", "나나"]

3. .push(값) 메소드를 이용해서 배열의 끝에 새로운 값을 저장하기
     let names = [];
     names.push("가가");
     names.push("나나");
     names.push("다다");
     * names 배열 -> ["가가", "나나", "다다"]

4. .splice(index, howmany, item, item, item, item, ...)메소드로 배열에 값 추가하기
     * index ; 삭제 혹은 추가할 위치
     * howmany : 삭제할 갯수, 0으로 설정하면 삭제 없이 지정된 위치에 새로운 아이템을 추가한다. 
            그 위치에 있던 기존 값은 뒤로 이동한다.
     * item : 새로 추가한 값. item이 없으면 삭제 전용이다. 

     let numbers = [10, 20, 30, 40];
     numbers.splice(1, 0, 50, 60, 70);
     numbers배열 -> [10, 50, 60, 70, 20, 30, 40]가 된다.

     let numbers = [10, 20, 30, 40];
     numbers.splice(1, 2, 50, 60, 70);
     numbers배열 -> [10, 50, 60, 70, 40]가 된다.

 

 

 

 

배열의 값 조회하기

1. index를 이용해서 지정된 위치에 저장된 값을 조회하기
     let names = ["가가", "나나", "다다"];
     console.log(names[0]);
     console.log(names[0]);
     console.log(names[0]);

2. for문을 이용해서 배열에 저장된 값을 순서대로 조회하기
     let names = ["가가", "나나", "다다"];
     for (let i = 0; i < names.length; i++) {
         console.log(names[i]);
     }

 

배열의 값 삭제하기

배열의 마지막 값을 삭제하기
    let names = ["가가", "나나", "다다"];
    let name = names.pop();
    * name에는 "다다"가 대입된다.
    * names는 ["가가", "나나"]이 된다.

배열의 첫번째 값을 삭제하기
    let names = ["가가", "나나", "다다"];
    let name = names.shift();
    * name에는 "가가"가 대입된다.
    * names는 ["나나", "다다"]이 된다.

배열에서 지정된 위치의 값을 삭제하기
    .splice(index, howmany) 메소드는 지정된 index에서부터 howmany갯수만큼의 요소를 삭제한다.
    let names = ["가가", "나나", "다다", "라라"];
    names.splice(2, 1);  ->  2번째부터 하나 삭제한다.
        *  names는 ["가가", "나나", "라라"]가 된다.     

 

 

---

 

 

 

htmlContent += '<li>'+name+' <button onclick="deleteMember('+index+')">삭제</button></li>';

htmlContent += `<li>${name} <button onclick="deleteMember(${index})">삭제</button></li>`;

 

 

위의 방식을 아래의 방식으로 바꿨다. 위의 방식은 문자열 안에 ++를 써서 변수값을 넣는다면, 아래는 `백틱` 템플릿 문법을 사용했다. 뭔지 찾아봤더니 템플릿 리터럴이라고 하더라. `` 안에 ${변수값/표현식} 이런 식으로 사용한다.

 

---

 

 

 

잘못된 정보에 대한 지적은 언제나 환영입니다. 

 

복습 끝!