[JavaScript] 배열 Array

랭킹, 책의 시리즈물, 지하철 노선 등 순서가 있는 여러 값들의 묶음
또는 순서 없이도 단순히 여러 값의 묶음이 필요한 경우에도 활용 가능
✔️ 배열(array)이름 = [요소1(element), 요소2, 요소3 ...]

📝 요소 호출

✔️ 배열[인덱스 번호]

• 인덱싱(indexing)으로 각 요소를 호출할 수 있음
  ❉ 인덱스 번호는 0번 부터 시작됨 주의

let 해리포터시리즈 = ['해리포터와 마법사의 돌',  // 해리포터시리즈[0]
               '해리포터와 비밀의 방',      // 해리포터시리즈[1]
               '해리포터와 아즈카반의 죄수', // 해리포터시리즈[2]
               '해리포터와 불의 잔',      // 해리포터시리즈[3]
               '해리포터와 불사조 기사',   // 해리포터시리즈[4]
               '해리포터와 혼혈왕자',     // 해리포터시리즈[5]
               '해리포터와 죽음의 성물'];  // 해리포터시리즈[6]  

console.log( 해리포터시리즈[0]);  //'해리포터와 마법사의 돌'

💡 console.table(배열)

보기 쉽도록 배열이 표로 출력됨

console.table(해리포터시리즈)
/*
┌─────────┬──────────────────────────────┐
│ (index) │            Values            │
├─────────┼──────────────────────────────┤
│    0    │   '해리포터와 마법사의 돌'   │
│    1    │    '해리포터와 비밀의 방'    │
│    2    │ '해리포터와 아즈카반의 죄수' │
│    3    │     '해리포터와 불의 잔'     │
│    4    │   '해리포터와 불사조 기사'   │
│    5    │    '해리포터와 혼혈왕자'     │
│    6    │   '해리포터와 죽음의 성물'   │
└─────────┴──────────────────────────────┘
*/

📌이후 아래 예시들은 모두 해리포터시리즈 배열에서 참조

📝 배열의 타입 : 객체 (object)

여러 프로퍼티와 매서드를 활용할 수 있다

📝 배열의 길이(=배열 안 요소들의 개수) 확인

✔️ 배열이름.length 또는 ✔️ 배열이름['length']

console.log(해리포터시리즈.length); // 7
console.log(해리포터시리즈['length']); //7

//마지막 요소 확인을 배열의 길이를 이용해서도 가능
console.log(해리포터시리즈[해리포터시리즈.length - 1]); //'해리포터와 죽음의 성물'

📝 요소 추가 / 수정

✔️ 배열이름[지정하려는 인덱스 번호] = 요소

• 존재하지 않는 인덱스 번호 호출 시 : undefined 출력
• 연속하지 않는 인덱스 숫자로 (건너뛰어) 추가하면 지정되지 않은 인덱스의 요소는 비워둔 채 ('empty') 배열의 길이가 늘어난다

console.log(해리포터시리즈[9]); // undefined

해리포터시리즈[9] = '신비한 동물사전';
console.log(해리포터시리즈[9]); // 신비한 동물사전

console.log(해리포터시리즈.length); // 10
console.log(해리포터시리즈); 
/*   [
      '해리포터와 마법사의 돌',
      '해리포터와 비밀의 방',
      '해리포터와 아즈카반의 죄수',
      '해리포터와 불의 잔',
      '해리포터와 불사조 기사',
      '해리포터와 혼혈왕자',
      '해리포터와 죽음의 성물',
      <2 empty items>,
      '신비한 동물사전'
	]  */

📝 요소 삭제 (+ 추가도 가능)

✔️ delete 배열[삭제하려는 인덱스] 를 사용할 경우 삭제된 요소의 자리가 empty로 남아있음

delete 해리포터시리즈[9];
console.log(해리포터시리즈);  
/* empty 로 남아있음
[
  '해리포터와 마법사의 돌',
  '해리포터와 비밀의 방',
  '해리포터와 아즈카반의 죄수',
  '해리포터와 불의 잔',
  '해리포터와 불사조 기사',
  '해리포터와 혼혈왕자',
  '해리포터와 죽음의 성물',
  <3 empty items>
]    */

console.log(해리포터시리즈.length)    // 10;

splice를 사용하여 완전히 삭제 가능
✔️ 배열.splice(인덱스 1) '인덱스1'의 이후 번호의 모든 요소 삭제
✔️ 배열.splice(시작할 인덱스1, 삭제하려는 개수) '시작할 인덱스1' 부터 '삭제하려는 개수'만큼 요소 삭제
✔️ 배열.splice(시작할 인덱스1, 삭제하려는 개수, 추가할 요소) 삭제된 자리에 '추가할 요소'를 추가

해리포터시리즈.splice(7);
// 해리포터시리즈[7], 해리포터시리즈[8], 해리포터시리즈[9] 모두 삭제
consol.log(해리포터시리즈);
/*   
	[
      '해리포터와 마법사의 돌',
      '해리포터와 비밀의 방',
      '해리포터와 아즈카반의 죄수',
      '해리포터와 불의 잔',
      '해리포터와 불사조 기사',
      '해리포터와 혼혈왕자',
      '해리포터와 죽음의 성물'
    ]   */
consol.log(해리포터시리즈.length);  // 7

해리포터시리즈.splice(0, 2);
console.log(해리포터시리즈);
/*   [
      '해리포터와 아즈카반의 죄수',
      '해리포터와 불의 잔',
      '해리포터와 불사조 기사',
      '해리포터와 혼혈왕자',
      '해리포터와 죽음의 성물'
     ]  */

해리포터시리즈.splice(0, 0, '해리포터와 마법사의 돌', '해리포터와 비밀의 방');
// 해리포터시리즈[0] 첫 번째 요소부터 0개만큼 삭제하고, 0번째 자리에 요소를 추가
console.log(해리포터시리즈);
/* 
	[
      '해리포터와 마법사의 돌',
      '해리포터와 비밀의 방',
      '해리포터와 아즈카반의 죄수',
      '해리포터와 불의 잔',
      '해리포터와 불사조 기사',
      '해리포터와 혼혈왕자',
      '해리포터와 죽음의 성물'
    ] 
*/