본문 바로가기
교육후 개인공부/JavaScript

[JS] 객체

by 뭉지야 2024. 1. 25.
728x90

객체는 여러개의 프로퍼티로 구성되어있다.

프로퍼티는 '키:값' 형태를 가지고 있다.
프로퍼티의 값이 함수일경우 이것을 메서드라 부른다.

메서드는 객체의 프로퍼티 중 객체의 동작을 지정하는 함수이다.

let book1 = {
  title: '웹 표준의 정석",
  pages: 648
}

 

위의 코드에서 title과 page는 키

웹표준의정석과 648은 값

title: 웹표준의 정석 이거는 프로퍼티

 

 

<프로퍼티 삭제하기>

delete 객체명.키

delete book.pages

 

키와 값이 모두 삭제된다.

 

프로퍼티에서 키는 그대로 두고 값만 제거할경우, 키의 값을 'undefined'로 지정한다.

book.author = undefined

 

 

<메서드>

메서드는 객체의 프로퍼티 중 객체의 동작을 지정하는 함수이다.

메서드를 선언하는 방법은 일반적인 함수를 선언하는 방법과 비슷하다.

ECMAScript 2015에서는 메서드를 정의할때 function이라는 예약어를 사용하지 않고 간단하게 표기할수있다.

let book3 = {
 title: '점프 투 파이썬',
 pages: 356,
 buy: function(){
   console.log("메롱");
 }
}

 

let book3 = {
 title: '점프 투 파이썬',
 pages: 356,
 buy(){
   console.log("메롱");
 }
}

 

book3라는 객체에서 buy()라는 메서드를 정의한거다.

 

 

메서드에 따라서는 객체 안에 있는 프로퍼티값을 사용해야 할 경우도 있는데 이때 this라는 예약어를 사용한다.

let book4 = {
 title: '점프 투 파이썬',
 pages: 356,
 finish: function(){
   book4.done === false ? console.log("읽는중") : console.log("완독");
 }
}

 

let book4 = {
 title: '점프 투 파이썬',
 pages: 356,
 finish: function(){
   this.done === false ? console.log("읽는중") : console.log("완독");
 }
}

 

객체의 메서드에서 this는 현재 객체를 가리킨다.

 

자바스크립트의 this라는 예약어는 어디에서 사용하느냐에 따라 가리키는 대상이 달라진다는 것에 주의하자.

객체의 메서드를 정의할때 function(){.....} 에서 사용하는 this는 현재 객체를 가리킨다. 

하지만 화살표 함수를 사용할때 this를 사용하면 최상위 객체인 window 객체를 가리킨다. 그래서 화살표 함수에서는 this를 사용하지 않도록 주의하자!!!

 

728x90

'교육후 개인공부 > JavaScript' 카테고리의 다른 글

[JS] prototype, __proto__  (0) 2024.01.25
[JS] 객체의 키와 값에 접근하기  (0) 2024.01.25
[JS] 생성자함수, 클래스, 인스턴스  (0) 2024.01.25
스코프 (미완성)  (0) 2024.01.02