[객체] 05. 객체 다루기

객체의 프로퍼티를 수정하는 방법은 해당 프로퍼티에 접근해서 새로운 값을 할당해 주면 됩니다. 마치 변수의 값을 재할당하는 모습과 같습니다.

// 객체 (Object)
let codeit = {
	name: '코드잇',
    bornYear: 2017,
    isVeryNice: true,
    worstCourse: null,
 	bestCourse: {
    	title: '자바스크립트 프로그래밍 기초',
        language: 'JavaScript'
    }   
};

console.log(codeit.name); // 코드잇
codeit.name = 'codeit';
console.log(codeit.name); // codeit

codeit의 name이라는 프로퍼티에 영어로 'codeit'이라는 값을 할당해주고 이 코드를 실행해보면 처음에는 한글 '코드잇'이었다가 그 다음 영어로 변경 된 것을 확인할 수 있습니다.

console.log(codeit.ceo); // undefined
codeit.ceo = '강영훈';
console.log(codeit.ceo); // 강영훈

이런 방식으로 객체에 프로퍼티를 추가할 수도 있는데 객체에 존재하지 않는 프로퍼티에 접근하려고 하면 undefined 값이 나오는 것을 확인할 수 있지만 존재하지 않는 프로퍼티에 새로운 값을 할당해주면 새로운 프로퍼티가 추가되는 것입니다. 저장하고 실행해보면 undefined가 먼저 출력이 되고 그 다음으로 강영훈이 출력이 됩니다.

 

작성한 코드는 콘솔에서도 바로 확인할 수가 있는데 여기서 바로 codeit이라고 엔터를 눌러 보면 작성한 객체가 나옵니다. 삼각형 부분을 클릭하면 객체가 펼쳐지는데 ceo라는 프로퍼티가 잘 추가된 것을 확인할 수 있습니다.

console.log(codeit.worstCouse); // null
delete codeit.worstCourse;
console.log(codeit.worstCouse); // undefined

객체의 프로퍼티를 삭제하는 방법

삭제라는 의미의 delete 연산자를 활용하면 프로퍼티를 간단하게 삭제할 수 있는데 이렇게 delete라는 키워드 다음에 프로퍼티에 접근을 하게 되면 이 프로퍼티가 삭제됩니다. 저장하고 실행해 보면 처음에는 null이었다가 undefined로 바뀐 것을 확인할 수 있습니다. 다시 codeit을 확인해보면 worstCourse가 사라진 것도 화인할 수가 있습니다.

console.log(codeit.name !== undefined); // true

in 연산자

존재하지 않는 프로퍼티 값은 undefined입니다. 그래서 프로퍼티 값과 undefined를 불일치 비교를 해서 객체의 프로퍼티 존재 여부를 확인할 수 있습니다. 그런데 undefined외에도 in 연산자를 통해서 프로퍼티의 존재 여부를 확인할 수가 있습니다. 

// 'propertyName'object
console.log('name' in codeit); // true

문법은 ' 프로퍼티 네임 in 객체'입니다.프로퍼티 네임을 문자열로 작성한 다음 in이라는 키워드를 써주고 그 다음에 확인할 객체를 작성해 주면 객체 안에 이런 이름을 가진 프로퍼티가 있는지를 확인해서 불린 형태로 값을 리턴합니다.

 

undefined와 비교하면 되는데 굳이 이렇게 in이라는 연산자가 있는 이유는 일단은 더 짧아서 이해하기가 쉽기도 하고 프로퍼티를 확인할 때 좀 더 안전하게 하기 위함입니다. worstCouse 값으로 undefined 값을 할당했다고 가정해보면 사실 worstCourse가 프로퍼티로 존재하고 있지만 undefined와 피교했을 때는 false가 나오게 됩니다. 

// 객체 (Object)
let codeit = {
	name: '코드잇',
    bornYear: 2017,
    isVeryNice: true,
    worstCourse: undefined,
 	bestCourse: {
    	title: '자바스크립트 프로그래밍 기초',
        language: 'JavaScript'
    }   
};

console.log(codeit.'worstCouse' !== undefined); // false
// 'propertyName' in object
console.log('worstCouse' in codeit); // true

'worstCouse'로 바꿔준 다음 실행해보면 두 결과가 서로 다른 것을 확인할 수 있습니다. 여기에서 undefined 값을 할당하는 것이 적절한 것은 아니지만 실수로 undefined 값을 할당한다거나 혹은 다른 함수나 변수에 의해서 의도치 않게 undefined 값이 할당될 수도 있기 때문에 조금 더 안전하게 프로퍼티 값을 확인하기 위해서는 in 연산자를 활용하는 것이 좋습니다.

if('name' in codeit){
	console.log(`name 값은 ${codeit.name}입니다.`);
}else{
	console.log(`name 프로퍼티는 존재하지 않습니다.`)
}

그리고 in 연산자는 불린값을 리턴하기 때문에 if문에서 조건 부분에 활용하기 좋습니다.