5. Object (객체)

1. 객체 (Object)

JavaScript는 객체(Object) 기반의 스크립트 언어이며, 기본 자료형을 제외한 나머지 값들 (함수, 배열, 정규표현식)은 모두 객체.

데이터와 그 데이터와 관련된 동작(절차, 방법, 기능)을 모두 포함할 수 있는 개념적 존재. 

키(key)와 값(value)로 구성된 데이터를 의미하는 프로퍼티(property)와 동작을 나타내는 메소드(method)로 구성된 집합이며, 배열과 달리 구성 요소들의 순서를 보장하지 않음.

객체지향의 상속을 구현하기 위해 "프로토 타입" 이라는 객체의 프로퍼티와 메소드를 상속 받을 수 있음. 

1.1 프로퍼티 (Property)

객체는 이름(key)와 값(value)의 쌍인 프로퍼티들을 포함하는 컨테이너라로 할 수 있음.

- 프로퍼티 이름 : 빈 문자열을 포함하는 모든 문자열, 중복된 이름 사용 불가

- 프로퍼티 값 : 모든 값

1.2 메소드 (Method)

객체에 제한되어 있는 함수를 의미, 즉 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라고 부름.

2. 객체 생성 방법

자바에서는 클래스를 사전에 정의하고 필요한 시점에 new 연산자를 사용하여 인스턴스를 생성하지만, 자바스크립트는 클래스라는 개념이 없고, 별도의 객체 생성 방법이 존재.

- ECMAScript 6에서 새롭게 클래스가 도입되었으나, Class도 사실 함수이고 기존 prototype 기반 패턴의 Syntactic sugar.

2.1 객체 리터럴

일반적이고 간편한 자바스크립트의 객체 생성 방식. 중괄호를 {}사용하여 객체를 생성하는데, 아무것도 기술하지 않으면 빈 객체가 생성. 

1개 이상의 프로퍼티 이름과 값을 기술하면 해당 프로퍼티가 추가된 객체를 생성 가능. 

객체 리터럴에 의한 생성 방식은 new 연산자를 사용할 필요 없이 선언과 동시에 인스턴스가 생성된다는 것.

var Object = {};
console.log(typeof Object);

2.2 Object() 생성자 함수 

new 연산자와 Object() 생성자 함수를 사용하여 빈 객체를 사용할 수 있으며, 빈 객체 생성 이후 프로퍼티와 메소드를 추가하여 객체를 완성하는 방법.

객체의 프로퍼티에 새로운 값을 할당하면 프로퍼티 값은 갱신되며, 객체가 갖고 있지 않는 값을 할당하면, 프로퍼티가 새로 추가 됨. 

var Car = new Object();
Car.name = 'audi a8';

2.3 생성자 함수

객체 리터럴 방식과 Object() 생성자 함수 방식으로 객체를 생성하는 것은 프로퍼티 값만 다른 여러 개의 객체 생성에 불편.

동일한 프로퍼티를 갖는 객체임에도 매번 같은 프로퍼티를 기술해야 함을 편하게 하기 위하여, 생성자 함수를 사용하여 템플릿 처럼 사용하여 동일한 구성의 객체를 여러개 간편하게 생성.

function person (name, age){
    this.name = name;
    this.age = age;
    this.say = function(){
        console.log('I am korea idol')
    }
}

var person1 = new person('da hyun', '1998 .5 .28');
var person2 = new person('luda', '1997 .3 .6');

3. 객체 프로퍼티의 접근 

3.1 프로퍼티의 이름

프로퍼티의 이름은 기본적으로 문자열(빈 문자열 포함)로 작성.

var person = {
    name: 'J',
    gender: 'male',
    say: function () {
        console.log('Hi! My name is ' + this.name);
    },
    1 : 1,
    '2' : 2
};

console.log (typeof person)          // Object
console.log (typeof person.name)     // string
console.log (typeof person.say)      // function
console.log (typeof person["1"])     // number
console.log (typeof person[1])       // number
console.log (typeof person[2])       // number

3.2 프로퍼티 값 읽기

프로퍼티 접근 방법에는 마침표(.) 와 대괄호 ([]) 이 있음.

대괄호 접근법을 사용하는 경우, 대괄호내에 들어가는 프로퍼티 이름은 반드시 문자열이여야 함.

var person = {
  name: 'J',
  gender: 'male',
  say: function () {
    console.log('Hi! My name is ' + this.name);
  },
  1 : 1,
  '2' : 2
};


console.log(person);  // {1: 1, 2: 2, name: "J", gender: "male", say: ƒ}
console.log(person.name); // J
console.log(person[name]); // undefined
console.log(person["name"]); // J

3.3 프로퍼티 값 갱신

프로퍼티에 새로운 값을 할당하면 새로운 값으로 갱신 됨.

var person = {
  name: 'J',
  gender: 'male',
  say: function () {
    console.log('Hi! My name is ' + this.name);
  },
  1 : 1,
  '2' : 2
};

person['name'] = 'Junho';

console.log(person['name']) // Junho

3.4 프로퍼티 동적 생성

객체가 소유하고 있지 않는 프로퍼티에 값을 할당할 경우, 해당 프로퍼티를 객체에 추가하고 값을 할당.

var person = {
  name: 'J',
  gender: 'male',
  say: function () {
    console.log('Hi! My name is ' + this.name);
  },
  1 : 1,
  '2' : 2
};

person['age']='20';
console.log(person) // {1: 1, 2: 2, name: "J", gender: "male", say: ƒ, age: "20"}
console.log(person['age']); // 20

3.5 프로퍼티 삭제 

delete 연산자를 사용하여 객체의 프로퍼티 삭제 가능.

var person = {
  name: 'J',
  gender: 'male',
  say: function () {
    console.log('Hi! My name is ' + this.name);
  },
  1 : 1,
  '2' : 2
};

delete person.age // true
console.log(person) // {1: 1, 2: 2, name: "J", gender: "male", say: ƒ}

3.6 for - in 문

for-in 문을 사하면 객체(배열 포함)에 포함된 모든 프로퍼티에 대해 루프를 수행할 수 있음. 

객체의 경우, 프로퍼티의 순서가 없기 때문에 순서가 보장되지 않음. 

배열은 순서를 의식하는 데이터 구조이지만 객체와 마찬가지로 순서를 보장하지 않음.

var numbers = {
  '1':'11',
  '2':'22',
  '3':'33',
  '4':'44',
  '5':'55',
}

for (var i in numbers){
    console.log(i);
}

/* key 값이 반환
1
2
3
4
5
 */

var arrayNumber = [1,2,3,4,5]

for (var i in arrayNumber){
  console.log(i)
}

/*
0
1
2
3
4
 */

순서가 보장되지 않는 for-in을 보안하기 위해, ES6에서 for-of 가 추가됨.

var arrayNumber = [1,2,3,4,5]

for (const [index, value] of arrayNumber.entries()){
  console.log('index :'+index, 'value: '+value)
}

/*
index :0 value: 1
index :1 value: 2
index :2 value: 3
index :3 value: 4
index :4 value: 5
*/

4. Pass-by-reference

obeject type을 객체형 또는 참조형이라고 함. 참조형이란 객체의 모든 연산이 실제값이 아닌 참조값으로 처리 됨을 의미. 

기본 자료 형은 한번 객체는 프로퍼티를 변경, 추가, 삭제가 가능함으로 변경 가능한 값.

Object type의 값은 동적으로 변화할 수 있으므로 어느 정도의 메모리를 확보해야하는지 예측할 수 없기 때문에, 런 타임에 메모리 공간을 확보하고 힙 영역(Heap Segment)에 저장 됨.

var num1 = {
  val : 20
}

var num2 = num1;

console.log(num1.val, num2.val); // 20 20
console.log(num1 === num2);      // true

num2.val = 30;
console.log(num1.val, num2.val)  // 30 30

객체 리터럴 방식으로 num1을 생성. 변수 num1은 객체 자체를 저장하는 것이 아니라, 생성된 객체의 참조 값을 저장. 

변수 num2에 변수 num1의 값을 할당. 

변수 num1의 값은 생성된 객체를 가르키는 참조값이므로 변수 num2에도 같은 참조값이 저장 됨으로 num1과 num2 둘다 동일한 객체를 참조하고 있음.

5. Pass-by-value

기본자료형의 값은 값(value)으로 전달. 즉 값이 복사되어 전달.

기본 자료형은 값이 한번 정해지면 변경할 수 없으며 이들 값은 런타임(변수 할당 시점)에 메모리의 스택 영역에 고정된 메모리 영역을 점유함.

var num1 = 1;
var num2 = num1;

console.log(num1, num2);     // 1 1
console.log(num1 === num2);  // true

num1 = 30;  
console.log(num1, num2)      // 30 1

참고 : https://poiemaweb.com/