[Javascript] 객체(프로퍼티 열거, 프로퍼티 키 동적 생성, ...)

ㅁ 프로퍼티 열거

- Object.keys()

  keys()는 주어진 객체의 키값들을 배열로 반환

const obj = {
	x: 10,
    y: 20,
    z: 30
};

console.log(Object.keys(obj));	// ['x', 'y', 'z'] 출력

- Object.values()

  values()는 주어진 객체의 (프로퍼티) 값드릉ㄹ 배열로 반환

const obj = {
	x: 10,
    y: 20,
    z: 30
};

console.log(Object.values(obj));	// [10, 20, 30] 출력

- Object.entries()

  entries()는 프로퍼티(키와 값의 쌍)를 각각의 배열로 반환

  전체 객체는 프로퍼티 배열들의 배열로 표현

const obj = {
	x: 10,
    y: 20,
    z: 30
};

console.log(Object.entries(obj));	// [['x', 10], ['y', 20], ['z', 30]] 출력

- hasOwnProperty()

  hasOwnProperty()는 객체가 주어진 프로퍼티를 가지고 있는지 여부를 true 또는 false로 반환

const obj = {
	x: 10,
    y: 20,
    z: 30
};

console.log(obj.hasOwnProperty('x'));	// true 출력
console.log(obj.hasOwnProperty('a'));	// false 출력

 

ㅁ 선택적 연결 연산자: ?.

- 선택적 연결 연산자(Optional Chaining) 연산자란 존재하지 않을 수도(없을 수도) 있는 프로퍼티에 안전하게 접근할 수 있도록 해주는 연산자 ?. 를 의미

const data = {};

console.log(data.user.name);	//TypeError

- 서버로부터 특정 사용자 데이터를 받아오는 경우를 가정

위 코드에서는 받아온 데이터 data 객체를 통해 사용자의 이름을 출력하려고 하지만, user는 존재하지 않기 때문에 name에도 접근 할 수 없음

이럴 때 사용할 수 있는 연산자가 선택적 연결 연산자(?.)

선택적 연결 연산자는 연산자 기호 앞에 위치한 평가 대상이 null 또는 undefined인 경우 더 이상 하위 객체로 접근하지 않고 undefined를 반환하며 에러는 발생하지 않음

const data = {};

console.log(data.user?.name);	// undefined 출력

 

ㅁ 프로퍼티 키 동적 생성

- 객체의 프로퍼티를 생성할 때, 프로퍼티의 값은 아래 코드 예제와 같이 (함수의 반환 값 등) 동적으로 생성할 수 있음

const obj = {
	number: 2 * 3
};

console.log(obj);

//실행결과
// {
//   number: 6
// }

- 하지만 프로퍼티의 키는 동적으로 생성할 수 없음

const arr = ['name', 'age', 'job'];

const obj = {
	arr[0]: 'John';
};
console.log(obj);	// 생성 X

- [] 대괄호 표기법으 ㄹ사용하면 프로퍼티의 키값을 동적으로 생성할 수 있음

const arr = ['name', 'age', 'job'];

// 또는 new Object();
const obj = {};

obj[arr[0]] = 'John';

console.log(obj);

// 실행결과
// {
//   name: "John"
// }