[D+39] 스코프, 클로저, JSON

 

 

국비지원 D+39

-  스코프, 클로저, JSON -

 

---

 

스코프

- 변수가 유효성을 가지는 범위를 나타내며, 이때의 유효성은 읽거나 쓸 수 있는 것을 나타낸다.

- 프로세스 메모리 맵의 구조에 의존적이다.

- 선언된 위치에 따라서 스코프가 결정된다.

- 같은 이름을 가진 변수가 선언 된 경우 스포크가 겹칠 수 있다.

 

• 스코프의 종류

스코프의 종류는 전역 스코프와 지역스코프로 나뉘는데 전역스코프에서 유효한 영역은 <script>...</script>내의 전체이며, 지역스코프에서 유효한 영역은 함수 자신과 그 안에 있는 하위 영역이다.

 

이때 우리가 기억해야할 것은 전역 스코프와 지역 스코프는 둘이 겹칠수 밖에 없다는 특징을 가지고 있으며, 스코프는 가까운 것이 우선순위를 가진다.

 

var a = 'a';    // 전역 스코프

const func1 = function()
{
	let b = 'b';        // 지역 스코프
	const c = 'c';      // 지역 스코프

        console.log(a);     // a
        console.log(b);     // b
        console.log(c);     // c
};

func1();

console.log(a);     // a
console.log(b);     // error!
console.log(c);     // error!

 

• 지역스코프의 특징 #1 - 함수 레벨 스코프 vs 블록 레벨 스코프

이전에 ES5를 사용해왔던 당시에 키워드는 모두 var로 사용해왔으며, 추후에 ES6가 도입된 이후에 let과 const가 새롭게 등장하게 되었다.

이때 이 두개의 가장 큰 차이점은 var는 함수 레벨 스코프이고, let과 const는 블록 레벨 스코프라는 것이다.

 

- 함수레벨 스코프

function test ()
{
	var a = 'a';

	for(var b = 0; b < 5; b++)
	{
		var c = 0;
	}

	console.log(a); // a
	console.log(b); // 5
	console.log(c); // 0
}

test();
console.log(a); // error --> test함수에서 벗어났다.
console.log(b); // error --> test함수에서 벗어났다.
console.log(c); // error --> test함수에서 벗어났다.

함수레벨 스코프는 var키워드에 적용되는 것으로 var가 사용된 변수를 불러올 때 var가 사용된 함수 범위내에서는 무조건 불러올 수 있다는 것이다.

 

접근성이 좋다는 장점을 가지고 있지만 재활용을 가장한 오용이 발생될 우려가 있다.

 

- 블록레벨 스코프

const myFunc = function()
{
	let a = 'a';
	const b = 'b';

	for(let i = 0; i < 5; i++)
	{
		let c = 'c';
		let d = 'd';
	}

	console.log(a); // a
	console.log(b); // b
	console.log(c); // error --> for문 블록에서 벗어났다.
	console.log(d); // error --> for문 블록에서 벗어났다.

}

myFunc();

블록레벨 스코프는 말그대로 "{ }" 블록 외부에서는 변수를 불러올 수 없으며, const와 let이 이에 해당한다.

 

• 지역스코프의 특징 #2 - 스코프 체인

코드의 스코프 영역을 확인하다 보면 함수의 중첩구조로 인해 스코프도 중첩 구조가 생기는 것을 확인할 수 있다.

 

내 영역에 특정 변수가 없으면 상위함수에 있는 변수를 찾으로 단계적으로 올라가 필요변수를 찾게 되는데 이때 스코프가 단계적으로 연결되어 있는 것을 확인할 수 있는데 이를 스코프 체인이라고 한다.

 

주의해야할 점은 하위에서 상위로 접근은 가능하지만 상위에서 하위로는 접근이 불가능하다. (= 단방향이다)

 

---

클로저

• 지역스코프의 특징 #3 - 클로저

클로저는 내부 함수에서 외부함수로 스코프 체이닝을 통해서 외부함수의 변수로 접근 가능한 함수의 조합을 의미한다.

즉, 스코프체이닝을 이용해서 Data의 정보은닉을 구현할 수 있다는 것이다.

 

const bookInfo = {
	title : '알기쉬운 자바스크립트',
    price : 10000,
    type : 'ebook'
};

bookInfo.title = '알기쉬운 자바';

 

여기 책의 정보를 담고있는 객체가 있다고 생각해보자.

그런데 객체는 "객체명.책제목"을 입력해서 책의 제목을 변경할 수 있듯이 변수를 private하게 설정할 수 없다는 단점을 가지고 있어 누구나 책 제목을 어떠한 절차없이 변경할 수 있게 되는 것이다.

 

자바에서는 클래스를 안에 변수를 private로 설정해줘서 외부에서 마음대로 변수를 변경하지 못하고 변경해달라는 메소드를 이용해서 변경하였다.

 

const makeInstance = function(title)
{
	return {
		getTitle : function()
		{
			return title;
		},
		setTitle : function(_title)
		{
			title = _title;
		}
	};
}

const book1 = makeInstance("알기쉬운 자바스크립트");

// 메소드처럼 이용해 변수에 접근 가능
book1.getTitle();
book1.setTitle("알기쉬운 자바");

 

이를 자바스크립트에서 구현하기 위해서 객체안에는 함수도 담을수 있다는 특징과 파라미터의 변수가 외부에서 접근할 수 없는 클로저의 특징을 활용해 자바와 비슷한 기능 구현할 수 있게 표현할 수 있다.

 

이렇게 구현하게 되면 개발자의 입장에선 코드를 구현하는데 복잡하다는 단점이 있지만, 사용자 입장에서는 메소드와 원하는 값만 넣어주면 되기 때문에 심플하다는 장점을 가지고 있다.

 

• 프로토타입

const ar1 = [1, 2, 3, 4, 5];
const ar2 = ['ab', 'cd'];

console.log(ar1);
console.log(ar2);

위와 같은 코드를 짜서 콘솔로 확인해보도록 하자.

 

그러면 배열의 정보와 함께 프로토타입이라고 하는 게 있는 것을 확인할 수 있다.

 

프로토타입을 클릭해서 확인해보면 어마어마한 내용들이 있는 것을 확인할 수 있는데 이모든것들은 배열에 관련된 메소드이다.

 

이는 자바스크립트엔진이 돌아가는 원리를 알면 이해할 수 있는데 자바스크립트는 먼저 코드의 형태를 쭉 확인하면서 변수가 어떠한 타입인지에 대해 파악한다.

그러면서 만약 변수안에 데이터 타입이 배열일 경우 배열에 필요한 기능구현이 될 수 있도록 배열 프로토타입을 붙여주는 것이다.

그렇기 때문에 우리는 각 데이터타입에 관련한 메소드를 사용할 수 있게되는 것이다.

 

프로토타입은 마치 항상 붙어있는 DNA와 같기 때문에 잊지 않도록 한다.

 

---

JSON

- JavaScript Object Notation 자바스크립트 객체 표기법

- 데이터를 저장하거나 전송할 때 주로 사용한다.

- (key-value) 형식으로 이루어져있다.

- 간단하고 직관적이다.

- 호환성이 좋다.

- JSON.stringify(), JSON.parse()

 

const book = [
	{
		title : '알기 쉬운 자바스크립트',
		price : 20000,
		type : 'paper'
	},
	{
		title : '자바스크립트',
		price : 0,
		type : 'ebook'
	}
];

// 데이터를 보낼때엔 문자데이터로 보내줘야한다.
const json_text = JSON.stringify(book, null, 2);
console.log(json_text);

// json_text를 받고나서 다시 객체화해야한다.
const json_object = JSON.parse(json_text);
console.log(json_object);