JS05 - 전역 변수의 문제점 & 프로퍼티 어트리뷰트

전역 변수의 문제점 & 프로퍼티 어트리뷰트

2022-01-29에 씀

본 시리즈는 모던 자바스크립트 Deep Dive 책을 참고하여 작성하고 있습니다.

전역 변수의 문제점

지역변수와 전역변수에는 생명 주기에 차이가 있다

변수의 생명 주기

선언에 의해 생성 → 할당으로 값을 가짐 → 언젠가 소멸

지역 변수의 생명 주기

함수가 호출되면 생성되고, 종료되면 소멸

1var x = 'global'
2
3function foo() {
4 console.log(x); // 지역 스코프 호이스팅 --> undefined 출력
5 var x = 'local';
6}

호이스팅은 스코프 단위로 동작한다.

전역 변수의 생명주기

코드가 로드되자마자 해석+실행됨

전역 변수의 문제점

전역 변수 사용 억제하기

  1. 즉시 실행 함수 사용
1(function() {
2 var foo = 10;
3}());
  1. 네임스페이스 객체 사용
1var NAMESPACE = {};
2NAMESPACE.name = 'lee';
  1. 모듈 패턴
1var Counter = (function() {
2 var num = 0;
3 return {
4 increase() { ++num };
5 decrease() { --num };
6 }
7}());
8
9Counter.num; // 0
  1. ES6 모듈
1<script type="module" src="index.mjs"></script>

let, const 키워드와 블록레벨 스코프

var의 문제점

let, const 키워드

1const a = 1;
2a = 3; // error!
3
4const b = { name: "kee" };
5b.name = "lee"; // ok
6b.age = 23; // ok
7
8b = { address: "suwon" }; // error!

프로퍼티 어트리뷰트

내부 슬롯과 내부 메서드

프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체

프로퍼티 상태

프로퍼티 어트리뷰트 → 자바스크립트 엔진이 제공하는 내부 슬롯

Object.getOwnPropertyDescriptor → 프로퍼티 디스크립터를 간접적으로 확인 가능하다

접근자 프로퍼티 → 데이터 프로퍼티의 값을 읽거나 저장 시 사용하는 접근자 함수로 구성

1const person = {
2 firstName: "name",
3 lastName: "kin",
4
5 get fullName() {
6 return `${this.firstName} ${this.lastName}`
7 }
8
9 set fullName(name) {
10 const [firstName, lastName] = name.split(' ')
11 this.firstName = firstName;
12 this.lastName = lastName;
13 }
14};
15
16person.fullName; // 'name kin'
17person.fullName = 'mane kim';
18person.firstName; // 'mane'
프로필 사진

조예진

이전 포스트
JS04 - 함수와 스코프
다음 포스트
JS06-1 생성자 함수