자바스크립트 객체 상수로 객체 생성, 출력, 추가, 삭제

자바스크립트 객체는 자료형의 모음으로 하나의 객체에 요소를 나타내는 속성과 동작을 나타내는 메서드(함수)가 동시에 포함될 수 있습니다.객체의 생성은 중괄호 {} 기호를 사용하며 멤버는 쉼표 , 기호로 구분됩니다.

자바스크립트 객체

자바스크립트의 객체(object)는 자바스크립트의 자료형의 하나입니다. 문자, 숫자, 논리형 자료형이 하나의 속성만 변수에 저장을 한다면, 객체는 마치 배열처럼 여러 속성들을 하나의 객체에 대량으로 저장할 수 있습니다.

배열과 객체의 차이점은 배열은 배열 원소가 0부터 순차적으로 순서를 가집니다. 하지만 객체는 순서가 없는 자료형의 모임입니다. 따라서 순서 정렬이 필요할 때에는 배열을 사용하고, 정렬이 필요없는 자료형의 대량 처리를 할 때에는 객체를 사용한다고 볼 수 있습니다.

객체의 구성

객체는 크게 속성(property)와 메서드(method)로 나눠집니다. 속성은 일반적인 자료형의 변수값과 같은 어떤 특성을 나타냅니다. 메서드는 보통 함수를 말하며, 속성으로 저장된 데이터의 동작, 행동을 담당합니다. 즉 객체는 속성과 메서드를 통해서 데이터의 이름과 동작을 동시에 보유하고 있는 자료형입니다.

객체의 종류

객체는 내장 객체와 사용자 정의 객체로 나눌 수 있습니다. 내장 객체는 이미 자바스크립트에 정의가 되있으므로 사용법만 익히면 됩니다. 예를 들어 데이터를 출력하는 document.write() 도 일종의 내장 객체입니다.

사용자 정의 객체는 유저가 직접 객체를 만들어서 사용하는 자료형입니다. 사용자 정의 객체를 만드는 방법에는 객체 상수를 사용하는 방법과 생성자 함수를 사용하는 방법이 있습니다. 이 중에서 객체 상수를 사용해서 자바스크립트 객체를 만드는 방법을 살펴보겠습니다.

객체 상수로 객체 생성

객체 상수(object literal)로 객체를 생성하는 방법은 변수나 배열을 생성하는 과정과 형태는 비슷합니다. 원하는 객체명을 선언하고, {} 중괄호 기호를 사용해서 빈 객체를 생성합니다.

var 객체명 = {};

예를 들어 음료수 자판기를 나타내는 drink 객체명을 빈객체로 생성했습니다.

var drink = {};

객체 멤버 속성 추가

객체에 들어가는 요소를 멤버라고 합니다. 멤버는 크게 속성(property)과 메서드(method)로 구분됩니다.

빈객체를 생성했으면, 객체 안에 원하는 속성과 속성값을 삽입합니다. 이 때 객체와 속성명 사이에는 마침표 . 기호를 삽입합니다. 속성명과 속성값 사이에는 변수값 대입처럼 = 대입 연산자를 사용합니다.

예를 들어 콜라는 1200, 커피는 900, 주스는 "품절"이라는 각각 숫자 자료형과 문자형 자료형을 생성하고 싶습니다. 이 경우 아래와 같이 작성합니다.

<script>
  //drink 빈객체 생성
  var drink = {};

  //객체 속성 추가
  drink.coke = 1200;
  drink.coffee = 900;
  drink.juice = "품절";

  //객체 속성 출력 확인
  document.write("콜라 : " + drink.coke + "<br>");
  document.write("커피 : " + drink.coffee + "<br>");
  document.write("주스 : " + drink.juice + "<br>");
</script>

결과

콜라: 1200
커피: 900
주스: 품절

TRY IT ▷

속성명에 띄어쓰기 특수문자 사용하기

속성명에 띄어쓰기나 특수문자, 예약어, 하이픈(-) 등을 사용하고 싶다면, 대괄호 [] 및 따옴표 기호로 속성명을 감싸면 됩니다.

예를 들어 cofee 대신 hot coffee!!로 공백과 특수문자를 삽입할 경우 ["hot coffee!!"]라고 속성명을 작성하면 됩니다.

<script>
  //drink 빈객체 생성
  var drink = {};

  //객체 속성명 공백 + 특수문자
  drink["hot coffee!!"] = 900;

  //객체 속성 출력 공백 + 특수문자 확인
  document.write("커피 : " + drink["hot coffee!!"]);
</script>

결과

커피 : 900

TRY IT ▷

유의할 점은 [] 기호와 . 기호는 동시에 사용될 수 없다는 점입니다. drink.["hot coffe!!"]와 같은 형태는 오류가 발생하니 마침표 . 기호와 대괄호 [] 기호가 중첩되지 않았는지 잘 확인합니다.

객체 멤버 메서드 추가

객체에는 이런 속성뿐만 아니라 메서드라고 불리는 함수도 자료형으로 저장할 수 있습니다.

예를 들어 upup 이라는 함수를 실행하면 커피의 가격이 100원씩 상승하는 메서드를 만들어보겠습니다. += 대입 연산자를 사용합니다.

함수명을 upup이라고 지정을 했습니다. 함수의 내용은 함수가 호출되면, drink 객체 내부의 coffee 속성을 찾아서 변수값을 +100 상승시키는 실행문이 담겨있습니다.

이 때 this를 앞에 붙이는 이유는 일반 변수와 구분을 하기 위해서입니다. 예를 들어 객체 밖에 coffee라는 변수가 선언되어 있을 경우 외부에서 변수를 호출할 수도 있기 때문에 자바스크립트는 객체의 속성명이나 메서드를 작성할 때 앞에 this 키워드를 붙여야 합니다.

함수의 형태는 익명함수를 만드는 패턴과 같습니다. 이 때 저장할 곳은 일반 변수가 아닌 객체명.함수명이 됩니다.

<script>
  //drink 빈객체 생성
  var drink = {};

  //객체 속성 추가
  drink.coffee = 900;

  //객체 가격 인상 메서드 추가
  drink.upup = function ()
  {
    this.coffee += 100;
  }

  //함수 실행전 커피 가격 확인
  document.write("커피 : " + drink.coffee + "<br>");

  //함수 실행후 커피 가격 확인
  drink.upup();
  document.write("커피 : " + drink.coffee + "<br>");
</script>

결과

커피 : 900
커피 : 1000

TRY IT ▷

함수인데 왜 return 제어문 없이 값이 자동으로 반환이 되냐고 물을 수 있습니다. 원래는 메소드의 함수 코드 블록내부에도 return 제어문이 있어야 합니다. 그러나 this 키워드가 있을 경우 this 키워드의 값을 자동 반환하게 되있으므로 이 경우에는 return 제어문이 없어도 됩니다.

메서드와 document.write()

객체의 메서드 즉 함수를 잘 보면, 어디선가 본 것 같다는 느낌을 받을 수 있습니다. 바로 데이터를 출력할 때 계속 사용해온 document.write(); 입니다.

어디에 위치해있는지는 모르지만 document라는 이름의 객체에서 write() 라는 메서드를 호출한 것입니다. 따라서 document.write()는 document 객체의 write() 함수를 실행시킵니다.

객체 멤버 삭제

객체의 멤버를 삭제하는 키워드는 delete입니다. delete 뒤에 한 칸을 띄우고 객체명.속성 또는 객체명.메서드를 입력하면 됩니다.

<script>
  //drink 빈객체 생성
  var drink = {};

  //객체 속성 추가
  drink.coffee = 900;

  //커피 멤버 삭제
  delete drink.coffee;

  //객체 속성 출력 확인
  document.write(drink.coffee);
</script>

결과

undefined

TRY IT ▷

객체 생성 및 멤버 설정 일괄 작업

변수 선언과 변수 값 설정이 동시에 되는 것 처럼 빈객체의 생성과 객체 멤버의 설정도 동시에 진행할 수 있습니다.

이 때 차이점은 멤버의 속성 또는 메서드와 값 사이에는 콜론 : 기호가 들어갑니다. 그리고 멤버 사이에는 세미 콜론 ; 대신에 마치 배열처럼 쉼표 , 기호가 들어갑니다. 멤버의 마지막 요소에도 쉼표 , 가 삽입되어도 상관없습니다.

<script>
  //drink 객체 생성 및 멤버 일괄 설정
  var drink =
  {
    coke : 1200,
    coffee : 900,
    juice : "품절",

    upup : function ()
    {
      this.coffee += 100;
    },
  };
</script>

TRY IT ▷

빈객체를 생성하지 않고 일괄적으로 만든 경우 단점은 객체 속성이나 메서드를 새롭게 추가할 때 전체 원문을 중괄호 {} 기호 및 기존의 객체 속성까지 전부 다시 작성해야 합니다.

대신 이렇게 일괄적으로 하나의 중괄호 안에 객체를 생성하면, 그룹핑할 수 있어서 가독성이 좋고, 중간에 다른 코드가 삽입되는 실수를 방지할 수 있습니다.

객체 멤버 반복문으로 일괄 출력

배열에서 배열의 원소를 반복문을 이용해서 일괄 출력하는 것 처럼 객체도 멤버의 요소에 변수를 적절히 삽입하면, 반복문으로 일괄 출력을 할 수 있습니다.

객체 멤버의 속성명이나 메서드명만 출력하고 싶은 경우 변수를 하나 지정하면 됩니다. 이 때 in 이라는 명령어를 사용해서 어디 소속의 객체인지 작성을 하면 됩니다.

<script>
  //drink 객체 생성 및 멤버 일괄 설정
  var drink =
  {
    coke : 1200,
    coffee : 900,
    juice : "품절",

    upup : function ()
    {
      this.coffee += 100;
    },
  };

//객체 멤버 일괄 출력
for ( var member in drink)
{
  document.write(member + "<br>");
}
</script>

결과

coke
coffee
juice
upup

TRY IT ▷

객체 멤버의 값까지 모두 출력하고 싶은 경우 출력시 객체명[변수] 형태의 형식을 하나 더 추가하면 됩니다.

<script>
  //drink 객체 생성 및 멤버 일괄 설정
  var drink =
  {
    coke : 1200,
    coffee : 900,
    juice : "품절",

    upup : function ()
    {
      this.coffee += 100;
    },
  };

//객체 멤버 속성과 메서드 및 값 일괄 출력
for ( var member in drink)
{
  document.write(member + " : " + drink[member] + "<br>");
}
</script>

결과

coke : 1200
coffee : 900
juice : 품절
upup : function () { this.coffee += 100; }

TRY IT ▷

배열에 반복문의 변수를 사용하면, 변수가 자동으로 배열 원소를 가리키는 것과 같은 원리입니다. 객체에 반복문의 변수를 지정하면, 자동으로 객체의 멤버를 가리킵니다.