[강좌]자바스크립트 객체안에서 함수 프로퍼티 사용방법 및 this

자바스크립트 객체 안에서 함수 프로퍼티 사용방법 및 this에 관해 설명하겠습니다.

 

객체 내의 함수생성방법이 아닌 일반 함수관련 사항은 아래 URL을 참조하세요.

blueoceannshark.tistory.com/entry/%EA%B0%95%EC%A2%8C%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%95%A8%EC%88%98%EB%8B%A4%EC%96%91%ED%95%9C-%ED%95%A8%EC%88%98%ED%91%9C%ED%98%84-%EC%A0%95%EB%A6%AC

 

객체내의 함수 프로퍼티 생성 방법

const superman = {
    name : 'kang',
    age :30,
    fly : function(){
        console.log("fly");
    }
}

위와 같이 객체를 생성하고 fly : function(){}을 이용해 함수를 생성하면 됩니다.

사용방법은

superman.fly(); 와 같이 사용하면 됩니다.

 

객체 내의 단축함수 프로퍼티 생성 방법

const superman = {
    name : 'kang',
    age :30,
   fly(){
        console.log("fly");
    }
}

위 코드와 같이 기본 함수프로퍼티 생성하는 방법에서  : function를 제거하면 됩니다.

함수 호출은 기본 함수 호출과 똑같은 방법으로 사용하면 됩니다. ex) superman.fly(); 

 

this 사용방법

객체 내에서 this사용 시 자기 자신의 객체를 가리킵니다. 예를 들어 보겠습니다.

let user = {
        name : 'KIM',
        hello : function(){
            console.log(user.name);
            console.log(this.name);
        }
}
 
user.hello();

--------결과--------

KIM

KIM

---------------------

 

위 코드를 보시면 hello 함수에서 user.name과 this.name 즉 자기 자신의 name프로퍼티에 접근하는 것을 볼 수 있습니다. 여기서 user(객체 이름)를 사용하는 것과 this을 사용하는 것의 차이는 뭘까요? 아래 예제를 통해 확인해보겠습니다.

 

let user = {
        name : 'KIM',
        hello : function(){
            //console.log(user.name);
            console.log(this.name);
        }
}
 
let user1 = user;
user = null;
user1.hello();

--------결과--------

KIM (4번째행에서 에러가 나기 때문에 해당행은 주석 처리했다.)

---------------------

 

위 코드에서 보면 user의 객체를 user1에 초기화한 후(let user1 = user;)

user = null로 다시 초화 하고(user = null;) user1 객체를 이용해 hello함수를 호출하고 있습니다.(user1.hello();)

user1 객체가 hello함수를 호출할 때 hello 함수 내의 onsole.log(this.name); 에서 this는 user1 객체를 가리킵니다.

때문에 user1 객체의 name프로퍼티가 출력됩니다.

 하지만 console.log(user.name); 의경우 user1 객체에서 hello함수를 호출했음에도 user객체의 name프로퍼티가 출력됩니다. 하지만 user객체를 null로 초기화했기 때문에(user = null;) user의 name프로퍼티를 찾을 수 없게 되고 해당 구문은 에러를 발생시키게 됩니다. 

즉 차이점은 user.name 은 user객체의 name프로퍼티에 접근하는 것이고 this.name은 자기 자신 객체의 name프로퍼티에 접근하는 것을 의미합니다.

 

 

객체 내의 화살표 함수 사용방법

let man = {
    name : 'hong',
    sayHello:()=>{
        console.log("hi"); 
    }
}

위와 같이 'function'을 빼고 ')' 뒤에 '=>'를 넣어 주면 됩니다.

 

객체 내 화살표 함수에서 this

객체 내의 화살표 함수에서  this는 객 제자신을 가리키는 게 아니고 전역 객체를 가리킵니다. 전역 객체란 브라우저에서 window를 말하며 Node js에서는 global을 뜻합니다.

let man = {
    name : 'hong',
    sayHello:()=>{
        console.log(this); 
    }
}
 
man.sayHello();

--------결과--------

Window {window: Window, self: Window, document: document, name: "", location: Location, …}

---------------------

위 결과처럼 브라우저에서 this는 윈도를 가리킵니다. 그래서 객체 내에서는 화살표 함수를 사용하지 않는 것이 좋습니다.

 

 

 

 

 

 

유튜브 코딩앙마 님의 영상을 보고 공부한 내용을 바탕으로 작성하였습니다.
혹시 틀린 내용이 있다면 댓글 부탁드립니다.