📕오늘 배운 내용

• 비구조화 할당(구조분해 할당)
• 네이밍 케이스
• Map

비구조화 할당(구조분해 할당)

객체(Object) 비구조화 할당

• 객체의 키에 대응되는 값 할당

const object = { a: 1, b: 2 };
let { a, b } = object;

console.log(a) // 1
console.log(b) // 2

• 존재하지 않는 키의 값은 undefined 반환

const object = { a: 1, b: 2 };
let { a, c } = object;

console.log(a) // 1
console.log(c) // undefined

배열(Array) 비구조화 할당

• 배열의 원소를 새로운 변수에 순차적으로 할당

const array = [1, 2, 3];
const [num1, num2, num3] = array;

console.log(num1) // 1
console.log(num2) // 2
console.log(num3) // 3

• 할당할 값이 없다면, undefined 반환

const array = [1, 2, 3];
const [num1, num2, num3, num4] = array;

console.log(num1) // 1
console.log(num2) // 2
console.log(num3) // 3
console.log(num4) // undefined

네이밍 케이스

Kebab-Case

• 모두 소문자로 표현
• 단어와 단어 사이를 -(하이픈)으로 연결
  ex) 폴더 : demo-api, 파일 : object-api-demo.js

Snake_Case

• 모두 소문자로 표현
• 단어와 단어 사이를 _(언더바)로 연결
  ex) 폴더 : demo_api, 파일 : object-api_demo.js

Kebab-Case와 Snake_Case 중 하나로 통일하여 사용하기

camelCase

• 두개 이상의 단어를 합쳐서 사용할 때, 두번째 단어의 첫글자를 대문자로 작성
• 변수나 함수에 사용
  ex) channelTitle, videoNum

PascalCase

• 두개 이상의 단어를 합쳐서 사용할 때, 첫번째 단어와 두번째 단어 모두 대문자로 작성
• 클래스에 사용
  ex) ClassName

Map

key-value 쌍으로 이루어진 데이터를 저장하는 데이터 구조

사용 방법

• 생성

let db = new Map();

• 새로운 키-값 저장

db.set(1, "NoteBook");
db.set(2, "Cup");
db.set(3, "Chair");

• 키에 해당하는 값 반환

console.log(db.get(1)); // "NoteBook"
console.log(db.get(2)); // "Cup"
console.log(db.get(3)); // "Chair"

객체와의 차이점

키의 타입 제한이 없다

• 객체에서는 키로 문자열이나 심볼만 사용가능 하지만, Map에서는 어떠한 데이터 타입도 사용할 수 있다.

값의 타입 제한이 없다

• 객체의 키에 대응되는 값은 문자열 타입이지만, Map은 function, number, object 등 값에 모든 타입을 넣을 수 있다

키-값의 순서 보장

• Map은 키-값 쌍을 추가한 순서를 기억해서 순서가 중요한 경우에 유용하다

Size 프로퍼티 사용

• Map은 크기를 알 수 있는 size 프로퍼티 제공한다
• 객체는 size 프로퍼티가 제공되지 않아 Object.keys()를 이용하여 객체의 모든 키를 배열로 반환한 후, length 프로퍼티를 통해 객체의 크기를 알 수 있다

반복 가능(Iterable)

• 객체는 'for...of'나 'foreach'와 같은 반복 메서드를 사용할 수 없지만,Map은 사용 가능하다.

let myMap = new Map([
  ["name", "Bob"],
  ["age", 9],
  ["isStudent", false]
]);

// 키-값 쌍을 하나씩 확인
for (let [key, value] of myMap) {
  console.log(key, value);
}
// "name" "Bob"
// "age" 9
// "isStudent" false