본문 바로가기
컴퓨터 사이언스/TIL 정리

[모자듀 스터디] 객체, 메서드, this

by 메리뉴데이 2022. 7. 21.

객체

 

자바스크립트엔 8개의 자료형이 있다.

오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 '원시형(primitive type)'인 것 7개와

다양한 데이터를 담을 수 있을 수 있는 객체는 참조형으로 1개

‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있는데, 

엔 문자형엔 모든 자료형이 허용

프로퍼티 키는 ‘프로퍼티 이름’  혹은 '프로퍼티 식별자'라고도 부른다.

 

여러 단어를 조합해 프로퍼티 이름을 만든 경우엔 프로퍼티 이름을 따옴표로 묶어줘야 한다.

ex. "make sth" : true;    => 점 표기법으로 프로퍼티 값을 읽을 수 없다.  => 대괄호 표기법으로 가능

                                           cf. 단, 대괄호 표기법으로 프로퍼티 이름을 표시할 때는 따옴표로 묶어줘야 !

 

마지막 프로퍼티 끝은 쉼표로 끝날 수 있다.

 

cf. 상수 객체 수정될 수 있다 !

     const는 user의 값을 고정하지만, 그 내용은 고정하지 않는다.

     const 객체는 전체적으로 설정하려고 할 때만 오류가 발생되지,

     객체 속의 내용을 일부 수정 및 변경하는 것은 가능하다. 

 

계산된 프로퍼티(computed property)

객체를 만들 때 객체 리터럴 안에 대괄호로 프로퍼티 키가 둘러싸여 있는 프로퍼티

 

working on...

 

메서드와 this

객체는 실제 존재하는 개체(entity)를 표현하고자 할 때 생성

 

자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여 => 메서드

 

객체 리터럴 메서드를 선언할 때 사용할 수 있는 단축 문법 사용가능 

ex. sayHello: function() {.....;}    =>   sayHello() {.....;}

 

메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있다.

이때 '점 앞’의 this는 메서드를 호출할 때 사용된 객체를 나타냄

함수를 객체 프로퍼티에 저장해 object.method()와 같이 메서드 형태로 호출하면 this는 object를 참조한다.

 

자바스크립트의 this는 다른 프로그래밍 언어의 this와 달리 모든 함수에서 사용할 수 있다. 

let user = { name : "Shawn" };

let admin = { name : "Admin" };

function sayHello() {
  alert( this.name );
}

this 값이 런타임에 결정되고, 컨텍스트에 따라 달라질 수 있기 때문이다.

 

 

객체 없이 호출하기: this == undefined

객체가 없어도 함수를 호출할 수 있다.

엄격 모드에서 실행하면, this엔 undefined가 할당되고,  this.name으로 name에 접근하려고 하면 에러가 발생

엄격 모드가 아닐 때는 this가 전역 객체를 참조하고, 브라우저 환경에선 window라는 전역 객체를 참조.

 

this가 없는 화살표 함수

화살표 함수는 일반 함수와는 달리 ‘고유한’ this를 가지지 않는다.

화살표 함수에서 this를 참조한다고 하면, 화살표 함수가 아닌 외부 함수의 this가 된다. 즉, 외부에서 this의 값을 가져온다 !