JavaScript - Object

2019-05-14

⏱ 6 min.

Object

자바스크립트 변수에 대해 정리한 포스트에서 자바스크립트는 기본타입(number, String, Boolean, undefined, null)을 제외하곤 나머지 모든 데이터 타입이 객체라고 정리한 바 있다.

객체라는 표현은 추상적인 표현이기 때문에 모호하게 느껴질 수 있으나 사실 현실의 세계를 프로그래밍화 하려는 시도(?)라고 해석할 수 있다. 세상 모든건 객체로 구성되어 있기 때문이다.

자동차를 예로 들면, 아래 이미지의 자동차들은 ‘자동차’라는 범주에 똑같이 속하지만 색상, 차 종(type), 충전 상태 등 서로 다른 특징을 보유하고 있기 때문에 우리는 이들을 각각의 차로 구별할 수 있다.

위의 차를 자바스크립트 코드로 구현하면 아래와 같다.

var automobile_n1 = {
  brand : "Tesla",
  color : "blue",
  type : "Sports Utility",
  isCharging : true
};

var automobile_n2 = {
  brand : "Tesla",
  color : "red",
  type : "Sedan",
  isCharging : true
};

var automobile_n3 = {
  brand : "Tesla",
  color : "white",
  type : "Sports Utility",
  isCharging : false
};

console.log(automobile_n1.color);   //  blue
console.log(automobile_n3.isCharging);  // false

객체는 키(key)와 값(property)로 이루어져있다. 위의 코드처럼 중괄호로 감싸고 세미콜론(;) 대신 , 로 각각의 property를 구분한다. 세미콜론은 중괄호를 닫을 때 작성함으로써 객체를 완성한다.

객체 프로퍼티 표현법

객체의 프로퍼티를 호출하는 방법은 두가지가 있다.

object["property"] : Bracket Notation
object.property : Dot Notation

Dot 표기법이 Bracket 표기법보다 엄격하게 key를 구별하기 때문에 Dot 표기법으로 객체의 프로퍼티, Key를 작성하는 것을 권장한다.

추가로 객체의 프로퍼티로 함수나 배열을 포함시킬 수도 있다.

var myCar = {
  brand : "Tesla",
  color : ['red', 'blue', 'white', 'black'],
  type : "Sports Utility",
  isCharging : true,
  charged : function() {
    if(myCar.isCharging === true){
      return "This car is already charging.";
    } else {
      return "This car will be charged";
    }
  }
};
myCar.charged();
// "This car is already charging."

프로퍼티 네이밍 규칙

객체의 프로퍼티명을 작성하는 조건이 몇 가지 있다.

"" 을 사용하지 않는다.
숫자를 첫 글자로 사용하지 않는다.
띄어쓰기 대신 camel 표기법을 사용한다.

이제 Udacity - Intro to Javascript 강의를 완강했다. 그러나 말 그대로 intro를 끝냈을뿐 여전히 자바스크립트에 알지 못한다고 생각한다. 사실상 모든 프로그래밍 언어의 기초적인 부분을 배운 느낌이다. 그래도 완강은 기분좋다.

이제는 Udacity에서 jQuery에 대한 강의를 들으려고 한다. DOM객체가 무엇인지, selector 태그에 대한 연습도 해보고 싶다. 얼른 강의 듣고 또 정리해보겠다.

DevJavaScript

JavaScript - Object

목차

Object

객체 프로퍼티 표현법

프로퍼티 네이밍 규칙