[Javascript] 객체 object

---

목차

 

1. 객체 기본 설명

2. 객체를 만드는 규칙

3. 객체 생성 방식

4. 프로퍼티/메서드 접근 방법

5. 객체의 특징

6. this

7. 객체는 reference로 저장된다.

---

 

 

 

 

 

1. 객체 기본 설명

---

 

객체는 이름과 값으로 구성된 프로퍼티의 집합입니다.

 

객체는 한쌍의 이름과 값은 ','로 구분되어야 하고 이름과 값은 ':'으로 분리됩니다.

따라서 문법은 아래와 같습니다.

 

const obj = {
    ojb1: 객체1,
    ojb2: 객체2
};

 

 

 

 

 

아래 객체를 구성하는 것은 문자열, 숫자, 함수 입니다.

차례로 3개의 아이템은(문자열 2개와 숫자1개) 객체의 프로퍼티(속성)이라고 부르며 끝의 함수는 메소드라고 합니다.

 

 

▷ 정리

 

- 프로퍼티(속성): 객체가 보유한 값

- 메서드: 객체가 보유한 함수

(둘 다 프로퍼티라고 하기도 함)

 

 

const john = {
    fullName: 'John Smith',
    weight: 92,
    height: 1.95,
    johnBMI: function() {
        this.calcBMI = this.weight / this.height**2
        return this.calcBMI;
    }
};

 

 

 

 

 

 

 

 

2. 객체를 만드는 규칙

---

 

위의 예시들을 종합해보면 객체를 만드는 규칙은 다음과 같습니다.

 

 

1. property 이름은 중복될 수 없다.

2. property 이름과 property값 사이에 :(콜론)으로 구분한다.

3. property를 추가할 때는 , (쉼표)를 붙여준다.

4. property 값에는 어느 type이나 가능하다.(string, number array, object, function..)

 

 

 

 

 

 

 

 

 

 

3. 객체 생성 방식

---

객체 생성 방법은 3가지 정도가 있습니다.

 

1) 객체 리터럴

2) 생성자 함수

3) Object.create()

 

 

 

 

 

1) 객체 리터럴 방식(Object Literal)

 

 let obj = { key: value, ... }  : 변수처럼 객체를 생성하는 방식으로, 중괄호 { } 안에 key:value를 쉼표(,)로 구분하여 만듭니다.

 

let myObj = {

    name: 'John',
    age: 20,

    hello: function(){
        return `이름은 ${this.name}이고, 나이는 ${this.age}입니다.`;
    }
};

console.log(myObj);  // { name: 'John', age: 20, hello: [Function: hello] }

 

* myObj 객체가 생성되었습니다. name, age는 '프로퍼티'이며, hello는 '메서드' 입니다.

 

키값은 문자열(string)로 작성해야 합니다.

따옴표로 감싸는게 원칙이지만, '식별자 네이밍 규칙'을 준수한다면 생략할 수 있습니다.

* 식별자 네이밍 규칙 : 문자/숫자/언더스코어(_)/달러기호($)로 구성되며, 숫자로 시작하지 않아야 한다.(예약어 제외)

 

 

 

 

 

2. 생성자 방식(Constructor)

new Constructor() 방식으로 객체를 생성하는 방식입니다.

 

 

1)  new Object()  : new 연산자를 통해 Object객체의 생성자함수를 호출합니다.

 

let myObj = new Object();

myObj.name = 'John';
myObj['age'] = 20;

myObj.hello = function(){
    return `이름은 ${this.name}이고, 나이는 ${this.age}입니다.`;
};

console.log(myObj);  // { name: 'John', age: 20, hello: [Function] }

 

 

 

2)  new 생성자()  :  Number, String, Array 등의 내장 객체도 생성할 수 있습니다.

 

// String객체 생성하기
let strObj = new String('hello');
console.log(strObj); //[String: 'hello']


// Array(배열)객체 생성하기
let arrObj = new Array([1, 2, 3]);
console.log(arrObj); //[ [ 1, 2, 3 ] ]

 

 

 

 

3)  new 사용자 정의 생성자()  : 직접 생성자 함수를 만들어 객체를 생성할 수 있습니다.

 

// 생성자 함수 만들기
let SelfObj = function(name, age){
    this.name = name;  // this는 자신이 속한 객체를 참조하는 '자기 참조 변수'다.
    this.age = age;
    this.hello = function(){
        return `이름은 ${this.name}이고, 나이는 ${this.age}입니다.`;
    }
}

// 객체 생성하기
let selfObj = new SelfObj('John', 20);
console.log(selfObj); // SelfObj { name: 'John', age: 20, hello: [Function] }

 

 

 

 

 

 

3. Object.create() 방식

 

 Object.create(프로토타입)  : 프로토타입 상속을 통해 객체를 만드는 방식입니다.

  *이 방식은 프로토타입, 상속 등의 개념이 필요한 관계로 여기선 간단한 예만 정리하겠습니다.

 

// 부모 객체 생성
let parent = {a:10, b:20};

// 자식 객체 생성(부모의 프로퍼티를 상속 받음)
let child = Object.create(parent);
console.log(child.a);  // 10

 

* child객체에서 parent객체의 프로퍼티인 a값을 참조할 수 있게 되었습니다.

 

 

 

 

 

 

 

 

 

 

 

4. 프로퍼티/메서드 접근 방법

---

객체.key, 객체['key'] 방식으로 접근합니다. 메서드(함수)는 마지막에 괄호()를 붙여 호출해야 합니다.

 

 

1.  객체.key : 마침표(Dot Notation)로 프로퍼티에 접근합니다.

 

let myObj = {

    name: 'John',
    age: 20,

    hello: function(){
        return `이름은 ${this.name}이고, 나이는 ${this.age}입니다.`;
    }
};

myObj.name;	// 'John'
myObj.age;	// 20
myObj.hello();	// '이름은 John이고, 나이는 20입니다.'

 

 

// key는 객체의 프로퍼티만 허용되기 때문에, 다른 변수를 통해 key값을 참조할 수 없습니다.(객체['key']방식은 가능!)

 

var key_name = 'name';
console.log(myObj.key_name); // undefined

// key_name은 myObj에 정의된 프로퍼티가 아니다.
// myObj.name 으로만 접근 가능하다.

 

 

2)  객체['key'] : 대괄호[ ] 사이에 키값을 '문자열'로 넣어 접근합니다.

 

myObj['name']; // 'John'
myObj['age'];  // 20
myObj['hello'](); // '이름은 John이고, 나이는 20입니다.'

 

// 객체[key] 방식은 key가 따옴표로 감싸져 있지 않으면 변수로 해석해서 참조합니다.(객체.key방식은 불가!)

 

var key_age = 'age'
myObj[key_age]; // 20

 

 

 

 

 

 

 

 

 

 

 

5. 객체의 특징

---

 

1. 객체는 키(key)-값(value) 쌍으로 된 데이터 모음입니다. 따라서 순서가 뒤바뀌어도 됩니다. ( 배열은 index로 접근하기 때문에 순서가 중요 )

2. 키의 값(value)에는 텍스트, 숫자 뿐 만 아니라 함수, 객체도 넣을 수 있습니다.

3. 객체의 키(key)에는 스페이스, 한글, 특수문자 등이 들어갈 수 있습니다.'

 

let difficult = {
  'my name': 'john', // 복수의 단어는 따옴표로 묶어야 합니다.
  color: 'silver', //키에 특수문자가 없으면 따옴표를 생략하고 쓸 수 있습니다.
  키: '키(key)가 한글인 경우 따옴표가 필요하지 않습니다',
  '!키': '키(key)에 느낌표가 있는 경우 따옴표가 필요합니다',
};

 

 

 

 

 

 

 

 

6. this

---

 

 

const john = {
    fullName: 'John Smith',
    weight: 92,
    height: 1.95,
    johnBMI: function() {
        this.calcBMI = this.weight / this.height**2
        return this.calcBMI;
    }
};

 

앞서 객체에 저장된 함수를 메소드라고 설명했었습니다. 그렇다면 메소드 속의 "this"는 무엇일까요?

"this"는 지금 동작하고 있는 코드를 가지고 있는 객체를 가리킵니다. 위의 예제에서 this 는 john 객체와 동일합니다.

 

 

 

 

 

 

 

 

7. 객체는 reference로 저장된다.

---

 

객체를 변수에 저장하면 객체 리터럴 자체가 저장되는 것이 아니라 reference 즉, 메모리의 주소가 저장됩니다.

 

  const hiObj = {
      name:'john'
  };

  const helloObj = {
      name: 'john'
  };
  console.log(hiObj === helloObj); // false

 

위의 코드 결과는 왜 false일까요?

 

이유는 객체를 변수에 저장할 때 객체 자체를 저장하는 것이 아니라 객체가 담긴 메모리의 reference 를 저장하기 때문입니다. 하지만 객체 안의 프로퍼티 값은 reference 값이 저장된 것이 아니기 때문에 수정이나 비교가 가능합니다.

 

 

 

 

  console.log(hiObj.name === helloObj.name); // true

 

이유는 reference가 바뀌는 것이 아니라 객체 내부 프로퍼티 값이 수정되기 때문입니다.

 

 

 

 

 

 

 

참고: https://ljtaek2.tistory.com/89

https://curryyou.tistory.com/189