Today I Learned

오늘은 JS의 기본적인 자료구조 사용법에 대해 복습해보려 한다.

---

JavaScript 자료구조

• 일반적으로 자료구조 변수가 가리키는 참조값이 변경되지 않도록 contst로 선언한다.

배열(Array)

js에서 배열은 자바의 arraylist와 유사하게 동적으로 크기를 가진다.
그리고 다양한 타입의 요소를 저장할 수 있다. (타입안정성 x)

메서드	설명	예시
push()	배열 끝에 요소 추가	arr.push(4)
pop()	배열 끝 요소 제거 및 반환	const last = arr.pop()
unshift()	배열 시작에 요소 추가	arr.unshift(0)
shift()	배열 시작 요소 제거 및 반환	const first = arr.shift()
splice()	배열의 특정 위치에 요소 추가/제거	arr.splice(1, 2, 'a')
concat()	두 개 이상의 배열 병합	const newArr = arr1.concat(arr2)
slice()	배열의 일부분 추출	const sub = arr.slice(1, 3)
forEach()	배열의 각 요소에 대해 함수 실행	arr.forEach(item => console.log(item))
map()	배열의 각 요소에 함수를 적용하여 새 배열 생성	const doubled = arr.map(x => x * 2)
filter()	조건을 만족하는 요소로 새 배열 생성	const evens = arr.filter(x => x % 2 === 0)
find()	조건을 만족하는 첫 번째 요소 반환	const found = arr.find(x => x > 3)
every()	모든 요소가 조건을 만족하는지 확인	const allPositive = arr.every(x => x > 0)
some()	하나 이상의 요소가 조건을 만족하는지 확인	const hasNegative = arr.some(x => x acc + val, 0)
sort()	배열의 요소를 정렬	arr.sort((a, b) => a - b)
join()	배열의 모든 요소를 문자열로 결합	const str = arr.join(',')

• 예시

// 배열 생성 방법
const fruits = ["사과", "바나나", "오렌지"];
const numbers = new Array(1, 2, 3, 4);
const mixed = [1, "두번째", true, {name: "객체"}];

// 배열 요소 접근
console.log(fruits[0]); // "사과"

// 배열 요소 추가
fruits.push("레몬"); // 끝에 추가
fruits[fruits.length] = "망고"; // 끝에 추가하는 다른 방법

// 배열 요소 제거
const lastItem = fruits.pop(); // 마지막 요소 제거 및 반환

// 배열 순회
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// for...of 사용
for (const fruit of fruits) {
  console.log(fruit);
}

// forEach 메서드 사용
fruits.forEach((item, index) => {
  console.log(`${index}: ${item}`);
});

---

집합(Set)

ES6에서 도입.
Java에서는 제네릭으로 타입을 지정하지만, js에서는 어떤 타입이든 혼합해서 저장이 가능하다.

메서드	설명	예시
add()	집합에 요소 추가	mySet.add('value')
delete()	집합에서 요소 제거	mySet.delete('value')
has()	집합에 특정 요소가 있는지 확인	if (mySet.has('value'))
clear()	집합의 모든 요소 제거	mySet.clear()
forEach()	집합의 각 요소에 대해 함수 실행	mySet.forEach(value => console.log(value))
values()	집합의 모든 값에 대한 이터레이터 반환	for (const val of mySet.values())
keys()	values()와 동일 (Set에서는 키와 값이 같음)	for (const key of mySet.keys())
entries()	[값, 값] 쌍의 이터레이터 반환	for (const [key, val] of mySet.entries())
size	집합의 요소 수 반환 (속성)	console.log(mySet.size)

• 예시

// Set 생성
const mySet = new Set();

// 요소 추가
mySet.add(1);
mySet.add("텍스트");
mySet.add({a: 1, b: 2});
mySet.add(1); // 중복 값은 무시

// 요소 확인
console.log(mySet.has(1)); // true
console.log(mySet.has(5)); // false

// 요소 삭제
mySet.delete("텍스트");

// Set 크기 확인
console.log(mySet.size); // 2

// Set 순회
for (const item of mySet) {
  console.log(item);
}

// forEach 사용
mySet.forEach(value => {
  console.log(value);
});

// 배열로 변환
const myArray = Array.from(mySet);
// 또는
const myArray2 = [...mySet];

// 배열에서 중복 제거
const numbers = [2, 3, 4, 4, 2, 3, 5];
const uniqueNumbers = [...new Set(numbers)]; // [2, 3, 4, 5]

---

Map

ES6에서 도입.
Java에서는 제네릭으로 키와 value의 타입을 지정하지만, js에서는 함수, 객체, 원시값 어떤 값이든 키로 쓸 수 있다.
js의 map은 삽입 순서를 기억하고 순회할 때 이 순서를 유지한다.

메서드	설명	예시
set()	맵에 키-값 쌍 추가	myMap.set('key', 'value')
get()	키에 해당하는 값 반환	const val = myMap.get('key')
delete()	키에 해당하는 요소 제거	myMap.delete('key')
has()	특정 키가 있는지 확인	if (myMap.has('key'))
clear()	맵의 모든 요소 제거	myMap.clear()
forEach()	맵의 각 요소에 대해 함수 실행	myMap.forEach((value, key) => console.log(key, value))
keys()	모든 키의 이터레이터 반환	for (const key of myMap.keys())
values()	모든 값의 이터레이터 반환	for (const val of myMap.values())
entries()	모든 [키, 값] 쌍의 이터레이터 반환	for (const [key, val] of myMap.entries())
size	맵의 요소 수 반환 (속성)	console.log(myMap.size)

• 예시

// Map 생성
const myMap = new Map();

// 요소 추가
myMap.set("key1", "값1");
myMap.set(42, "숫자 키도 가능");
myMap.set({obj: "key"}, "객체도 키가 될 수 있음");

// 2차원 배열로 초기화
const userMap = new Map([
  ["홍길동", {age: 30, job: "개발자"}],
  ["김철수", {age: 25, job: "디자이너"}]
]);

// 요소 접근
console.log(myMap.get("key1")); // "값1"

// 요소 존재 확인
console.log(myMap.has(42)); // true

// 요소 삭제
myMap.delete("key1");

// Map 크기
console.log(myMap.size); // 2

// Map 순회
for (const [key, value] of myMap) {
  console.log(`${key} = ${value}`);
}

// 키만 순회
for (const key of myMap.keys()) {
  console.log(key);
}

// 값만 순회
for (const value of myMap.values()) {
  console.log(value);
}

// forEach 사용
myMap.forEach((value, key) => {
  console.log(`${key} = ${value}`);
});

// Map을 배열로 변환
const mapArray = Array.from(myMap);
// 또는
const mapArray2 = [...myMap];

---

객체 (Object)

js에서 객체는 key-value 쌍을 저장하는 자료구조로 볼 수 있다.
자바에서는 클래스기반이지만, js에서는 객체 리터럴로 직접 생성할 수도 있다.
(ES6 부터는 클래스 문법도 도입)
동적이면서 실행중에 속성을 추가하거나 제거할 수 있다.

• 키는 문자열이나 심볼만 가능

• 객체 정적 메서드

메서드	설명	예시
Object.assign()	하나 이상의 소스 객체에서 대상 객체로 속성 복사	Object.assign(target, source1, source2)
Object.create()	지정된 프로토타입 객체와 속성을 가진 새 객체 생성	const child = Object.create(parent)
Object.keys()	객체의 모든 키를 배열로 반환	const keys = Object.keys(obj)
Object.values()	객체의 모든 값을 배열로 반환	const values = Object.values(obj)
Object.entries()	객체의 모든 [키, 값] 쌍을 배열로 반환	const entries = Object.entries(obj)
Object.fromEntries()	[키, 값] 쌍의 목록에서 새 객체 생성	const obj = Object.fromEntries(entries)
Object.defineProperty()	객체에 새 속성 추가 또는 기존 속성 수정	Object.defineProperty(obj, 'prop', descriptor)
Object.freeze()	객체를 동결하여 속성 변경 방지	Object.freeze(obj)
Object.seal()	객체를 밀봉하여 새 속성 추가 방지	Object.seal(obj)
Object.is()	두 값이 같은지 결정	if (Object.is(val1, val2))
Object.hasOwnProperty()	객체가 특정 속성을 가지고 있는지 확인	if (obj.hasOwnProperty('prop'))

• 예시

// 객체 생성
const person = {
  firstName: "춘복",
  lastName: "김",
  age: 6,
  greet: function() {
    return `안녕하세요, ${this.lastName}${this.firstName}입니다.`;
  }
};

// 속성 접근
console.log(person.firstName); // "춘복"
console.log(person["lastName"]); // "김"

// 속성 추가
person.job = "개발자";

// 속성 삭제
delete person.age;

// 객체 순회
for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

// 객체 키/값 배열로 변환
const keys = Object.keys(person);
const values = Object.values(person);
const entries = Object.entries(person);