[강좌]자바스크립트 객체 생성/접근/추가/삭제/존재 여부 확인

자바스크립트 객체란?

자바스크립트 객체는 키와 값으로 구성되어 있고 이것들을 프로퍼티라 하며 프로퍼티의 집합을 객체라고 한다.

 

 

객체(Object) 생성

객체는 아래와 같이 만들 수 있다.

const hong = {
    name : 'hong',
    age : 30, // 마지막 ,(쉼표)는 있어도 되고 없어도 됨
}

여기서 name은 키(key)이고 'hong'은 값(value)이다. 그리고 name : 'hong', age : 30 즉 키와 값의 집합을 프로퍼티라고 한다.

 

 

객체(Object) 접근 방법

hong.name 또는 hong ['name']처럼 접근할 수 있다.

아래 예1과 같이 hong의 name이나 age에 접근해 출력해 볼 수 있으며

예1)

console.log(hong.name);
console.log(hong.age);
console.log(hong['name']);
console.log(hong['age']);

결과
hong
30
hong
30

 

아래 예2처럼 name에 값을 변경할 수도 있다.
예2)

결과
kim
park

hong['name'] = 'kim';
console.log(hong['name']);
hong.name = 'park';
console.log(hong['name']);

 

Object 추가

프로퍼티 추가도 가능하다.
추가 방법은 아래 같으며 키(key)로 gender가 추가되고 gender의 값(value)으로 male이 초기화되었다. 마찬가지로 키(key)로 hairColor가 추가되고 해당 키(key)에 대한 값(value)으로 black이 초기화되었다.
예)

hong.gender = 'male';
hong['hairColor'] = 'black';
console.log(hong.gender);
console.log(hong.hairColor);

 

Object 삭제

프로퍼티 삭제도 가능하다. 삭제 방법은 'delete 객체.키'  하면 되고 아래 예를 보면 hairColor가 삭제되어 undefined 된 것을 확인할 수 있다.

예)

console.log(hong.hairColor);
delete hong.hairColor;
console.log(hong.hairColor);

 

Object 프로퍼티 존재 여부 확인

프로퍼티 존재 여부도 확인 가능한데 키 in 객체와 같이 코딩하면 해당 프로퍼티가 있으면 true 없으면 false로 값을 반환한다.

예)

const hong = {
 name : 'hong',
age : 30,
}
 
console.log(hong.birthData);
console.log(hong.age);
console.log('birthData' in  hong);
console.log('age' in  hong);

man.birthData 정의되어 있지 않기 때문에 undefined로 출력이 되며
'birthData' in  man; 는 해당 프로퍼티의 존재 여부를 확인하는 것이기 때문에 false가 반환된다.
'age' in  man; 은 프로퍼티의 존재 여부 확인 후  age 프로퍼티가 존재하기 때문에 true를 반환했다.

 

 

Object 단축 프로퍼티

객체의 프로퍼티를 단순하게 작성할 수 있다.
아래와 예1을 예2와 같이 
name : name을 name로 age : age를 age로 코딩할 수 있다.

즉 예1을 예 2처럼 간단하게 코딩할 수 있다.

예1)

const name = 'kim';
const age = '40';
 
const hong = {
 name : name,
age : age,
gender : 'female',
}

예2)

const name = 'kim';
const age = '40';
 
const hong = {
 name,
age,
gender : 'female',
}

 

for ... in  반복문

for in 구문을 이용해 해당 객체의 모든 프로퍼티 key 값을 가져올 수 있다.

예)

const hong = {
name : 'hong',
age : 30,
}
 
for(let k in hong){
    console.log(k);
    console.log(hong[k]);
}

for에서 반복하면서 console.log(k); 에서  hong객체의 첫 번째 키(key)인 name을 가져오고 

console.log(hong[k]); 에서 hong객체의 값(value)인 hong['name'] 즉 hong을 가져온다.
마찬가지로 age의 키(key)와 값(value)를 가져온다.

이렇게 하면 hong 객체의 모든 key 값을 개수 상관없이 한 번에 가져올 수 있다.

 

 

 

 

 

유튜브 코딩앙마 님의 영상을 보고 공부한 내용을 바탕으로 작성하였습니다.
혹시 틀린 내용이 있다면 댓글 부탁드립니다.