프론트엔드/카카오테크캠퍼스 2기
카카오테크캠퍼스 2기 | STEP2 | 21일차(24-07-22) 회고
YUNI Heo
2024. 7. 23. 01:40
반응형
⭕ 카카오테크캠퍼스 2기 | STEP2 | 21일차(24-07-22) 회고
📝 Object와 Map
Object와 Map은 모두 자바스크립트에서 키-값 쌍을 저장하는데 사용되는 자료구조이다.
📝 Object
- 키 타입: 문자열 또는 심볼만 키로 사용할 수 있다. 이는 Object가 본질적으로 딕셔너리와 같은 역할을 하기 때문이다.
- 데이터 삽입: 프로퍼티로 데이터를 삽입한다. 하지만 이는 상속된 속성으로 인해 의도치 않은 문제가 발생할 수 있다.
- obj.key = value;
- 편의 기능: 내장된 편의 기능이 부족하여 데이터 관리가 불편할 수 있다. 예를 들어, size()와 같은 기능이 없다.
- 반복: for...in 문을 사용하여 반복할 수 있지만, 이는 상속된 속성까지 포함될 수 있어 혼란을 야기할 수 있다. 이를 방지하기 위해 hasOwnProperty() 메소드를 사용해야 한다.
- 성능: 키가 숫자이고 데이터가 적을 때 더 빠를 수 있다. 하지만 일반적으로 성능이 뛰어나진 않다.
let obj = {
name: "John",
age: 30
};
// 데이터 접근
console.log(obj.name); // John
console.log(obj.age); // 30
// 새로운 키-값 추가
obj.job = "developer";
console.log(obj.job); // developer
// Object는 문자열 키만 사용 가능
obj[123] = "numberKey";
console.log(obj["123"]); // numberKey
// 반복
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(`${key}: ${obj[key]}`);
}
}
📝 Map
let map = new Map();
// 데이터 삽입
map.set("name", "John");
map.set("age", 30);
// 데이터 접근
console.log(map.get("name")); // John
console.log(map.get("age")); // 30
// 새로운 키-값 추가
map.set("job", "developer");
console.log(map.get("job")); // developer
// Map은 모든 자료형을 키로 사용 가능
map.set(123, "numberKey");
console.log(map.get(123)); // numberKey
// 반복
for (let [key, value] of map) {
console.log(`${key}: ${value}`);
}
- Map은 ES6에서 도입된 새로운 자료구조이다.
- 키 타입: 모든 자료형을 키로 사용할 수 있다. 이는 숫자나 객체를 키로 사용해야 할 때 특히 유용하다.
- 데이터 삽입: set() 메소드를 통해 명확하게 데이터를 삽입한다.
- map.set(key, value);
- 편의 기능: size(), clear(), has() 등 다양한 편의 기능을 제공하여 데이터 관리를 용이하게 한다.
- 반복: for...of 문을 사용하여 깔끔하게 반복할 수 있고, 삽입 순서를 보장한다.
- 성능: 일반적으로 메모리 사용량과 연산 속도 면에서 우수하다.
📝 Daily Scrum
- 면접 내용 정리
- 0단계 PR
😋 Today 회고
- 면접 준비를 위해 자바스크립트의 문법에 대해 급히 공부하게 되었다. 그러나 면접 후 집으로 돌아오는 길에 단순히 답변을 외운 것 같아 찜찜한 기분이 들었다. 앞으로는 자바스크립트의 동작 원리와 언제, 왜 사용해야 하는지 깊이 이해해야겠다는 생각이 들었다.
➡️ 참고 링크
https://poiemaweb.com/js-data-type-variable
https://jake-seo-dev.tistory.com/348
반응형