개발/ES6 (11) 썸네일형 리스트형 [ES6] Generator 개념 먼저 Generator 란 직역해보자면 생성기 라는 의미를 가지는데 실제 역할은 이터러블을 생성하는 함수 이다. 이번에는 매우 생소한 개념이기 때문에 예제 코드부터 보고 가보자. function* threeStep() { console.log('one step'); yield 1; console.log('two step'); yield 2; console.log('three step. The End!'); } // 함수 표현식으로도 가능! let threeStep = function* () { // Something ... } 위의 함수가 기본적으로 Generator 함수를 만드는 방식이다. 여기서 기존의 함수와 다른 부분을 찾아보자면 * 와 yield 를 찾을 수 있겠다. 그렇다면 이들은 어떤 역.. [ES6] Class 개념 이전의 OOP글에서도 한번 언급했었지만, 다른 객체지향형 언어에서는 객체지향형 프로그래밍을 구현하기 위한 도구로 Class 를 사용하는 반면, Javascript는 prototype 를 사용한다. 이는 아무래도 Class기반 언어에 익숙한 프로그래머들이 Javascript를 사용할 때, 보다 더 익숙한 형태로 접근할 수 있도록 하는 목적으로 ES6에서 도입되었으며, 한가지 알아두어야 할 점은 Syntax Sugar 라는 점이다. 그렇다면 Syntax Sugar 란 무엇일까 ? 이는 이름이 주는 느낌 그대로, 새로운 기능을 만들어 낸 것이 아니라, 단지 기존의 prototype을 형태만 class 형으로 풀어서 만들어낸 것이다. 그렇다는 말은, 내부적으로는 prototype 형태로 바뀌어 동작한다는 .. [ES6] Destructuring 개념 일단 Destructuring 이라는 단어의 의미부터 알아보자. Destructuring은 비구조화 라는 의미를 가지고 있다. 그렇다면 여기서 말하는 "구조" 란 어떤 구조를 말하는 것일까 ? 여기서의 "구조" 는 배열이나 객체 리터럴의 틀에 값이 들어가 있는 형태를 말한다. let arr = [1, 2, 3]; let obj = { a: 1, b: 2, c: 3 }; 위의 코드 형태를 구조화된 형태 라고 보면 되겠다. 그렇다면 이러한 형태를 비구조화 한다는 의미는 어떤 것일까? 이 내용은 비구조화를 사용하는 코드를 보면서 알아보자. 사용 방법 배열 // ES5 var num = [2, 4, 7]; // before var two = arr[0]; var four = arr[1]; var seven.. [ES6] Module 개념 먼저 모듈(Module) 이란 무엇일까 ? 왜 나타나게 되었을까 ? 일단 개념부터 알아보자면, 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 파일 단위로 분리되어 있으며, 애플리케이션은 필요에 따라서 모듈을 로드하여 재사용한다. 사실 다른 언어에는 이러한 모듈기능을 다 가지고 있는 반면, Javascript는 태생 자체가 웹페이지의 보조적 기능을 수행하기 위해 만들어졌기 때문에 한계가 있었다. 이것은 script 태그를 통해서 js 파일을 받아올 수는 있었지만, 이렇게해서 여러개의 파일을 받아올 경우 이 파일들이 모두 하나의 전역 객체를 공유하기때문에, 같은 이름의 변수나 method가 존재할 경우 문제가 발생하게된다. 자바스크립트는 기본적으로.. [ES6] Iteration 개념 ES6에서는 데이터 컬렉션을 순회하기 위한 규약을 만들었는데, 이것이 바로 Iteration Protocol이다. 이전의 Spread 글에서 언급했던 것과 같이, 이 Iteration Protocol을 준수한 객체만이 Spread 문법을 사용할 수 있고, 더 나아가 for ... of 문으로 순회가 가능하다. 그렇다면 Iteration Protocol은 무엇일까 ? 이것은 이터러블 프로토콜(Iterable Protocol)과 이터레이터 프로토콜(Iterator Protocol) 을 말한다. 이 둘에 대해 간단히 말하자면, 이터러블 프로토콜은 반복 가능한 객체 를 일컫는 말이고, 이터레이터 프로토콜은 작성한 순서대로 처리하는 프로토콜을 일컫는 말이다. 이 이터레이션 프로토콜을 가지고 있는지에 대한 여.. [ES6] Symbol Symbol 이란 ...? 먼저 이 Symbol에 대해 간단히 설명하자면 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용하는 고유의 값 이라고 할 수 있다. Javascript에는 총 6가지의 타입이 존재하는데, 이는 5가지의 원시 타입(Primitive Type) String Number Boolean null undefined 과 Object 라는 객체 타입(Object Type) 이 존재한다. Symbol은 이 6가지 타입에 이은 7번째 타입으로, 이는 원시 타입에 속한다. 그러면 이걸 왜 만들었는지...? ES6의 모든 추가 내용이 그랬던 것처럼 어떤 필요에 의해서 Symbol이라는 것이 생겼을 것이다. 그렇다면 왜 Symbol을 만들었을까 ?.. [ES6]Spread, Rest Parameter 배경 지식 Rest 와 Spread 는 기본적으로 argument, parameter 에 관한 내용이다. 그런데 이 둘은 그 차이가 크지 않아 표현 상에서 혼동하여 사용하기가 쉽다. 이러한 이유때문에 일단 둘의 개념 차이부터 정확하게 잡고 가는게 좋겠다. 먼저, 둘의 의미에 대해 알아보면 parameter는 매개변수 라는 의미를 가지고 있고 argument는 전달인자 라는 의미를 가지고 있다. parameter는 함수를 선언할 때 의 인자들을 '매개 변수', parameter 라고 부르고, argument는 해당 함수를 호출할 때 의 인자들을 '전달 인자', argument라고 부른다. 확실히 이해하고 넘어가기 위해 아래의 예제 코드를 보고 다음으로 넘어가자. // 여기서의 x, y는 parameter(.. [ES6]Template Literal 템플릿 리터럴이란 ? 먼저 이 단어 자체에 대해서 생각을 해보자. Template 은 흔히들 기본적으로 어떠한 틀을 일컫는데 사용하는 단어이다. Literal 은 사전에서 찾아보자면 ' 원문 그대로의 ' 라는 뜻인것을 찾을 수 있겠다. 그러면 Template Literal은 ? ' 원문 그대로의 틀 ' 이라는 용어로 해석해볼 수 있겠다. 자, 이제 이 뜻을 생각하면서 사용법과 기능에 대해 알아보려고 한다. 사용법 기본적인 사용법은 백틱이라고 불리우는 `` 로 문자열을 감싸주는 것인데 이 백틱은 자판기의 영문자 상태에서 1의 왼쪽 ~/₩ 라고 적혀있는 자판을 누를 시에 나타난다. 기능 기능은 아래 코드를 보면 직관적으로 이해할 수 있다. // 일반적인 형태의 string 표기법 // 1. 일반적인 문자열 .. 이전 1 2 다음
