TIL | #05 | 자바스크립트 기초 | 23.12.03.(일)

23.12.03.(SUN).TIL.

Part.06. 객체 심화 문법

배열은 다음과 같은 의미가 있다.

1. 자료구조로써의 배열의 중요성
2. 자바스크립트에서의 배열의 특수성
3. Iterable의 idea

객체 순회

Object.keys, values, entries

- Object.keys(obj) : 객체의 키만 담은 배열을 반환한다.
- Object.values(obj) : 객체의 값만 담은 배열을 반환한다.
-  Object.entries(obj) : [키, 값] 쌍을 담은 배열을 반환한다.

Map, Set, Array 전용 메서드와 일반 객체용 메서드의 차이

첫 번째 차이 : obj.keys()가 아닌 Object.keys(obj)를 호출한다는 점.
두 번째 차이 : 메서드 Object.*를 호출하면 iterable 객체가 아닌 객체의 한 종류인 배열을 반환한다는 점이다. '진짜' 배열을 반환하는 이유는 하위 호환성 때문이다.

객체 변환하기

객체엔 map, filter 같은 배열 전용 메서드를 사용할 수 없다.

하지만, Object.entries와 Object.fromEntries를 순차적으로 적용하면 객체에도 배열 전용 메서드 사용할 수 있다.

1. Object.entries(obj)를 사용해 객체의 키-값 쌍이 요소인 배열을 얻는다.
2. 1에서 만든 배열에 map 등의 배열 전용 메서드를 적용한다.
3. 2에서 반환된 배열에 Object.fromEntries(array)를 적용해 배열을 다시 객체로 되돌린다.

구조 분해 할당

함수에 객체나 배열을 전달해야 하는 경우가 생기곤 한다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 한다.

이럴 때 객체나 배열을 전달해야 하는 경우가 생기곤 한다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생긴다.

이럴 때 객체나 배열을 변수로 '분해'할 수 있게 해주는 특별한 문법인 구조 분해 할당(destructuring assignment)을 사용할 수 있다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해(destructing)는 그 진가를 발휘한다.

배열 분해하기

// 이름과 성을 요소로 가진 배열
let arr = ["Bora", "Lee"]

// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// surname엔 arr[1]을 할당했다.
let [firstName, surname] = arr;

alert(firstName); // Bora
alert(surname); // Lee

let [firstName, surname] = "Bora Lee".split(' ');

'분해(destructuring)'는 '파괴(destructive)'를 의미하지 않는다.
구조 분해 할당이라는 명칭은 어떠한 것을 복사한 이후에 변수로 '분해(destructurize)'해준다는 의미 때문에 붙여졌다. 이 과정에서 분해 대상은 수정 또는 파괴되지 않는다.
배열의 요소를 직접 변수에 할당하는 것보다 코드 양이 줄어든다는 점만 다르다.

객체 분해하기

let { var1, var2 } = { var1: ... , var2 : ... }

할당 연산자 우측엔 분해하고자 하는 객체를, 좌측엔 상응하는 객체 프로퍼티의 '패턴'을 넣는다.

let options = {
    title: "Menu",
    width: 100,
    height: 200
};

let { title, width, height } = options;

alert(title); // Menu
alert(width); // 100
alert(height); // 200

중첩 구조 분해

객체나 배열이 다른 객체나 배열을 포함하는 경우, 좀 더 복잡한 패턴을 사용하면 중첩 배열이나 객체의 정보를 추출할 수 있다. 이를 중첩 구조 분해(nested destructuring)라고 부른다.

let options = {
    size: {
        width: 100,
        height: 200
    },
    items: ["Cake", "Donut"],
    extra: true
};

// 코드를 여러 줄에 걸쳐 작성해 의도하는 바를 명확히 드러냄
let {
    size: {
        width,
        height
    },
    items: [item1, item2], // items는 여기에 할당함
    title = "Menu" // 분해하려는 객체에 title 프로퍼티가 없으므로 기본값을 사용함
} = options;

alert(title); // Menu
alert(width); // 100
alert(height); // 200
alert(item1); // Cake
alert(item2)l // Donut

똑똑한 함수 매개변수

매개변수 모두를 객체에 모아 함수에 전달해, 함수가 전달받은 객체를 분해하여 변수에 할당하고 원하는 작업을 수행할 수 있도록 함수를 리팩토링 해보자.

// 함수에 전달할 객체
let options = {
    title: "My menu",
    items: ["Item1", "Item2"]
};

// 똑똑한 함수는 전달받은 객체를 분해해 변수에 즉시 할당함
function showMenu({title = "Untitled", width = 200, width = 200, height = 100, items = []}) {
    // title, items - 객체 options에서 가져옴
    // width, height - 기본값
    alert(`${title} ${width} ${height}` )l // My menu 200 100
    alert( items ); // Item1, Item2
}

showMenu(options);

 

* 출처 : 내배캠 깃북