[JavaScript 10] 객체의 기본

• 객체(object)는 "실제로 존재하는 사물"을 의미한다.
• 자바스크립트에서는 "이름(name)"과 "값(value)"로 구성된 "속성(property)"을 가진 데이터 타입이다.

1. 객체의 기본

1. 객체 생성, 조회

• 자바스크립트에서 여러 자료를 다룰 때 객체를 사용한다.
• 배열도 객체의 일종이다. (typeof로 데이터타입 조회 시 "object"로 표시된다.)
  • 배열에는 인덱스(index) 와 요소(element) 가 있다.
    • 이때 인덱스는 0부터 부여되는 숫자이고, 요소는 인덱스에 해당되는 특정 값이다.
• 객체의 경우 객체 내 요소(element)에 접근할 때 키(key)를 사용한다.
  • { } 중괄호를 이용해서 객체를 생성하고, 각각의 키(key)와 값(value)는 쉼표(,)를 이용해서 분리한다.
  • 예시:

    const object = {
       name : "김명랑", //name이 이름값, "김명랑"은 값이다. 
       age : 7,
       breed: "dachsund"
    } //name, age, breed로 구분되어 담겨있는 데이터가 object라는 객체의 속성이다.

• 객체의 요소에 접근하는 방식도 배열의 방식과 비슷하다. (배열은 객체의 일종이다.)

• 객체명 뒤에 대괄호[ ]나 온점.을 사용하고 특정 키를 입력하면 해당 키에 맞는 값이 표시된다.

  • 예시:

    object['name'] 
    '김명랑'
    
    object.name
    '김명랑'

  • 온점 사용 시, 보조 기능을 활용할 수 있다.

• 객체의 key는 식별자와 문자열을 모두 사용할 수 있다.

• 다만 객체를 생성할 때 식별자로 사용할 수 없는 단어를 키값key으로 사용할 경우, 해당 키의 요소를 불러올 때 무조건 대괄호[ ]를 사용해야한다.

2. 객체의 속성과 메소드

1. 함수형 속성

• 배열과는 다르게 객체 내부에 있는 값은 속성(property)라고 한다.

• 배열의 요소와 마찬가지로 객체의 속성도 모든 형태의 자료형을 가질 수 있다. (문자열, 숫자, 함수 등)

• 객체의 속성 중 함수 자료형인 속성을 메소드라고 한다.

  • 입력 값을 받아 일련의 과정을 걸치고 결과를 출력하는 함수 자료형을 function() 메소드라고 한다.

  • 화살표 함수는 메소드로 사용하지 않는다.

  • 예시:

    const pet = {
      name: '김명랑',
      age: 7,
      breed: 'dachshund',
      eat: function(food){
        console.log(`명랑이는 하루에 두끼 ${food}를 먹는다.`)
      }
    }
    
    pet.eat('사료') //출력 시 콘솔에 "명랑이는 하루에 두끼 사료를 먹는다."라는 문구 출력

2. 메소드 내부에서 "this" 키워드 사용

• this라는 키워드는 메소드 내에 객체의 속성 중 하나를 사용할 때, 해당 값이 객체의 속성임을 명확하게 표시하고자 할 때 사용된다.

  • 예시:

    const pet = {
      name: '김명랑',
      age: 7,
      breed: 'dachshund',
      eat: function(food){
        alert(this.name +'은 '+ '하루에 두끼 '+ food +'를 먹는다.')
      }
    }
    
    pet.eat('사료') // "김명랑은 하루에 두끼 사료를 먹는다." 라는 문구가 적힌 알림창이 생성된다.

  • this라는 키워드를 이용해서 객체(pet)의 속성인 name(김명랑)에 정확하게 접근했다.

3. 동적으로 객체 속성 추가/제거

• 객체 생성 후, 해당 객체의 속성을 추가하거나 제거하는 것을 "동적으로 속성을 추가/제거 한다"라고 표현한다.

1. 객체 속성 추가

• 객체[속성] = 값 형식을 사용해서 객체의 속성의 추가할 수 있다.

  • 예시: 객체pet에 생일속성 추가

    const pet = {
      name: '김명랑',
      age: 7,
      breed: 'dachshund',
      eat: function(food){
        alert(this.name +'은 '+ '하루에 두끼 '+ food +'를 먹는다.')
      }
    }
    
    pet['생일'] = '2015/06/12'
    
    console.log(pet)

  • console에서 객체 호출 시, 생일값이 추가되어있음.

• JSON.stringigy() 메소드 사용 시, 객체 내부에 있는 속성을 콘솔에 JSON 형태로 출력할 수 있다.

  • 예시:

    const pet = {
      name: '김명랑',
      age: 7,
      breed: 'dachshund',
      eat: function(food){
        alert(this.name +'은 '+ '하루에 두끼 '+ food +'를 먹는다.')
      }
    }
    
    console.log(JSON.stringify(pet, null, 2))
    /*{
      "name": "김명랑",
      "age": 7,
      "breed": "dachshund"
    }
    출력된 값이 해당 객체를 JSON 형식으로 보여주고 있음 
    (다만 함수형 속성은 JSON.stringify 호출 시 무시된다. 몇몇 자료형 속성은 무시됨!!)
    */

2. 객체 속성 제거

• delete 객체.속성 형식을 이용해서 쉽게 객체의 속성을 제거할 수 있다.

  • 예시: 객체pet에서 속성age 제거

    const pet = {
      name: '김명랑',
      age: 7,
      breed: 'dachshund',
      eat: function(food){
        alert(this.name +'은 '+ '하루에 두끼 '+ food +'를 먹는다.')
      }
    }
    
    delete pet.age
    
    console.log(JSON.stringify(pet, null, 2))
    /*{
      "name": "김명랑",
      "breed": "dachshund"
    }
    */ // 콘솔에 호출 시, age가 사라짐

4. 메소드 간단 선언 구문

• function() { } 형태로 객체의 속성을 메소드로 선언할 수 있다.

• 현재의 자바스크립트는 메소드를 더 간편하게 선언할 수 있는 전용 구문이 있다.

  • 예시:

    const pet = {
      name: '김명랑',
      age: 7,
      breed: 'dachshund',
      eat(food){
        alert(this.name +'은 '+ '하루에 두끼 '+ food +'를 먹는다.')
      }
    }
    
    pet.eat('사료')

  • eat의 형태가 속성의 key값: function(매개변수) {statement} 형식에서,
    속성의 key값 (매개변수) {statement}의 형태로 변경되었다.

    • key:value 형식에서도 벗어난 셈

5. 객체 구성을 이해하기 위한 예제

• console에 찍히는 문구가 어떤 문구일지 예상하기!

  const object = {
    ko: '빵',
    en: 'bread',
    fr: 'pain',
    es: 'pan',
    lang: {
      ko: '한국어',
      en: '영어',
      fr: '프랑스어',
      es: '스페인어'
    },
    print: function(a){
      console.log(`${this.ko}은 ${this.lang[a]}로 ${this[a]}입니다.` )
    }
  }
  
  object.print('en')

  1. 객체의 메소드의 매개변수에 들어간 값은 []안에 해당된다.

  2. this.키워드 >> 이 형식에서 키워드는 객체의 키값을 의미.

     • 고로, this.lang은 객체object 내에 lang이다.
     • 키값lang의 경우, 객체 안에 객체라서 헷갈릴 수 있음. 주의!

  3. this[a]의 경우, this.en과 같다.

     • 고로, ${this.[a]}는 키값en의 value인 'bread'를 의미한다.

  4. 콘솔에 출력된 값은: "빵"은 "영어"로 "bread"입니다.

아이고 이제 객체의 6-1이 끝났구만!

공부는 정말 끝이 없고,,, 지치기도 한다.

근데 너무 신기해. 누가 이렇게 생각을 했을까?

천재를 이해하진 못 해도 천재가 만들어둔 결과물은 이해할 수 있다면 좋겠다.

프로그래밍 언어란... 정말 신기해..

출처: 혼자 공부하는 자바스크립트 (한빛미디어)