<div id="readability-page-1" class="page"><div><div><h2 id="16ed">블록바인딩</h2><div><a rel="noopener ugc nofollow" href="/?source=post_page-----40a98d6d9b0d--------------------------------"><div aria-hidden="false"><img alt="Jeong Woo Ahn" src="https://miro.medium.com/v2/resize:fill:88:88/2*5-DkBQYvxo0TLldXjX88Og.png" width="44" height="44" loading="lazy" data-testid="authorPhoto"></div></a></div></div>오랜만에 스터디를 진행하게 되었다. 한 신입 개발자의 성장에 대한 목마름으로부터 시작된 스터디였다. 그래서 둘이서 진행한다는 생각으로 시작했고 혹시 주니어 개발자 중에 함께 하실분이 있을 수 있겠다 싶어 슬랙에 올리니, 올리자마자 10명이 넘는 분이 참여의사를 밝혔다. 시니어분들도 여럿 참가의사를 밝혔다!시니어 분들이 도대체 왜! 라는 생각을 잠시 했지만 그 분들의 기여로 더 알찬 스터디가 될 수도 있겠다고 생각했다. 3주차까지 진행을 했는데 아니나 다를까 오히려 시니어 분들의 열정으로 후끈후끈 달아오르고 있다.이렇게 다양한 구성과 많은 인원을 데리고 진행을 해보는것은 처음이다. 재미도 있고 배우는것도 많지만 진행자 입장에서는 긴장이 많이 되는것은 사실이다. 세미나 진행에 대해서는 종료 후에 한번 회고를 해봐야겠다고 생각했다. 그 동안은 간략하게 배웠던 내용을 정리해서 올릴 것이다.</div><div>책 이름: <a href="https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=122260559" rel="noopener ugc nofollow" target="_blank">모던 자바스크립트</a>이 책의 대상독자에 대해서 이렇게 언급하고 있다.<blockquote>이 책은 자바스크립트와 ECMAScript 5에 익숙한 사람들을 위한 책이다. 이 책을 읽기 위해 자바스크립트 언어 자체를 깊게 이해할 필요는 없지만, 언어에 대한 기초 지식이 ECMAScript 5와 6 사이의 차이점을 이해하는 데는 도움이 될 것이다. 특히 이 책은 브라우저 또는 Node.js 환경에서 최신 언어를 배우고자 하는 중상급 자바스크립트 개발자를 대상으로 한다.</blockquote><figure></figure>1장을 시작하기 전에 간략하게 자바스크립트 역사에 대해 요약해보면 아래와 같다.(via 제미니)자바스크립트는 웹 개발의 필수 언어로, 웹 페이지에 동적인 기능을 추가하는 데 사용됩니다. 1995년에 처음 등장한 이후 많은 변화를 거쳐 현재에 이르렀습니다.1. 초기 (1995–1997)<ul><li id="fbe6">넷스케이프의 Brendan Eich가 “Mocha”라는 이름으로 개발</li><li id="6ea3">“LiveScript”로 이름 변경 후 넷스케이프 내비게이터 브라우저에 탑재</li><li id="f5b1">자바와 유사한 이름으로 인해 “JavaScript”로 최종 명칭 확정</li></ul>2. 표준화 (1997–2007)<ul><li id="c31e">ECMA International에서 ECMAScript 표준 제정</li><li id="1d73">JavaScript의 버전 관리 및 향후 개발 기반 마련</li><li id="4050">다양한 브라우저에서 JavaScript 지원</li></ul>3. 발전 (2008–2015)<ul><li id="f6c7">Ajax 등장으로 웹 개발 패러다임 변화</li><li id="88ee">Node.js 등장으로 서버 측 개발에도 사용 가능</li><li id="1451">JavaScript 라이브러리 및 프레임워크 활발히 개발</li></ul>4. 현재 (2016-현재)<blockquote>웹 개발뿐만 아니라 모바일 앱, 게임 개발에도 사용TypeScript 등 새로운 언어 등장으로 JavaScript 발전 지속</blockquote>매우 불완전한 상태로 세상에 나온 이 언어가 계속 살아남고 진화해서 개발 생태계에 막대한 영향을 끼치게 되었으니 90대 부터 인터넷을 접해온 나로서는 감회가 새로울 수 밖에 없다. (이 역사이야기를 할때는 시니어 개발자들의 경험담 이야기 속으로 빠져들 수 있으니 주의할것. )자 이제 시작해보자!<h2 id="81df">1장 블록 바인딩</h2><h2 id="2bce">1.1 var 선언과 호이스팅</h2>변수 선언의 동작방식은 자바스크립트 프로그래밍에서 가장 까다로운 부분 중 하나였음변수란? 스코프내 값에 바인딩된 이름바인딩이란?<blockquote>프로그램 내에서 변수, 배열, 라벨, 절차 등의 명칭, 즉 식별자(identifier)가 그 대상인 메모리 주소, 데이터형 또는 실제 값으로 배정되는 것이 이에 해당되며, 원시 프로그램의 컴파일링 또는 링크 시에 확정되는 바인딩을 정적 바인딩(static binding)이라 하고, 프로그램의 실행되는 과정에서 바인딩 되는 것을 동적 바인딩(dynamic binding)이라고 한다.via <a href="https://velog.io/@yoho98/%EB%B0%94%EC%9D%B8%EB%94%A9binding" rel="noopener ugc nofollow" target="_blank">바인딩 (Binding)</a></blockquote>C기반의 언어에서 변수는 선언한 위치에서 바로 만들어지는것에 반해 자바스크립트는 선언 방식에 따라 다르다.⇒ 이를 보완하기 위해 ES6에서 변수의 스코프를 더 쉽게 제어할 수 있는 옵션을 제공한다.<pre>function getValue(condition) { if (condition) { var value = "blue"; return value; } else { // value는 여기서 undefined 로 존재한다. value = 'red' console.log(value) return null; } console.log(value) // value는 여기서 undefined 로 존재한다. }</pre>자바스크립트 엔진은 내부적으로 getValue 함수를 다음 예제처럼 변경한다.<pre>function getValue(condition) { var value; if (condition) { value = "blue"; return value; } else { return null; } }</pre><ul><li id="f8c1">value 변수 초기화 코드는 같은 지점에 남아있지만</li><li id="2bca">선언은 함수의 맨 위로 호이스팅 된다.</li><li id="8909">호이스팅 선언에 대한 이해가 어렵고 버그를 발생시키기도</li><li id="0c54">ES6 에서는 변수 생명 주기를 개발자가 잘 제어하도록 블록 레벨 스코프 옵션이 도입</li><li id="e2de">이미 많은 C 기반 언어는 블록 스코프로 동작</li></ul><h2 id="9e2a">1.2 블록-레벨 선언</h2>주어진 블록 스코프 밖에서는 접근할 수 없는 바인딩을 선언하는것. 블록 스코프는 아래 두 가지 곳에서 만들어진다.<ul><li id="c1bb">함수 내부</li><li id="0ae7">블록 내부({와 }를 사용, 화살표함수)</li></ul><h2 id="5267">1.2.1 let 선언</h2>let 으로 선언된 변수<ul><li id="d8da">의 스코프는 현재의 코드 블록으로 제한된다.</li><li id="9c3e">블록 위로 호이스팅되지 않는다.</li></ul><h2 id="8af5">1.2.2 재정의 금지</h2>let 선언은 같은 스코프 안에서 중복 선언은 안된다.<pre>var count = 30;let count = 40; // Uncaught SyntaxError: Identifier 'a' has already been declared</pre>다른 스코프에서는<pre>let count = 30; if (condition) { console.log(count) // error let count = 40; console.log(count) // 40 } console.log(count) // 30</pre><h2 id="afb5">1.2.3 const 선언</h2><ul><li id="ed65">const 로 선언된 바인딩은 상수(constants)로 간주된다.</li><li id="a961">설정하면 변경할 수 없다.</li><li id="6ae0">역시 재정의 금지</li><li id="e452">모든 const 바인딩은 선언할 때 초기화해야 한다.</li><li id="4539">let과 마찬가지로 블랙-레벨 선언이므로 블록 바깥에서 접근 안되며 호이스팅 되지 않는다.</li></ul><pre>const name; // Uncaught SyntaxError: Missing initializer in const declaration</pre>한번 선언한 const 는 새 값을 할당할 수 없다.하지만 할당된 값이 객체라면 객채의 내부 값을 변경하는것은 가능하다.<pre>const person = { name: "Nicholas" }; // 문제 없이 동작 person.name = "Greg"; // 에러 발생 person = { name: "Greg" }</pre><h2 id="4e9e">1.2.4 임시 접근 불가구역</h2>코드를 해석할 때 자바스크립트 엔진은 다음 블록을 조사하고 그 블록에서 변수 선언을 발견하면, 그 선언을 (var의 경우에는) 함수 최상단이나 전역 스코프로 호이스팅 하거나 (let 과 const의 경우에는) TDZ 내에 배치한다.<pre>console.log(typeof value); // 에러는 나지 않지만 예상하지 못한 결과 undefined console.log(typeof value2); // Uncaught ReferenceError: value2 is not defined let value2 = 1;</pre><h2 id="f6e3">1.3 반복문 안에서의 블록 바인딩</h2><pre>for (var i = 0; i &lt; 10; i++){ process(items[i]) } // 여기서도 i 에 접근 가능 console.log(i); // 뭐가 나올까요? 10</pre>for 문의 카운터는 블록레벨 변수 사용을 권장이와 관련된 오래된 문제<pre>var funcs = [];for (var i = 0; i &lt; 10; i++){ funcs.push(function(){ console.log(i); }) }// 어떻게 출력될까? funcs.forEach(function(func){ func(); })// 10, 10, 10, 10 ...</pre><h2 id="423c">1.3.2 반복문에서 let의 선언</h2><pre>var func = [];for (let i = 0; i &lt; 10; i++) { func.push(function(){ console.log(i); }) }func.forEach(function(func){ func(); // 0, 1, 2..., 9 순서로 출력 })</pre>for-in, for-of 문에서도 마찬가지.<h2 id="bc3a">1.3.3 반복문에서의 const 선언</h2>for 반복문에서 const를 카운터로 선언할 수는 있지만 그 값을 변경하려고 하면 에러가 난다.반면에 const 변수가 for-in, for-of 문안에서 사용될 때는 let 변수와 비슷하게 동작한다. 따라서 아래 코드는 정상동작 한다.<pre>let func = []; let object = { a: true, b: true, c: true };for (const key in object) { funcs.push(function(){ console.log(key); }) }funcs.forEach(function(func){ func(); // "a", "b", "c" 순서로 출력 })</pre><h2 id="4d30">1.4 전역 블록 바인딩</h2><ul><li id="8b06">var를 전역 스코프에서 사용하면 전역 객체(브라우저는 window)에 생성된다.</li><li id="a282">window 객체에 선언된 var 선언은 그 값을 덮어쓸 수 있으므로 안전하지 않다.</li><li id="163d">let이나 const를 전역 스코프에서 아용하면 전역 스코프에 새로운 바인딩이 생성되지만, 전역 객체의 프로퍼티로 추가되지는 않는다.</li></ul><pre>// 브라우저 내에서 let name = "Hello"; console.log(name); // "Hello" console.log(window.name === name); // false</pre><h2 id="e9dd">1.5 블록 바인딩을 위한 모범 사례</h2>const를 기본으로 사용하고 변수 값을 변경해야 할 때만 let을 사용하는 것. 예상치 못한 값 변경은 버그의 원인이 될 수 있기 때문이다.</div></div>

Stories by Jeong Woo Ahn on Medium

블록바인딩
오랜만에 스터디를 진행하게 되었다. 한 신입 개발자의 성장에 대한 목마름으로부터 시작된 스터디였다. 그래서 둘이서 진행한다는 생각으로 시작했고 혹시 주니어 개발자 중에 함께 하실분이 있을 수 있겠다 싶어 슬랙에 올리니, 올리자마자 10명이 넘는 분이 참여의사를 밝혔다. 시니어분들도 여럿 참가의사를 밝혔다!
시니어 분들이 도대체 왜! 라는 생각을 잠시 했지만 그 분들의 기여로 더 알찬 스터디가 될 수도 있겠다고 생각했다. 3주차까지 진행을 했는데 아니나 다를까 오히려 시니어 분들의 열정으로 후끈후끈 달아오르고 있다.
이렇게 다양한 구성과 많은 인원을 데리고 진행을 해보는것은 처음이다. 재미도 있고 배우는것도 많지만 진행자 입장에서는 긴장이 많이 되는것은 사실이다. 세미나 진행에 대해서는 종료 후에 한번 회고를 해봐야겠다고 생각했다. 그 동안은 간략하게 배웠던 내용을 정리해서 올릴 것이다.
책 이름: 모던 자바스크립트
이 책의 대상독자에 대해서 이렇게 언급하고 있다.
이 책은 자바스크립트와 ECMAScript 5에 익숙한 사람들을 위한 책이다. 이 책을 읽기 위해 자바스크립트 언어 자체를 깊게 이해할 필요는 없지만, 언어에 대한 기초 지식이 ECMAScript 5와 6 사이의 차이점을 이해하는 데는 도움이 될 것이다. 특히 이 책은 브라우저 또는 Node.js 환경에서 최신 언어를 배우고자 하는 중상급 자바스크립트 개발자를 대상으로 한다.
1장을 시작하기 전에 간략하게 자바스크립트 역사에 대해 요약해보면 아래와 같다.(via 제미니)
자바스크립트는 웹 개발의 필수 언어로, 웹 페이지에 동적인 기능을 추가하는 데 사용됩니다. 1995년에 처음 등장한 이후 많은 변화를 거쳐 현재에 이르렀습니다.
1. 초기 (1995–1997)
넷스케이프의 Brendan Eich가 “Mocha”라는 이름으로 개발
“LiveScript”로 이름 변경 후 넷스케이프 내비게이터 브라우저에 탑재
자바와 유사한 이름으로 인해 “JavaScript”로 최종 명칭 확정
2. 표준화 (1997–2007)
ECMA International에서 ECMAScript 표준 제정
JavaScript의 버전 관리 및 향후 개발 기반 마련
다양한 브라우저에서 JavaScript 지원
3. 발전 (2008–2015)
Ajax 등장으로 웹 개발 패러다임 변화
Node.js 등장으로 서버 측 개발에도 사용 가능
JavaScript 라이브러리 및 프레임워크 활발히 개발
4. 현재 (2016-현재)
웹 개발뿐만 아니라 모바일 앱, 게임 개발에도 사용
TypeScript 등 새로운 언어 등장으로 JavaScript 발전 지속
매우 불완전한 상태로 세상에 나온 이 언어가 계속 살아남고 진화해서 개발 생태계에 막대한 영향을 끼치게 되었으니 90대 부터 인터넷을 접해온 나로서는 감회가 새로울 수 밖에 없다. (이 역사이야기를 할때는 시니어 개발자들의 경험담 이야기 속으로 빠져들 수 있으니 주의할것. )
자 이제 시작해보자!
1장 블록 바인딩
1.1 var 선언과 호이스팅
변수 선언의 동작방식은 자바스크립트 프로그래밍에서 가장 까다로운 부분 중 하나였음
변수란? 스코프내 값에 바인딩된 이름
바인딩이란?
프로그램 내에서 변수, 배열, 라벨, 절차 등의 명칭, 즉 식별자(identifier)가 그 대상인 메모리 주소, 데이터형 또는 실제 값으로 배정되는 것이 이에 해당되며, 원시 프로그램의 컴파일링 또는 링크 시에 확정되는 바인딩을 정적 바인딩(static binding)이라 하고, 프로그램의 실행되는 과정에서 바인딩 되는 것을 동적 바인딩(dynamic binding)이라고 한다.
via 바인딩 (Binding)
C기반의 언어에서 변수는 선언한 위치에서 바로 만들어지는것에 반해 자바스크립트는 선언 방식에 따라 다르다.
⇒ 이를 보완하기 위해 ES6에서 변수의 스코프를 더 쉽게 제어할 수 있는 옵션을 제공한다.
function getValue(condition) {
 if (condition) {
 var value = "blue";
 return value;
 } else {
 // value는 여기서 undefined 로 존재한다.
 value = 'red'
 console.log(value)
 return null;
 }
 console.log(value) 
 // value는 여기서 undefined 로 존재한다.
}
자바스크립트 엔진은 내부적으로 getValue 함수를 다음 예제처럼 변경한다.
function getValue(condition) {
 var value;
 if (condition) {
 value = "blue";
 return value;
 } else {
 return null;
 }
}
value 변수 초기화 코드는 같은 지점에 남아있지만
선언은 함수의 맨 위로 호이스팅 된다.
호이스팅 선언에 대한 이해가 어렵고 버그를 발생시키기도
ES6 에서는 변수 생명 주기를 개발자가 잘 제어하도록 블록 레벨 스코프 옵션이 도입
이미 많은 C 기반 언어는 블록 스코프로 동작
1.2 블록-레벨 선언
주어진 블록 스코프 밖에서는 접근할 수 없는 바인딩을 선언하는것. 블록 스코프는 아래 두 가지 곳에서 만들어진다.
함수 내부
블록 내부({와 }를 사용, 화살표함수)
1.2.1 let 선언
let 으로 선언된 변수
의 스코프는 현재의 코드 블록으로 제한된다.
블록 위로 호이스팅되지 않는다.
1.2.2 재정의 금지
let 선언은 같은 스코프 안에서 중복 선언은 안된다.
var count = 30;
let count = 40;
// Uncaught SyntaxError: Identifier 'a' has already been declared
다른 스코프에서는
let count = 30;
if (condition) {
 console.log(count) // error
 let count = 40;
 console.log(count) // 40
}console.log(count) // 30
1.2.3 const 선언
const 로 선언된 바인딩은 상수(constants)로 간주된다.
설정하면 변경할 수 없다.
역시 재정의 금지
모든 const 바인딩은 선언할 때 초기화해야 한다.
let과 마찬가지로 블랙-레벨 선언이므로 블록 바깥에서 접근 안되며 호이스팅 되지 않는다.
const name;
// Uncaught SyntaxError: Missing initializer in const declaration
한번 선언한 const 는 새 값을 할당할 수 없다.
하지만 할당된 값이 객체라면 객채의 내부 값을 변경하는것은 가능하다.
const person = {
 name: "Nicholas"
};
// 문제 없이 동작
person.name = "Greg";
// 에러 발생
person = {
 name: "Greg"
}
1.2.4 임시 접근 불가구역
코드를 해석할 때 자바스크립트 엔진은 다음 블록을 조사하고 그 블록에서 변수 선언을 발견하면, 그 선언을 (var의 경우에는) 함수 최상단이나 전역 스코프로 호이스팅 하거나 (let 과 const의 경우에는) TDZ 내에 배치한다.
console.log(typeof value); // 에러는 나지 않지만 예상하지 못한 결과 undefined
console.log(typeof value2); // Uncaught ReferenceError: value2 is not defined
let value2 = 1;
1.3 반복문 안에서의 블록 바인딩
for (var i = 0; i < 10; i++){
 process(items[i])
}// 여기서도 i 에 접근 가능
console.log(i); // 뭐가 나올까요? 10
for 문의 카운터는 블록레벨 변수 사용을 권장
이와 관련된 오래된 문제
var funcs = [];
for (var i = 0; i < 10; i++){
 funcs.push(function(){
 console.log(i);
 })
}
// 어떻게 출력될까?
funcs.forEach(function(func){
 func();
})
// 10, 10, 10, 10 ...
1.3.2 반복문에서 let의 선언
var func = [];
for (let i = 0; i < 10; i++) {
 func.push(function(){
 console.log(i);
 })
}
func.forEach(function(func){
 func(); // 0, 1, 2..., 9 순서로 출력
})
for-in, for-of 문에서도 마찬가지.
1.3.3 반복문에서의 const 선언
for 반복문에서 const를 카운터로 선언할 수는 있지만 그 값을 변경하려고 하면 에러가 난다.
반면에 const 변수가 for-in, for-of 문안에서 사용될 때는 let 변수와 비슷하게 동작한다. 따라서 아래 코드는 정상동작 한다.
let func = [];
let object = {
 a: true,
 b: true,
 c: true
};
for (const key in object) {
 funcs.push(function(){
 console.log(key);
 })
}
funcs.forEach(function(func){
 func(); // "a", "b", "c" 순서로 출력
})
1.4 전역 블록 바인딩
var를 전역 스코프에서 사용하면 전역 객체(브라우저는 window)에 생성된다.
window 객체에 선언된 var 선언은 그 값을 덮어쓸 수 있으므로 안전하지 않다.
let이나 const를 전역 스코프에서 아용하면 전역 스코프에 새로운 바인딩이 생성되지만, 전역 객체의 프로퍼티로 추가되지는 않는다.
// 브라우저 내에서
let name = "Hello";
console.log(name); // "Hello"
console.log(window.name === name); // false
1.5 블록 바인딩을 위한 모범 사례
const를 기본으로 사용하고 변수 값을 변경해야 할 때만 let을 사용하는 것. 예상치 못한 값 변경은 버그의 원인이 될 수 있기 때문이다.

모던 자바스크립트 스터디 1장

댓글