주요 문서
-
ES6 In Depth: 화살표 함수(Arrow functions)
ES6 In Depth는 ECMAScript 표준의 6번째 에디션(줄여서 ES6)을 맞아 JavaScript에 새로 추가된 요소들을 살펴보는 시리즈입니다. 화살표는 처음부터 JavaScript의 한 부분이었습니다. 첫 JavaScript 튜토리얼은 인라인 스크립트를 HTML 주석으로 감싸라고 조언했습니다. 이는 JS를 지원하지 않는 구식 브라우저가 의도하지 않게 JS 코드를 화면에 표시하는 것을 방지하려는 목적이었습니다. 이 조언에 따라 작성한 코드는 다음과 같은 모습이 될 것입니다. <script […]
-
ES6 In Depth: 이터레이터(iterator)와 for-of 루프 구문
ES6 In Depth는 ECMAScript 표준 6번째 에디션에 의해 JavaScript 언어에 추가된 새로운 요소들을 살펴보는 시리즈입니다. 배열을 루프로 순회하기 위해 어떤 방법을 사용하나요? 20년쯤 전, JavaScript가 처음 소개됐을 당시에는 아마 다음과 같은 방법을 사용했을 것입니다. for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]); } ES5 발표 이후에는 forEach 메소드를 쓸 수 있게 되었습니다. […]
-
ES6 In Depth: 미래
ES6 In Depth 시리즈는 ECMAScript 표준의 6번째 에디션(줄여서 ES6)을 통해 JavaScript 에 새로 추가된 기능들을 살펴보는 시리즈입니다. 지난번 ES6 모듈에 관한 글까지 우리는 ES6 에 새로 도입된 주요 기능들을 살펴보았습니다. 이번 글에서는 새로운 기능을 십여 개 더 살펴보려고 합니다. 우리가 지금까지 깊게 살펴보지 않은 기능들입니다. JavaScript 라는 건축물의 벽장과 구석방들을 들여다보는 재미있는 여행이라고 생각하세요. 거대한 […]
-
ES6 In Depth: 심볼 (Symbol)
ES6 In Depth는 ECMAScript 표준의 6번째 에디션(줄여서 ES6)을 맞아 JavaScript에 새로 추가된 요소들을 살펴보는 시리즈입니다. ES6 심볼(symbol)은 무엇일까요? 심볼은 로고가 아닙니다. 심볼은 당신이 코드에 쓸 수 있는 작은 그림이 아닙니다. let = × ; // SyntaxError 심볼은 무엇인가를 기념하기 위해 만든 건물도 아닙니다. 심볼(Symbol)은 절대로 심벌즈(Cymbals)가 아닙니다. (프로그래밍에 심벌즈를 쓰는 것은 좋은 생각이 아닙니다. 심벌즈는 […]
-
ES6 In Depth: 제너레이터(Generator)
ES6 In Depth는 ECMAScript 표준 6번째 에디션(줄여서 ES6) 제정으로 인해 JavaScript 언어에 추가된 새로운 요소들을 살펴보는 시리즈입니다. 저는 이번 글이 흥분됩니다. 이번 글을 통해 우리는 ES6의 가장 마법 같은 요소를 살펴볼 것입니다. 왜 “마법 같다”고 했을까요? 처음 접하는 사람들에게, 제너레이터는 기존에 있던 JS 요소들과 너무 달라서 정말 불가사의하게 보여집니다. 어떤 의미에서 제너레이터는 랭귀지의 일반적인 동작양식을 […]
-
메모리 특강
이 글은 3부작 시리즈의 첫번째 글입니다. 메모리 특강 만화로 소개하는 ArrayBuffer 와 SharedArrayBuffer Atomics 를 이용해서 SharedArrayBuffer 레이스 컨디션 피하기 ArrayBuffer 와 SharedArrayBuffer 가 JavaScript 에 추가된 이유를 이해하려면, 우리는 메모리 관리에 대해 조금 알아야할 필요가 있습니다. 머신에 탑재된 메모리를 상자 더미로 생각해 봅시다. 나는 이것이 사무실에 있는 사서함이나, 유치원에서 있는 사물함과 비슷하다고 생각합니다. 만약 […]
-
ES6 In Depth: 모듈
ES6 In Depth 시리즈는 ECMAScript 표준 6번째 에디션(줄여서 ES6)을 통해 JavaScript 에 새로 추가된 요소들을 살펴보는 시리즈입니다. 2007년 제가 모질라 JavaScript 팀에서 일하기 시작했을 때, 이런 농담이 있었습니다. 통상적인 JavaScript 프로그램의 라인 길이는 몇 줄일까요? 정답은 한 줄이었습니다. 그 때는 구글맵이 시작된 지 2년 지났을 때였습니다. 그전까지, JavaScript 의 주된 용도는 폼(form) 값을 검증하는 것이었습니다. […]
-
ES6 In Depth: 디스트럭처링(Destructuring)
ES6 In Depth는 ECMAScript 표준 6번째 에디션(줄여서 ES6)을 맞아 JavaScript에 새로 추가된 요소들을 살펴보는 시리즈입니다. 에디터 노트: 이 글은 원래 Firefox 개발자 도구의 담당 엔지니어 Nick Fitzgerald가 자신의 블로그에 Destructuring Assignment in ES6라는 제목으로 올렸던 글입니다. 디스트럭처링(destructuring) 할당이란 무엇인가요? 디스트럭처링을 이용하면 배열의 요소나 객체의 속성을 배열 리터럴(literal)이나 객체 리터럴과 비슷한 문법을 이용해서 변수에 할당할 수 […]
-
ES6 In Depth: 프락시 (Proxy)
ES6 In Depth 시리즈는 ECMAScript 표준 6번째 에디션(줄여서 ES6)을 통해 JavaScript 에 새로 추가된 요소들을 살펴보는 시리즈입니다. 오늘 우리가 살펴보려는 것은 다음 코드입니다. var obj = new Proxy({}, { get: function (target, key, receiver) { console.log(`getting ${key}!`); return Reflect.get(target, key, receiver); }, set: function (target, key, value, receiver) { console.log(`setting ${key}!`); return Reflect.set(target, key, value, […]
-
ES6 In Depth: 레스트 파라메터와 디폴트 파라메터
ES6 In Depth는 ECMAScript 표준 6번째 에디션(줄여서 ES6)을 맞아 JavaScript에 새로 추가된 요소들을 살펴보는 시리즈입니다. 오늘 글은 함수에 대한 JavaScript의 표현력을 더욱 풍부하게 만들어 주는 함수 문법 2개에 대한 것입니다. 레스트 파라메터(rest parameter)와 디폴트 파라메터(default parameter)가 그것입니다. 레스트 파라메터(rest parameter) 일반적으로 API를 정의할 때 variadic function이 필요한 경우가 있습니다. variadic function은 인자의 개수가 가변적인 함수입니다. […]
