Javascript 객체

JavaScript의 객체는 속성(데이터)과 메서드의 집합입니다. C#이나 Java와 같은 Class 개념을 가지고 있지만 좀 더 자유로운 특징을 가지고 있습니다.  객체를 정의하는 방법은 객체 리터럴과 생성자 함수 방식이 있습니다. 

 

우선 JavaScript 객체에 대해 살펴보겠습니다. 

const MyObj = { name:'Sample', age:20 };

가장 기본적은 객체 리터럴 선언입니다. 위 코드에서 객체를 선언할 때 const로 지정한 이유는 ES6 버전 이후부터는 명시적으로 변수를 선언하는 것을 권장하기 때문입니다. 

 

잠시 var, let, const에 대해 설명하면 var는 중복 선언 및 재할당이 가능하고 let은 재할당만 가능하며,  const는 재사용이 불가합니다. 즉, const로 선언한 후 다시 선언을 하면 오류가 발생되게 되어 있습니다.   

 
let var_1 = 'A';
let var_1 = 'B'; // 다시 선언시 에러 발생 : Uncaught SyntaxError
 
 
const var_2 = 'A';
var_2 = 'B'; // 재할당시 에러 발생 : Uncaught TypeError
 

var를 함수 외부에 선언하면 전역변수로 인식되고 재할당 및 재사용이 가능하여 소스 상 의도하지 않은 결과를 나오게 할 수도 있습니다. ES6 버전 이후에는 let과 const를 권장하고 있으니 let과 const를 사용하는 것을 추천드립니다. 

 

객체의 속성 

객체의 속성은 이름:값 쌍을 속성이라 합니다. 보통 속성에 접근하는 방법은 아래와 같이 접근합니다. 

 

 
objectName.propertyname 
 
or
 
objectName["propertyName"]
 

 

객체의 메서드 

 
const MyObj = {
  attr_1: "Sample",
  print : function() {
    console.log(this.attr_1);
  }
};
 

위 MyObj에 print가 메서드입니다.

 

메서드에 접근할 때는 objectName.methodName() 으로 접근합니다.

 

JavaScript에서 함수를 사용할 때 () 를 붙이느냐 안 붙이느냐에 따라 쓰임새가 다릅니다. 메서드에 ()를 붙이는 경우는 함수를 실행시키는 것이고, 안 붙이는 경우는 함수의 정의(선언)를 가져오는 것입니다. 

 

 
function Sample_1(){
    return "Sample";
}
 
var MyObj = {
    func_1: Sample_1(), // 값의 할당 --> 속성
    func_2: Sample_1    // 메서드 정의 할당  -> 메서드
}
 
function test() {0
    console.log(MyObj.func_1);   // Sample
    console.log(MyObj.func_2()); // Sample
    console.log(MyObj.func_2);  // 메서드의 정의
    /*
    ƒ Sample_1(){
        return "Sample";
    }
    */
}
 

 

객체 생성 방법

 
// 생성자 함수 
var MyObj = new Object();
MyObj.attr_1 = 'Sample';
 
 
// 객체 리터럴
var MyObj = { attr_1: 'Sample' }
 

 

위 두 방법은 똑같은 결과를 가지고 있습니다. 하지만 객체 리터럴의 코드가 좀 더 간결합니다.  그래서 객체 리터럴로 정의하는 것을 권장합니다.

 

하지만 객체 리터럴과 생성자 함수 정의는 사용 방법이 조금 다릅니다. 

 

객체 리터럴은 전역객체와 유사합니다. 하나의 객체로 작업을 하는 거죠. 그래서 new 키워드를 붙여서 새로운 객체를 만들 수 없습니다. 또한 리터럴 객체는 대괄호 내부에  변수나 메서드가 구현되어 변수의 유효범위에 대해 별도로 신경 쓰지 않아도 됩니다. JavaScript에서 객체를 정의할 때는 리터럴을 기본으로 보시면 됩니다. 

 

생성자 함수는 new를 사용하여 여러 개의 객체를 생성해 사용할 수 있습니다.

 

즉, 객체 리터럴은 한번 정의하여 전역으로 사용할 때 사용하고, 생성자 함수는 각각의 객체를 가져와 독립적으로 사용해야 할 때 정의합니다. 

 

 
const MyObj = funciton(obj) 
{
    this.attr_1 = obj.attr_1;
    this.act = function(){
        return this.attr_1;
    };
}
 
let smaple = new MyObj('sample')
smaple.act();
 

 

 

하지만 생성자 함수를 사용할 경우 메서드의 경우 각 객체마다 추가되기 때문에 효율적이지 않습니다. 그래서 생성자 함수의 메서드는 prototype에 추가하는 것을 권장합니다. 

 

 
MyObj.prototype.act = function(){
    return this.attr_1;
}
 

 

생성자 함수의 반환값

생성자 함수의 경우 객체를 호출하면 항상 객체가 반환됩니다. 기본 반환되는 객체는 this로 참조되는 객체입니다. 

 

 

생성자 함수의 this

JavaScript는 함수를 호출할 때 매개변수로 전달되는 인자값 이외에 this를 암묵적으로 전달합니다. 이때 this 개체는 함수를 호출할 때 함수가 어떻게 호출되었는가에 따라 바인딩되는 개체가 동적으로 결정됩니다.

 

보통 객체 메서드에서 this는 객체 그 자체를 가리키지만 내부 메서드에서는 전역객체를 가리킵니다. 

 

 
const MyObj = {
    method_1: function(){
        console.log(this); // MyObj 를 가리킴
        
        function innerMethod(){
            console.log(this): // window 객체를 가리킴
        }
    
    }
}
 

 

이런 문제를 회피하기 위해서는 내부 메서드에 전달할 수 있는 변수에 this를 할당하여 처리해야 합니다. 

 

 
const MyObj = {
    method_1: function(){
        let thisObj = this;
        
        function innerMethod(){
            console.log(this):    // window 객체를 가리킴
            console.log(thisObj); // MyObj 객체를 가리킴
        }
    
    }
}