javascript 기초부시기 - 데이터 타입 - object(객체) 2

1. 객체

 

1.1 객체의 프로퍼티

 

var person = {
  "first-name": 'kim', 
  /* -를 프로퍼티의 키값에 사용하면 SyntaxError가 발생한다. ( -는 연산자이기때문) 
  이때는 따옴표(")를 사용해야한다. */
  first_name: 'hi', // 언더바(_)는 가능하다.
  123: 456 // 숫자도 입력가능하나, 프로퍼티에 키값으로 사용되면 문자열이 된다.
};

 

프로퍼티의 키값은 문자열이므로 따옴표(")를 써야하지만, 유효한 이름일 경우에는 생략할 수 있고 위의 예제와 같이 연산자(-, +) 가

들어가거나 유효하지않은 문자열의 경우에는 따옴표(")를 사용하는 것이 좋다.

 

1.2 객체의 프로퍼티 읽기

 

var person = {
  'first-name': 'Ik',
  'last-name': 'Kim',
  gender: 'male',
  1: 10
};

console.log(person.first-name);    // NaN: undefined-undefined
console.log(person[first-name]);   // ReferenceError: first is not defined
console.log(person['first-name']); // 'Ik'

console.log(person.gender);    // 'male'
console.log(person[gender]);   // ReferenceError: gender is not defined
console.log(person['gender']); // 'male'

console.log(person['1']); // 10
console.log(person[1]);   // 10 : person[1] -> person['1'] 숫자를 대괄호에 입력시 문자열로 취급된다.
console.log(person.1);    // SyntaxError

console.log(person.age) // 객체에 존재하지않는 값을 참조하려하면 undefined

 

객체의 프로퍼티를 읽을때는 객체이름에 마침표(.)와 키값을 쓰는 방법과 대괄호([])를 사용하는 방법이 있다.

위의 예제와 같이 first-name의 경우와 같이 객체의 키값으로 따옴표(")를 사용해야만 사용할 수 있거나, 자바스크립트의 예약어(const, function, delete, class 등)에는 마침표(.)로 접근하는 방법은 사용할 수 없으며 대괄호로만 접근 할 수 있다.

그외에 키값을 따옴표없이 유효하게 사용할 수 있는 문자열 들은 두가지 방법 모두 접근 할 수 있다. 

객체내에 존재하지 않는 프로퍼티를 참조하려하면 undefined가 표시된다.

 

특히 대괄호의 경우에는 변수값으로 접근하기가 용이하다.

 

const obj = {
  name: 'Kim'
}
const key = 'name'

console.log(obj[key]) // Kim

 

1.3 객체 프로퍼티 추가/갱신/삭제

 

 

const obj = {
  name: 'Kim'
}

obj.age = 20; // 객체에 프로퍼티 추가
obj.name = 'Lee' //객체 프로퍼티 갱신

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

delete obj.age //객체 프로퍼티 삭제

console.log(obj) //{ name: 'Lee' }

 

객체의 값을 추가하고, 갱신하고 삭제하는것은 위와 같이 어렵지 않다. 하지만 객체는 이전에 보았던 원시타입들과 다르게 해당 객체에 직접 접근하여 갱신하거나 수정하면 해당 객체를 참조하고있는 값들도 변경되기 때문에 개발자가 의도하지않은대로 동작할 수 있다. 이에 대해서는 다음 포스트에서 작성하겠다.

 

출처: https://poiemaweb.com/js-object