[언어공부] (혼자 공부하는 자바스크립트) Chapter 6-1 객체의 기본

Chapter 6 객체

Chapter 6-1 객체의 기본

객체(object)

자바스크립트에서 여러 자료를 다룰 때는 객체를 사용합니다. 여러 자료를 다룰 수 있는 배열 역시 객체입니다. 따라서 typeof ([]) 를 실행하면 object 가 출력됩니다. 

배열은 객체가 기반이기 때문에 배열과 객체는 상당히 비슷한데 다른 점이 있다면 배열은 요소에 접근 할 때 인덱스를 사용하지만, 객체는 키(key)를 사용합니다. 

 

객체를 선언할땐 중괄호 ( {...} ) 으로 생성하며 객체의 요소에 접근할떈 대괄호 ( [...] ) 로 접근 할 수도 있고, 온점( . )을 사용 할 수도 있습니다.

const perpon = {
  name : 'kim',
  age: 28,
  hobby: 'game',
  interest sports: 'football, basketball , baseball',
  introduce : function() {
  	console.log(`${this.name} is ${this.age} years old. He likes ${this.interest sports[0]} and ${this.interest sports[1]} and ${this.interest sports[2]}.`)
  },
}

person['name']              // 'kim'
person['age']               // 28
person['hobby']             // 'game'
person['interest sports']   // 'football, basketball , baseball'


person.name                 // 'kim'
person.age                  // 28
person.hobby                // 'game'
person.interest sports      // 'football, basketball , baseball'

 

객체를 생성할 때 키는 식별자와 문자열을 모두 사용할 수 있습니다. 단, 식별자로 사용할수 없는 단어를 키로 사용 할 때는 문자열을 사용해야 합니다. 그리고 식별자가 아닌 문자열을 키로 사용 했을 때는  무조건 대괄호( [...] )를 사용해야 객체의 요소에 접근 할 수 있습니다.

 

속성과 메소드 

배열 내부의 값은 요소 ( element ) 라고 하지만, 객체 내부의 값은 속성 ( property ) 이라고 합니다. 속성은 위의 예시에서 볼 수 있듯 문자열, 숫자, 배열, 함수 등 모든 형태의 자료형을 가질 수 있습니다. 이때, 속성 중 함수 자료형인 속성을 특별히 메소드라고 부릅니다. 

 

 

메소드 내부에서 this 키워드 사용하기

 

메소드 내에서 자기 자신이 가진 속성을 출력하고 싶을 때는, 자신이 가진 속성임을 분명히 표시하기 위해 this 키워드를 사용합니다. 위의 예시에서 person.introduce 가 메소드입니다.

 

동적으로 객체 속성 추가 / 제거  

객체를 생성한 후에 속성을 추가/제거하는 것을 '동적으로 속성을 추가/제거한다'라고 표현합니다.

 

동적으로 객체 속성 추가하기

객체.속성 = 값

 

동적으로 객체 속성 제거하기

delete 객체. 속성

 

메소드 간단 선언 구문

위의 예시에선 메소드: function () { }의 형태로 만들었지만, 최신 버전의 자바스크립트에서는 조금 더 쉽게 선언할 수 있는 전용 구문이 있습니다.

 

const 객체 = {메소드(매개변수) { }}

 

화살표 함수를 사용한 메소드

function () {} 형태로 선언하는 익명 함수와 () => {] 형태로 선언하는 화살표 함수는 객체의 메소드로 사용될 때 this 키워드를 다루는 방식이 다릅니다. 

 

const person = {
  name: "kim",
  sayHi() {
    console.log(`Hi ${this.name}`);
  },
  sayHello: () => {
    console.log(`Hello ${this.name}`);
  },
};

person.sayHi();        // Hi kim
person.sayHello();        // Hello

• 여러 문서에서 반복적으로 찾을 수 있는 표현은, 화살표 함수에는 고유한 this가 없다는 것이다.
• 화살표 함수에는 고유한 this가 없기 때문에, 화살표 함수 외부에서 this를 가져온다. 즉, 위의 화살표 함수에선 person 객체 외부에서 this를 가져오기 때문에, window 객체에서 this를 가져온다.
• 모던 자바스크립트 튜토리얼: 메서드와 this, 화살표 함수 다시 살펴보기

화살표 함수 다시 살펴보기

 

 

 

참고도서 : 혼자공부하는 자바스크립트 (https://www.hanbit.co.kr/store/books/look.php?p_code=B8393055290)

https://www.hanbit.co.kr/store/books/look.php?p_code=B8393055290%29

참고 : https://www.youtube.com/playlist?list=PLBXuLgInP-5kxpAKy2DNXoebCse2grHjl

혼자 공부하는 자바스크립트

참고 : https://garudanish.tistory.com/10?category=961305 

혼자 공부하는 자바스크립트 6장 - 객체