[10. 객체] 모던 자바스크립트 Deep Dive 정리

wkahd01·2021년 11월 11일
1

JavaScript

목록 보기
17/22

10. 객체

const counter = {
  num:1,
  increase(){
    this.num++
  }
}

프로퍼티

위의 코드에서 num: 1을 프로퍼티라고 하며,
num 부분은 키, 1 부분은 값이라 부른다.

메서드

위의 코드에서 increase(){ ... } 부분을 메서드라고 한다.
프로퍼티와 비슷하지만, 가장 큰 차이점은 값 대신 함수가 들어간다는 것이다.

메서드는 프로퍼티를 참조하고 조작할 수 있다.
위의 코드에서 보면, increase함수가 this.num++을 통해 num프로퍼티의 값을 1 증가시킨다는 것을 볼 수 있다.

프로퍼티 CRUD

Create

객체에 없는 프로퍼티에 값을 할당하면, 프로퍼티가 동적으로 생성된다.

const person = {
  age: 22;
}
person.name = 'jamong';

Read

마침표 표기법, 혹은 대괄호 표기법을 통해 접근할 수 있다.
ex) person.name, person['name']

Update

이미 존재하는 프로퍼티에 값을 할당하면 된다.

const person = {
  name: 'oseung';
}
person.name = 'jamong';

Delete

사실 이 부분이 가장 흥미로웠는데, delete 연산자를 통해 객체의 프로퍼티를 삭제한다는 것이다. 기존의 cru와는 다른 동작 방식이여서 신기했다.
ex) delete person.age


QnA

Q.브라우저 환경과 node.js 환경에서 실행 결과가 달라지는 경우가 가끔씩 존재함.

A. 브라우저의 전역 변수에 특정 변수가 암묵적으로 존재하고 있는 경우 결과가 달라질 수 있다(전역 변수를 불러오기 때문)

ex) name 변수

profile
꾸준하게 공부하기

0개의 댓글