[JS] 객체의 종류 - 배열 (1)

📌 객체의 종류

---

• 객체(object)의 종류는 크게 배열(array), 함수(function), 배열이나 함수가 아닌 객체로 나눌 수 있다.
  

✔️ 배열 생성하기, 인덱스로 값 불러오기

---

const fruits = ['apple', 'orange', 'banana', 'strawberry'];

fruits[0];
< 'apple'
fruits[1];
< 'orange'
fruits[2];
< 'banana'
fruits[3];
< 'strawberry'

• 배열 안 값의 자료형은 모두 같지 않아도 된다.
  ( ※ 필요하다면 객체나 함수도 배열의 요소가 될 수 있다.)
• 값은 중복되어도 되고, 아무런 값이 없어도 된다.

const everything = ['apple', 1, [1, 2, 3], undefined, true, null];
const duplicated = [1, 1, 1, 1, 1];
const empty = [];

✔️ 배열의 요소 개수 구하기, 특정 요소 불러오기

---

• 배열 이름 뒤에 .length 붙이기
• 배열의 요소 개수는 항상 마지막 인덱스보다 1 크다.
• 마지막 요소 인덱스 = 배열 요소 개수 - 1

const everything = ['apple', 1, [1, 2, 3], undefined, true, null];

everything.length; // 6
everything[everything.length - 1]; // null

• at()을 사용하면 간단하게 특정 요소를 불러올 수 았다.
  • -1 같은 음수 인덱스는 at() 메서드에서만 공식적으로 지원된다. (대괄호 접근 방식에서는 쓸 수 없음)
  • at()은 문자열에도 사용 가능하다.

const findElement = [1, 2, 3, 4, 5];

findElement.at(4); // 5
findElement.at(-1); // 5

'hello'.at(-1); // 'o'

✔️ 배열에 요소 추가하기

---

1. 마지막 요소 추가하기 → 인덱스로 직접 추가 / push()

const target = ['a', 'b', 'c', 'd', 'e'];

// 1.
target[5] = 'f';
// 2.`
target[target.length] = 'f';
// 3.
target.push('f');

target; // (6) ['a', 'b', 'c', 'd', 'e', 'f'];

2. 첫번째 요소 추가하기 → unshift()

const target = ['나', '다', '라', '마'];

target.unshift('가');

target; // (5) ['가', '나', '다', '라', '마'];

• target[0]을 쓰면 이미 있던 첫번째 요소가 변경되어 버린다.

target[0] = '가';

target; // (5) ['가', '다', '라', '마'];

3. 중간 요소 추가하기 → splice()

• (아래에 자세히)

✔️ 배열에서 요소 삭제하기

---

1. 마지막 요소 삭제하기 → pop()

const target = ['a', 'b', 'c', 'd', 'e']

target.pop();
target; // (4) ['a', 'b', 'c', 'd']

2. 첫번째 요소 삭제하기 → shift()

const target = ['a', 'b', 'c', 'd', 'e']

target.shift();
target; // (4) ['b', 'c', 'd', 'e']

3. 중간 요소 삭제하기 → splice()

const target = ['a', 'b', 'c', 'd', 'e']

target.splice(2, 2); // (시작 인덱스, 삭제할 요소 개수)
target; // (3) ['a', 'b', 'e']

target.splice(1); // 숫자 하나만 -> 해당 인덱스부터 배열 끝까지 모두 삭제
target; // (1) ['a']

target.splice(1, 3, '가', '나'); // 삭제한 자리에 다른 값 넣기
target; // (4) ['a', '가', '나', 'e']

target.splice(1, 0, '가'); // 0개 요소 삭제하고 '가'를 추가
target; // (6) ['a', '가', 'b', 'c', 'd', 'e']