스코프 / 프로퍼티 어트리뷰트

스코프(*네임스페이스)

-다른 코드가 식별자 자신을 참조할 수 있는 유효범위 ( 식별자가 유효한 범위)

 

 

*네임스페이스:  하나의 개체를 가리킬 수 있는 범위를 나타내는 공간 , 개체를 구분할 수 있는 범위

 

스코프 체인

스코프가 계층적으로 연결된 것을 스코프 체인이라고함스코프 타입으로는 전역과 지역이 있고, (전역 < - ( 지역 < - ( 지역 ) ) ) 이런식으로 연결되있는 것을 스코프 체인변수를 참조할 때 자바스크립트 엔진은 참조하는 변수의 스코프 부터 시작해서 상위 스코프로 올라가면서 선언된 변수를 검색한다. 상속( 부모 -> 자식 )과 개념이 비슷하기에 변수를 참조하는것도 자식이 가진것을 부모가 마음대로 활용하지 못한다.

 

렉시컬 스코프(정적 스코프)

var x=1

function bye(){
    var x=10;
    hi()
}
function hi(){
    console.log(x)
}

bye()
hi()

-> 1
-> 1

 

 

동적 스코프 => 함수를 어디서 "호출"했는지에 따라 함수의 상위 스코프 결정

hi()함수의 상위 스코프는 bye() 함수의 지역 스코프, 전역스코프이다.

 

 

렉시컬 스코프(정적 스코프) => 함수를 어디서 "정의"했는지에 따라 함수의 상위 스코프 결정

hi()함수의 상위 스코프는 전역스코프이다.

 

자바스크립트는 렉시컬 스코프를 따라가기에 여기서 hi()의 상위 스코프는 전역 스코프이므로 x값이 1이 나오게된다.

Detail)

함수의 상위 스코프는 언제나 자신이 정의된 스코프다.

-> 함수의 상위 스코프는 함수 정의가 실행될때 정적으로 결정

함수 선언문으로 정의된 hi는 먼저 평가되어서 함수 객체를 생성하고

이때 생성된 hi는 자신이 정의된 스코프인 전역 스코프를 기억한다.

그래서 bye()안에서 hi를 실행시켜도 var x=10으로 값이 바뀌고 가는것이 아닌

자기의 위치(스코프)에서 실행되기에 값이 1만 나오는 것이다.

 

---

전역변수의 문제점

생명주기 ( 변수가 메모리에 할당되어 살아있는 시간 )이 길다, 검색 속도가 느림, 네임스페이스 오염

 

캡슐화(encapsulation)

말 그대로 캡슐에 객체,프로퍼티, 메서드를 넣는 것, 정보 은닉(특정 프로퍼티나 메서드 감추기)의 기능도 있음

 

JS는 private,protected,public같이 접근 제한자가 없기에 모듈 패턴을 사용한다.

(Closure챕터에서 자세히 다루겠다)

 

프로퍼티 어트리뷰트

프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 기본 값

 

내부 슬롯과 내부 메서드

-자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다.

pseudo property | pseudo method

 

-데이터 프로퍼티

key : value로 구성된 프로퍼티

const person={
    name:'Steve'
}
console.log(Object.getOwnPropertyDescriptor(person,'name'))

{value: 'Steve', writable: true, enumerable: true, configurable: true}
configurable: true
enumerable: true
value: "Steve"
writable: true
[[Prototype]]: Object

• writable: 프로퍼티 값의 변경 가능 여부
• enumerable: 열거 가능 여부
• configurable: 재정의 가능 여부

-접근자 프로퍼티

자체적으로 값 X 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수로 구성

 

getter , setter 함수라고도 함 (Java에서 사용)

 

const person={
	firstName:'Hi',
    lastName:'There',
    
    
    get fullName(){
    	return this.firstName+' '+this.lastName;
    },
    
    set fullName(name){
    	this.firstName=name.split(' ')[0];
        this.lastName=name.split(' ')[1];
    }
 }
 
 console.log(person.fullName)
 person.fullName='Kim Chi'
 console.log(person.fullName)
 
 let description=Object.getOwnPropertyDescriptor(person,'fullName')
 console.log(description)
 
Hi There
Kim Chi
{
  get: [Function: get fullName],
  set: [Function: set fullName],
  enumerable: true,
  configurable: true
}

프로퍼티 정의하기

 

const person={};


Object.defineProperty(person,'firstName',{
  value:'Hi',
  writable:true,
  enumerable:true,
  configurable:true
});
이런식으로 내가 직접 설정할수 있다.

Object.defineProperty 생략하기

• value-undefined
• get-undefined
• set-undefined
• writable-false
• enumerable-false
• configurable-false

객체 변경 방지

Object.preventExtensions

-> 확장을 금지 : 프로퍼티 추가금지

Object.seal(밀봉하다)

-> configurable: false (재정의 금지)

Object.freeze

-> writable,configurable : false

deep freeze

function deepFreeze(target) {
	if (target && typeof target === 'object' && !Object.isFrozen(target)) {
    	Object.freeze(target);
        
        const keys = Object.keys(target); // ['name', 'isMale', 'address']
        const keyLength = key.length; // 3
        for (let i = 0; i < keyLength; i++) {
        	deepFreeze(target[key]));
        }
    }
    
    return target;
}