객체의 생성 및 사용

객체 형태와 구성요소

var person = {};

 

이렇게만 해도 자바스크립트 객체가 생성된다. 그렇다 자바스크립트에선 { } 로 객체를 정의 할 수 있다.

위에 함수는 텅 빈 함수이니  제대로 생성해보자

 

var person = {
  name: ['Bob', 'Smith'],
  age: 32,
  gender: 'male',
  interests: ['music', 'skiing'],
  bio: function() {
    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + 
    ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  },
  greeting: function() {
    alert('Hi! I\'m ' + this.name[0] + '.');
  }
};

 

객체는 프로퍼티(속성||필드) 와 함수를 구성요소로 가질 수 있다. 여기선 name 과 age, gender 라는 속성을 가졌고

bio와 greeting이라는 함수를 객체 person이 구성요소로 가지고 있다.

 

프로퍼티는 '이름 : 값' 의 쌍으로 구분된다. 

 

이렇게 객체를 생성할때 속성과 메소드를 그대로 대입해서 생성하는 객체를 

객체 리터럴 (object literal) 이라고 부른다. 클래스를 통해 생성된 객체와는 다르다. 

 

객체 리터럴을 사용해서 객체를 생성하는 것은 연속된 구조체나 연관된 데이터를 일정한 방법으로 변환하고자 할 때  많이 쓰이는 방법이다. 예를 들면 서버에게 주소를 데이터베이스에 넣어달라고 요청하는 경우, 각 아이템들을 하나 하나 개별 전송하는 것보다, 하나의 객체로 전송하는 것이 훨씬 효율적이다. 또 각 아이템들을 이름으로 구분해서 사용하기 원할 때도 배열을 사용하는 것보다 훨씬 쉽다. (https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics[인용])

 

 

객체의 구성요소를 참조 또는 호출하는 방법

 

도트연산자 (.) 를 통해서 참조 또는 호출 가능하다. 

 

person.name
person.name[0]
person.age
person.interests[1]
person.bio()
person.greeting()

 

여기서 객체 이름이 namespace처럼 작동하기 때문에 . 으로 참조할 수 있는건데,

객체 프로퍼티의 선언 형태를 바꾸어 프로퍼티이름을 하위 namespace처럼 쓰는것도 가능하다.

 

name : { first : 'Bob', last : 'Smith'},

 

이는 객체의 프로퍼티를 객체로 쓸 수 있다는 사실이 된다. 자바에서 어떤 객체의 필드가 다른 

타입의 객체일 수 있는것처럼 , 객체안에 객체가 있는 모양으로 만들수 있다는 것이다. 

 

person.name.first // Bob
person.name.last // Smith

 

이제 위와 같이 참조할 수 있다. 

 

또 다른 참조 방법(프로퍼티 접근방법)으로는 괄호 표기법이 있다.

 

person.age
person.name.first
// 이거를

person['age']
person['name']['first']
// 이렇게

 

 

객체사용의 장점

• 연관된 데이터를 전송할 때 효율적이다. 
• 데이터와 연관된 함수를 저장하는데 유용한 구조이다. ( 공통적인 함수를 영역내에 따로 만들어놓는다면 비효율 적이고 미관상에도 안좋다.,, 변수명이 겹치는일도 많을것이다.)
• 객체는 고유의 패키지에 우리의 정보를 안전하게 정보를 보호해주는 역할을 한다.

 

참조 https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics