본문 바로가기
프론트엔드/카카오테크캠퍼스 2기

카카오테크캠퍼스 2기 | STEP2 | 21일차(24-07-22) 회고

by YUNI Heo 2024. 7. 23.
반응형

 

⭕ 카카오테크캠퍼스 2기 | STEP2 | 21일차(24-07-22) 회고

📝 Object와 Map

ObjectMap은 모두 자바스크립트에서 키-값 쌍을 저장하는데 사용되는 자료구조이다.

 

 

📝 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

 

Data type & Variable | PoiemaWeb

변수는 값의 위치(주소)를 기억하는 저장소이다. 값의 위치란 값이 위치하고 있는 메모리 상의 주소(address)를 의미한다. 즉, 변수란 값이 위치하고 있는 메모리 주소(Memory address)에 접근하기 위해

poiemaweb.com

https://jake-seo-dev.tistory.com/348

 

자바스크립트의 Object 와 Map 의 차이점에 대해서 얘기해보세요.

Object 와 Map 비교 Object 는 이전부터 존재했다. 여러 필드와 그에 맞는 데이터, 메서드를 가진 '객체' 로서 사용되기 위해 만들어졌다. Map 은 ES6 에서 새롭게 도입되었다. key 와 value 쌍을 가진 데이

jake-seo-dev.tistory.com

 

 

반응형