[JavaScript] 객체 심화

객체의 축약 표현

프로퍼티 축약 표현

const name = 'John';
const age = 20;

const obj = {
	name: name,
    age: age
    };

console.log(obj); // {name: 'John', age: 20}

 

위 코드는 name, age라는 변수를 obj 객체에 프로퍼티 값으로 할당할 때, 각 변수 이름과 똑같은 키값을 사용하고 있다. 이 경우는 키값을 생략해 줄 수 있다.

const name = 'John';
const age = 20;

const obj = {
	name,
    age
    };

console.log(obj); // {name: 'John', age: 20}

 

메서드 축약 표현

객체는 변수나 값 외에도 함수를 프로퍼티로 가질 수 있는데, 이렇게 객체의 프로퍼티로 선언된 함수를 메서드라고 부른다.

const obj = {
	greeting: function() {
    console.log('Hello');
    }
    };
    
obj.greeting(); // Hello

 

객체 내부에서 메서드를 작성할 때는 function 키워드를 생략하고 축약하여 작성할 수도 있다.

const obj = {
	greeting() {
    console.log('Hello');
    }
    };
    
obj.greeting();

 

객체와 반복

for in

for in 문은 객체의 키 개수만큼 반복하여, 첫 번째 키값부터 마지막 키값까지 순회할 수 있는 반복문이다.

const obj = {
	x : 10,
    y : 20,
    z : 30
    };
 
for (value in obj) {
	console.log(value); // x y z
    }

 

for in은 배열에서도 사용할 수 있지만, 배열에서의 사용은 권장하지 않는다. 배열에서는 forEach() 또는 map()을 사용하는 것이 좋다.

 

프로퍼티 열거

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()

객체가 주어진 프로퍼티를 가지고 있는지 여부를 boolean 값으로 반환한다.

const obj = {
	name: 'John',
    age: 20,
    job: 'FE'
    };

console.log(obj.hasOwnProperty('age')); // true
console.log(obj.hasOwnProperty('hobby')); // false

 

선택적 연결 연산자

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

const data = {};
console.log(data.user.name); // TypeError

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'
    }; // TypeError
    
const arr = ['name', 'age', 'job'];

const obj = {};
obj[arr[0]] = 'John';
obj[arr[1]] = 20;
obj[arr[2]] = 'Rock Star';

console.log(obj); // {name: 'John', age: 20, job: 'Rock Star'}