배열

1️⃣ 앞, 뒤, 주어진 특정 인덱스 위치에 요소 추가하기

✔️요소
사전적 의미 : 무엇을 이루는 데 반드시 있어야 할 중요한 성분, 조건
요소 : 웹 페이지 구성

1. 배열의 앞에 요소 추가하기

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

unshift() 메서드를 사용

let arr = [2, 3, 4];
arr.unshift(1);
console.log(arr);  // [1, 2, 3, 4]

2. 배열의 뒤에 요소 추가하기

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/push

push() 메서드를 사용

let arr = [1, 2, 3];
arr.push(4);
console.log(arr);  // [1, 2, 3, 4]

3. 주어진 특정 인덱스에 요소 추가하기

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

splice() 메서드를 사용

let arr = [1, 2, 4];
arr.splice(2, 0, 3);  // 인덱스 2에 숫자 3 추가
console.log(arr);  // [1, 2, 3, 4]

splice(인덱스, 삭제할 개수, 추가할 요소)를 사용하면 특정 위치에 요소를 추가

✔️메소드 vs index 사용 차이
(1) 메서드(Method) 사용
메서드는 문자열(String), 배열(Array) 등이 기본적으로 제공하는 내장 함수(Built-in Function)이다.


예제 (문자열)

let text = "hello world";
console.log(text.toUpperCase());  // "HELLO WORLD"
console.log(text.replace("hello", "hi"));  // "hi world"
console.log(text.slice(0, 5));  // "hello"

예제 (배열)

let numbers = [1, 2, 3, 4];
numbers.push(5);  // [1, 2, 3, 4, 5]  (배열 마지막에 추가)
numbers.pop();  // [1, 2, 3, 4]  (배열 마지막 요소 제거)
numbers.splice(1, 1);  // [1, 3, 4]  (인덱스 1의 요소 제거)

장점
1. 가독성이 좋음 → 코드의 의미를 쉽게 이해할 수 있음.
2. 안전성 보장 → 내부적으로 예외 처리를 포함한 기능이 많음.
3. 다양한 기능 지원 → 정렬, 필터링 등 복잡한 연산도 간단하게 수행 가능.

단점
1. 성능 오버헤드 발생 가능 → 내부적으로 연산이 추가될 수 있음.
2. 새로운 배열/문자열 반환 → 일부 메서드는 원본을 수정하지 않고 새로운 값을 반환하여 메모리를 추가로 사용할 수 있음.

(2) 인덱스(Index) 직접 사용
문자열이나 배열에서 특정 요소를 가져오거나 변경할 때 직접 인덱스를 사용할 수 있다.
예제 (문자열)

let text = "hello";
console.log(text[1]);  // "e"

예제 (배열)

let numbers = [10, 20, 30, 40];
console.log(numbers[2]);  // 30
numbers[2] = 99;  // 값 변경 가능
console.log(numbers);  // [10, 20, 99, 40]

장점
1. 빠른 접근 속도 → 인덱스를 직접 사용하면 메서드 호출보다 빠름.
2. 메모리 절약 가능 → 추가적인 객체 생성 없이 원본 데이터에 접근 가능.
3. 배열 값 변경 가능 → 특정 요소만 수정할 수 있음.

단점
1. 안전성이 낮음 → 존재하지 않는 인덱스에 접근하면 undefined 반환됨.
2. 가독성이 낮아질 수 있음 → 복잡한 연산을 수행할 경우 코드가 직관적이지 않을 수 있음.
3. 문자열은 수정 불가 → 문자열(String)은 불변(Immutable)이므로 인덱스로 직접 값을 변경할 수 없음.

let text = "hello";
text[0] = "H";  // 문자열은 직접 수정할 수 없음
console.log(text);  // "hello" (변경되지 않음)

정리: 메서드 vs 인덱스 직접 접근

구분	메서드 사용	인덱스 직접 사용
가독성	직관적이고 이해하기 쉬움	코드가 복잡해질 가능성
안전성	예외 처리 내장	존재하지 않는 인덱스 접근 시 undefined
성능	약간의 오버헤드 가능	직접 접근이 더 빠를 수 있음
메모리 사용	일부 메서드는 새로운 객체 생성	불필요한 객체 생성을 피할 수 있음
값 변경 가능성	문자열 변환 가능 (replace, slice 등)	문자열은 직접 변경 불가

---

2️⃣ 주어진 인덱스 위치에 요소를 가져오기/찾기

arr[index]를 사용

let arr = [10, 20, 30, 40];
console.log(arr[2]);  // 30

const arr = [1,2,3];

const num = (arr[]);
// 배열이 객체니깐, 문자열 
console.log(num);

// SyntaxError : Unexpected token

✔️token?
유니크한 정보를 담은 암호화 데이터

✔️속성
키와 값 쌍으로 연결하는 객체 구성원
임의의 자바스크립트 값이 될 수 있다

✔️객체
여러 개의 속성을 갖는 데이터 타입
속성 모음을 저장하는 데이터 구조(속성 컬렉션)
k:v
자바스크립트에서의 객체 : 유일한 변경 가능한 값

const obj = {
  a: 1,
  b() {},
};

obj 객체 : 2개의 속성을 가진다
1번째 속성 - 키“a” : 1
2번째 속성 - 메서드“b” : 함수{}

3️⃣ 주어진 인덱스 위치의 요소 삭제하기

splice() 메서드를 사용
splice(인덱스, 삭제 개수)

let a = [10, 20, 30, 40, 50];
a.splice(2, 1);  // 인덱스 2의 요소(30) 삭제
console.log(a);  // [10, 20, 40, 50]

4️⃣ 주어진 인덱스 위치의 요소 변경하기

직접 인덱스에 변경하기
메소드..?

arr[인덱스] = 새로운 값

let a = [10, 20, 30, 40];
a[2] = 200;  // 인덱스 30 → 100으로 변경
console.log(a);  // [10, 20, 200, 40]

✔️점표기법, 대괄호 표기법
점표기법 : 객체이름.key
객체이름.추가할 key = ‘추가할 value’

let userData = {
  	name: 'Jane',
  	age: '25',
  	gender: 'Male'
}
userData.name // 'Jane'
userData.age // '25'
userData.gender // 'Male'
// ⭐️
userData.email = 'user01@email.com'

대괄호 표기법 : 객체이름[’key’]
객체이름[’추가할 key’] = ‘추가할 value’

let userData = {
  	name: 'Jane',
  	age: '25',
  	gender: 'Male'
}
userData['name'] // 'Jane'
userData['age'] // '25'
userData['gender'] // 'Male'
// ⭐️
userData['email'] = 'user01@email.com'

5️⃣ 중첩 배열 (2차원 배열) 다루기

✔️중첩 배열(nested array)
2차원 배열은 중첩 배열 한 종류
배열 안의 배열

let alist = [1, 2, 3, [4, 5]];

console.log(alist.length);   // 4
console.log(alist[3]) ;      // [4, 5]
console.log(alist[3][1]);    // 5

let a = [
    [0, 1, 0, 0],
    [0, 0, 1, 0],
    [1, 0, 0, 1]
];
// 이런 형식들을 중첩모드라고 한다

❓그럼 3차원 배열도 있나?
여러 층을 가진 배열

let b = [
    [
        [0, 1, 0],
        [0, 0, 1],
        [1, 0, 0]
    ],
    [
        [1, 0, 1],
        [1, 1, 0],
        [0, 1, 1]
    ],
    [
        [0, 0, 0],
        [1, 1, 1],
        [0, 1, 0]
    ]
];

✔️list vs set vs map
자바스크립트에서 컬렉션 타입이다.
list : 배열(array)
set : 집합
map : 키값(key-value)

1. 배열(Array, 리스트)
   배열은 가장 기본적인 리스트 형태의 자료구조로, 값들을 순서대로 저장하는 구조이다.
   특징

• 중복 허용: 동일한 값을 여러 번 가질 수 있음
• 순서 유지: 삽입한 순서를 유지
• 인덱스 기반 접근: 숫자 인덱스를 사용하여 값에 접근 가능

let arr = [1, 2, 3, 3, 4];
console.log(arr[2]); // 3

2. 집합(Set)
Set은 유일한 값만 저장할 수 있는 자료구조입니다.
특징

• 중복 허용 안 함: 같은 값을 여러 번 추가할 수 없음
• 순서 유지 X: 특정한 순서를 따르지 않음
• 인덱스 없음: 배열처럼 특정 위치의 값을 가져올 수 없음

let mySet = new Set([1, 2, 3, 3, 4]);
console.log(mySet); // Set {1, 2, 3, 4}
console.log(mySet.has(2)); // true

3. 맵(Map)
Map은 키-값 쌍을 저장하는 자료구조입니다.
특징

• 키-값 형태: 각 값(value)에 대해 고유한 키(key)를 가짐
• 순서 유지: 삽입된 순서를 기억
• 모든 타입의 키 사용 가능: 객체, 숫자, 문자열 등 다양한 키 타입 허용

let myMap = new Map();
myMap.set("name", "Alice");
myMap.set("age", 25);
console.log(myMap.get("name")); // Alice

4. 비교 요약표

특징	Array(배열)	Set(집합)	Map(맵)
중복 허용	가능	불가능	가능
순서 유지	유지	보장X	유지
키 사용	인덱스	없음	키-값
접근 방식	인덱스(arr[i])	set.has(value)	map.get(key)
주로 사용	리스트, 순서가 중요한 데이터	중복 제거, 빠른 검색	키-값 저장, 객체 대체

---

언제 사용하면 좋을까?

• 배열(Array) → 리스트, 순서가 중요한 데이터
• 집합(Set) → 중복을 제거해야 할 경우
• 맵(Map) → 키-값 형태의 데이터를 저장할 때

(1) 중첩 배열에 요소 추가하기

push(), unshift(), splice()를 사용

let arr = [[1, 2], [3, 4]];

// 2차원 배열의 1번째 배열에 값 추가
arr[0].push(99);
console.log(arr);  // [[1, 2, 99], [3, 4]]

// 지정하지 않고 그냥 push하면 새 배열을 추가 (배열 자체에 push)
arr.push([5, 6]);
console.log(arr);  
// [[1, 2, 99], [3, 4], [5, 6]]

let arr = [[1, 2], [3, 4], [5, 6]];

// 1번째 위치에 새로운 배열 추가
arr.splice(1, 0, [7, 8]);

console.log(arr);
// [[1, 2], [7, 8], [3, 4], [5, 6]]  (새로운 배열이 두 번째 위치에 삽입됨)

let arr = [[1, 2], [3, 4], [5, 6]];

// 1번째 배열([3, 4])를 [9, 10]으로 변경
arr.splice(1, 1, [9, 10]);

console.log(arr);
// [[1, 2], [9, 10], [5, 6]]

(2) 중첩 배열에서 요소 삭제하기

splice(), pop() 사용

let arr = [[1, 2, 3], [4, 5, 6]];

// 특정 위치의 요소 삭제 (1번째 배열에서 인덱스 2개 삭제)
arr[0].splice(1, 2);
console.log(arr);  // [[1], [4, 5, 6]]

// 배열 삭제
arr.pop();
arr[0].pop();
console.log(arr);

(3) 중첩 배열에서 요소 변경하기

arr[행][열] = 값 형태로 사용

let arr = [[1, 2, 3], [4, 5, 6]];

// 2번째 배열의 인덱스 1 → 1000로 변경
arr[1][1] = 1000;
console.log(arr);  // [[1, 2, 3], [4, 1000, 6]]

(4) 중첩 배열에서 요소 조회하기

arr[행][열]을 사용

let arr = [[1, 2, 3], [4, 5, 6]];

// 2번째 배열의 2번째 요소 조회
console.log(arr[1][1]);  // 5