[Javascript] 객체(Object)

객체(Object)

var MyInfo = {
  firstName: 'nu',                                                                                        
  lastName: 'nu'
};

자바스크립트에는 

(Boolean, Null, Undefined, Number, String, Symbol (ES6), Object)

다음과 같은 7개의 자료형이 존재한다.

이 중에 Object(객체)를 제외한 자료형은 원시형(Primitive type)이며 Object는 원시형이 아니다.

함수 또한 1급 객체로써 Object 타입에 들어가며, 배열도 객체이다.

위의 코드에서 콤마로 구분되는 값들을 속성(Property)이라고 한다.

이 때, 좌측의 값이 key, 우측의 값이 value이다.

즉 속성은 Key : Value 값으로 이루어져있다.

배열(Array)

var firstArray = [];
var secondArray = [100, "good", [1,2,3], { one: 1 }];                                                     

앞서 말한것 처럼 자바스크립트에서는 배열도 객체이다.

배열의 특징으로는 [] 괄호로 표현되며, 이 안에 데이터를 쉼표를 구분하여 넣게 된다.

그리고 데이터는 원시형과, 배열, 객체를 모두 담을 수 있다.

또한, 각 주소값(index)마다 순서가 있으며, 일반적인 객체와 다르게 키 값이 없다.

좀 더 다르게 말하자면 배열에서는 주소값이 키의 역할을 한다고 생각하면 편하다.

다른 언어에서와 마찬가지로 배열이 가지고 있는 가장 큰 장점중의 하나가 

순서가 있고, 주소값으로 접근이 가능하다는 것이다.

자바스크립트 객체의 생성방법

1. 객체 리터럴

var obj = {
    name : "jim",
    gender : "male",
    phoneNumber : "01029320323",
    
    callPeople : function(){        
    console.log("hello " + this.name +"!");                                                                
    }
};

일반적인 객체를 선언하는데 자바 스크립트에서 제공하는 리터럴을 사용하자.

리터럴 방식이란 var obj = { } 이나 var arr = [] 와 같은 방식으로 선언하는 것을 말한다.

리터럴이 아닌 방식은 obj = new Object() 나 arr = new Array() 등이 있다.

공식 문서에서는 리터럴 방식을 권장하는데 리터럴을 사용할 경우

1. 가독성 향상

2. 속도 향상

3. Object나 Array라는 생성자 함수의 Override방지

3가지 장점이 있기 때문이다.

리터럴 방식으로 객체를 만들면 반복적으로 동일한 객체 생성하기 위해 

하드코딩 해야하는 단점이 있다.

2. 생성자 패턴

function People(name, gender, phoneNumber){
    this.name = name;
    this.gender = gender;
    this.phoneNumber = phoneNumber;
    this.callPeople = function(){
        console.log("hello " + this.name +"!");                                                          
    }
}
 
var john = new People("john","male","0293029302");
var jim = new People("jim","male","01029392839");

앞서 살펴본 리터럴 생성과는 다르게, 동일한 속성값을 가지는 인스턴스를 여러개 만들어야한다면

베이스가 되는 생성자를 만들고, 이를 new 키워드로 인스턴스화 시켜줄 수 있다.

생성자는 기본적으로 함수의 모습을 하고 있는데, 

자바스크립트는 언어내에서 별도로 생성자 함수와 함수의 구분을 지어줄만한 것을 제공해주지 않는다.

그러므로 함수가 있을 때, 일반적인 호출과 new 키워드를 이용한 호출이 동시에 가능하다.

생성자는 인스턴스를 만드는데 필요한 설계도와 같은 역할을 한다.

따라서 프로퍼티를 선언할 때, this 키워드를 사용한다.

위 코드와 같은 생성자 함수에서는 prototype을 사용하지 않으므로 

내부에 정의된 메소드는 인스턴스를 만들때마다 계속 생겨 메모리를 낭비하는 단점이 있다.

3. 생성자 패턴 + 프로토타입

function People(name, gender, phoneNumber){
    this.name = name;
    this.gender = gender;
    this.phoneNumber = phoneNumber;
 
}
 
People.prototype.callPeople = function(){        
    console.log("hello " + this.name +"!");
}
 
var john = new People("john","male","0293029302");                                                      
var jim = new People("jim","male","01029392839");

기존의 생성자 패턴에 메소드를 prototype에 추가시키는 패턴이다.

함수를 제외한 원시형에 따른 프로퍼티들은 생성자 내부에 정의하고

인스턴스마다 동일하게 사용되는 메소드는 객체에 기본적으로 생기는 prototype에 넣어뒀다.

메소드를 생성자로 사용되는 함수에 넣지않고 prototype에 넣을 때 장점은

인스턴스화 될 때 메소드가 해당 인스턴스마다 만들어지지 않고,

메모리에서 하나의 메소드만을 참조하기 때문에 메모리 낭비가 작아진다.