자바스크립트 Object

ddoni·2020년 11월 25일

위코드 자바스크립트

Object

Object 란?

연관성이 있는 데이터나 변수들과 함수들로 구성되어 있는 (object 안에 있는 변수는 property, 함수는 method라고 한다.) 기능적인 것의 집합체 이다.

object's properties → data items

object's methods → functions (object가 데이터를 가지고 무엇인가 하게 하는 함수)

Object 생성하는 법

litaral 방식을 이용하여 object를 생성하면 손쉽게 생성가능하지만 동일한 key를 가진 object를 여러개 생성하고 싶은 경우 번거로움이 발생한다

→ 이를 위해 class로 object template를 만든 후 constructor function으로 만들고자하는 object를 여러개 생성할 수 있다.

//'object literal' syntax
const obj = {
key1: value1;
key2: function () {
}
};

//'object contructor' syntax
const obj = new Object();

Object의 property에 접근하는 방법

const person = {
	name: 'cindy',
	age: 20
}
//1. dot notation -> 내가 접근하고자하는 속성의 key 이름을 정확히 알때 사용한다.
person.name
//2. bracket notation -> 내가 접근하고자하는 key 이름을 정확히 모를 때 사용한다.
person['name']

this keyword

this keyword는 현재 코드가 쓰여져 있는 object를 언급하는 것으로 object의 실제 변수명말고 this를 사용하는 이유는 construct function으로 같은 구조의 object 여러개를 생성한 경우, 옳은 값을 확실히 해주기 때문이다.

→ 리터럴 방식보다 생성자 함수로 object를 생성한 경우에 더 유용하게 사용된다.

const person1 = {
  name: 'Chris',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.'); //여기서 this는 person1 obj를 지칭하고
  }                                       //this.name은 'Chris'이다.
}

const person2 = {
  name: 'Deepti',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.'); //여기서 this는 person2 obj를 지칭하고
  }                                       //this.name은 'Deepti'이다.
}

Constructor function

자바스크립트에서 class는 object의 template를 정의하는 것이다. class로부터 object instance(class에서 정의된 데이터나 기능이 포함된 object)가 생성되면 class의 생성자 함수(constructor function)이 실행된 것이다. class로부터 object instance가 생성되는 과정을 instantiation이라 한다.

//constructor function은 기본적으로 properties와 methods를 정의하는 것이다 
// -> 어떠한 것을 return하거나 object를 생성하지 않는 함수.

//생성자 함수의 변수명 앞글자는 대문자로 써준다!!

function Person(name) {
  this.name = name;
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name + '.'); //this -> object incetance 지칭.
  };
}

//constructor function에 쓰여진 this keyword는 해당 함수를 통해 object instance가
//생성될 때 마다 object's name property의 값은 생성자 함수가 호출될때 인자로 전달된 name과
//같다는 뜻이다.