목록ES6 (19)
함께 성장하는 프로독학러
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 ES6의 computed property name에 대해서 알아보겠습니다. computed property name 는 객체의 key값을 표현식(변수, 함수 등을 이용)을 통해 지정하는 것입니다.사용법은 아래와 같습니다. var i = 0; var a = { ["foo" + ++i]: i, ["foo" + ++i]: i, ["foo" + ++i]: i };위에서 본 것과 같이 속성명에 표현식을 사용하려면 대괄호("[ ]") 안에 표현식을 쓰면 됩니다.표현식은 위에서와 같이 변수가 들어올 수도 있고, 함수가 들어올 수도 있습니다. 변수가 프로퍼티의 키로 들어오는 예제에 대해서 살펴봅시다. 12345678910var name1 = "장동건";var name2..
안녕하세요, 프로독학러 입니다. 오늘은 문자열 안에서 변수를 사용할 때 좀 더 직관적이고 편리한 방법인 Template literals에 대해서 알아보도록 하겠습니다. 알아보기 이전에, 기존 자바스크립트에서 문자열과 변수를 함께 사용하려면 어떤 방법을 사용했는지 살펴보도록 하겠습니다. 123var obj = {a:1, b:2};console.log('In the obj object, there are properties. a is '+obj.a+' and b is '+obj.b+'.');// In the obj object, there are properties. a is 1 and b is 2.cs 위의 예제에서 변수 obj 안에는 객체를 담았습니다.그리고 콘솔창에 obj객체를 설명한 글을 담았습니다...
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 객체를 병합하는 메서드인 object.assign 메서드에 대해서 알아보도록 하겠습니다. 먼저 표현식 부터 보시겠습니다. Object.assign(target, ...sources)object.assign 메서드의 첫 번째 인자는 타겟입니다.두 번째 인자부터 마지막 인자까지는 소스 오브젝트입니다.소스 오브젝트는 타겟 오브젝트에 병합됩니다.그리고 리턴값으로 타겟오브젝트를 반환합니다. 이해를 돕기 위해 예제를 보겠습니다. 123var obj = {a:1};var copy = Object.assign({}, obj);console.log(copy); // {a: 1}cs 위의 예제에서 obj는 a라는 프로퍼티 하나를 가진 객체입니다.그리고 copy라는 변수에 ..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 함수를 정의하는 단계에서 파라메터(*파라메터=매개변수)의 기본값을 설정하는 것에 대해서 알아보겠습니다. 먼저 표현식을 보겠습니다. function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) { statements }함수의 이름을 정하는 name뒤에 오는 괄호안에 매개변수를 지정합니다. 이 때, 기본 값을 할당할 수 있습니다. 예제를 통해 이해해 봅시다. 123function add (a=0, b=10){ return a+b;}cs 위의 예제에서 add라는 함수를 정의할 때 파라메터를 적는 부분에 a=0, b=10이라고 정의 했습니다.값으로 들어오는 a와 b에 대해서 기본값을..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 ES6의 arrow function과 기존 자바스크립트의 함수선언(function declaration)의 차이점에 대해서 알아보도록 하겠습니다.ES6로 넘어오면서 arrow function이 기존의 함수선언을 완벽히 대체할 수 있을거라 생각하시는 분들이 계실 것 같은데요, (저 역시도 그렇게 생각했습니다) 둘은 같은 듯 하지만 다른점이 있습니다. 일단 이를 이해하기 위해서는 this에 대한 이해가 필요합니다.* this에 대해서 알아보려면 다음 링크를 참조하세요. ES6의 화살표함수(arrow function) 이전에는 모든 새로운 함수는 자신만의 this를 정의 했습니다(이 함수가 생성자인 경우는 새로운 객체, 엄격모드 함수 호출에서는 undefine..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 저번 포스팅(전개연산자)과 비슷하지만 쓰임이 약간은 다른 나머지 매개변수에 대해서 알아보도록 하겠습니다. 나머지 매개변수는 정해지지 않은 수(부정수) 인수를 배열로 나타낼 수 있도록 하는 표현법입니다. 표현식은 다음과 같습니다. function(a, b, ...theArgs) { // ... }함수를 선언 할 때, 해당 함수가 호출될 때 값으로 들어올 인자를 정하는 것을 매개변수라고 합니다. 이 매개변수를 지정할 때 매개변수의 이름 앞에 ...을 붙이면 이는 나머지 매개변수를 의미합니다. 그리고 이는 함수내에서 배열로 인식됩니다. 이해를 돕기 위해 다음 예제를 보겠습니다. 1234567var add = (...rest) => { console.log(re..
안녕하세요, 프로독학러입니다. 이번 포스팅에서는 ES6의 전개연산자에 대해서 알아보도록 하겠습니다. 전개연산자는 함수를 호출하는 인자로 배열을 사용하고 싶을 때나 배열을 정의하는 리터럴 내에서 사용할 수 있습니다.표현식은 아래와 같습니다. 1) 함수를 호출하는 인자로 배열을 사용할 때myFunction(...iterableObj);2) 배열 리터럴[...iterableObj, 4, 5, 6]2-1) 배열 리터럴 비구조화 (iterableObj를 선언하지 않고 할당)[a, b, ...iterableObj] = [1, 2, 3, 4, 5];1) 전개연산자의 함수호출용의 용도를 예제와 함께 알아보겠습니다. 12345function add(a, b, c){ return a+b+c;}var arr = [2, 4,..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 ES6의 새로운 기능인 arrow function에 대해서 알아보겠습니다. arrow function은 익명함수를 기존 자바스크립트 문법보다 좀 더 간단하게 표현할 수 있는 방식입니다. 표현식은 다음과 같습니다. const (혹은 let) 변수명 = (파라미터) => { ... 함수 내용 ... } 비교를 위해 기존 자바스크립트에서 익명함수를 변수에 할당하는 것과 비교해 보겠습니다. 123var _addFunc = function(a, b){ return a+b;}cs 다음은 같은 예제를 arrow function을 이용해 만든 것입니다. 123const _addFunc = (a, b) => { return a+b;}cs 훨씬 간단하게 표현할 수 있는 것..
안녕하세요, 프로독학러 입니다. 모던 자바스크립트라고 불리우는 ES6 (ECMAScript 6)에 대해서 차근차근 공부해 봅시다. * 공부에 도움이 된 자료들은 아래에 링크로 첨부하도록 하겠습니다. 오늘은 그 첫 번째 시간으로 ES6의 변수의 선언에 대해서 알아보도록 하겠습니다. 기존의 자바스크립트에서는 변수의 선언을 'var' 을 이용하여 하였습니다. 기존의 var 를 이용한 변수선언은 function scope입니다. function scope 란, 함수 안에서 변수에 접근할 수 있는 것을 뜻합니다. 이해를 돕기위해 아래 예제를 보겠습니다. 12345678function outter(){ var out = 'outter 함수 안에 사는 변수'; function inner(){ console.log(o..