ES6의 중요한 핵심 개념들

ES6 에서의 변수 선언

이전 자바스크립트 버전에서는 변수를 선언하는 유일한 방법은 var 이었지만 ES6에서는 다양한 변수선언 방법을 선언하며 다음은 몇가지 새로운 변수 선언 방법이다.

const

다른 언어와 마찬가지로 ES6에도 const를 정의할 수 있다.
const 를 사용하여 한번 선언된 변수가 덮어씌워질 수 없도록 강제할 수 있다.

let

ES6 에서는 let 을 사용하여 전역 변수를 보호할 수 있다.

가령 var 를 사용하면 다음과 같이 전역 변수가 덮어씌우 지지만

example

1
2
3
4
5
6
7
8
9

var test = 'global'

if(test){
    var test = 'overwritten'

    console.log(test) // overwritten
}

console.log(test) // overwritten

다음과 같이 if 문 안에서 let을 사용하면 전역변수를 보호할 수 있다.

1
2
3
4
5
6
7
8
9

var test = 'global'

if(test){
    let test = 'overwritten'

    console.log(test) // overwritten
}

console.log(test) // global

Template String

기존 javascript 에서는 문자열과 변수를 함치기 위해 string의 덧셈 연산을 통해 수행하였지만.
ES6 문법에서는 ${} 와 같은 스트링 템플릿을 통해 변수를 스트링에 전달할 수 있다.

example

1
2
3

var name = 'jhon'
var text = `my name is ${name}`
console.log(text) // my name is jhon

Arrow function

arrow function 을 통해 한 줄에 함수를 선언할 수 있다.
arrow function 은 여러 방면에서 매우 편리한데, 가령 리턴을 생략해도 자동으로 해당 내용이 리턴으로 들어가며, 만약 input 변수가 하나인 경우 괄호 마저 생략이 가능하다. 뿐만 아니라 arrow function 은 this의 사용을 방해하지 않기 때문에 this를 사용하면 함수 밖의 context에 바로 접근이 가능하다.

1
2
3
4
5
6
7
8
9

// Old
var old = function(var1, var2){
    return var1 + var2
}

//new
var arrowFunc = (var1, var2) =>{
    var1 + var2
}

Transpiling of ES6

아직 많은 브라우저에서 ES6 문법을 지원하지 않고 js는 계속해서 빠른 속도로 변화하고 있기 때문에, 이를 사용하기 위해서는 ES6 문법을 ES5 문법으로 transpile 해주어야 한다. 이러한 작업은 주로 babel 을 통해 이루어 진다.

이러한 transpile은 브라우저 레벨에서 이루어 질 수 도 있고, 서버단에서 transpile 후에 클라이언트로 전달해 주기도 하는데 전자의 경우 간편하게 처리 가능하다 성능면에서 productiondp 레벨에서 사용하기에는 많은 문제가 있다.

전자의 경우 다음코드를 html 에 추가함으로써 간편하게 transpile이 가능하다.

1
2
3
4

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js">
</script>

<script src="script.js" type="text/babel"> </script>

Objects and Arrays

ES6 에서는 object와 array를 보다 편리하게 사용하기 위한 다양한 문법을 제공한다.

Destructuring assignment

객체 혹은 배열 내의 자료에 접근하기 위한 매우 편리한 방법인 destructuring assignment를 제공한다.
과거의 경우 일일히 해당 프로퍼티에 접근하여 하나씩 엔티티를 가져와야 했다면, 이 방법을 통해 간편하게 entity를 추출할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13

// destructuring assignment in object
var personalInfo = {
    name: 'namhoon',
    age: 27
}

var { name, age } = personalInfo; // extracts key value

// destructuring assignment in array
var list = ['namhoon', 'jake', 'james'];
var [firstItem] = list;

console.log(firstName); // 'namhoon'

Object Literal Enhancement

ES6 에서는 오브젝트 내에서 함수 및 엔티티를 지정함에 있어 훨씬 편리하다

다음과 같이 외부의 변수를 간편하게 객체 내에 추가할 수 있고, 함수의 선언도 간편해 졌다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var name = 'namhoon';
var age = 25;

var personalInfo = {name, age}//{name:'namhoon', age:25}

var print = function(){
    console.log('my name is ${this.name} and im ${this.age} years old');
}

// new version
var personalInfo = {
    name,
    age,
    print(){ // eaily define function!
        console.log('my name is ${this.name} and im ${this.age} years old');
    }
}

The Spread Operator

spread operator(…variable) 을 통해 간편하게 배열을 다룰 수 있다.
과거 js에서는 배열 혹은 객체 내의 다양한 인자들을 명시하거나 변경하기 위해 필요없는 다를 항목들까지 일일히 명시해야 했다면, spread operator는 우리를 이러한 귀찮음에서 해방시켜 준다.

이런한 spread operator는 다양한 경우에 사용될 수 있으며, 다음은 그 사용 사례이다.

array를 이어 붙이는 경우

1
2

var peaks = ["Tallac", "Ralston", "Rose"] var canyons = ["Ward", "Blackwood"]
var tahoe = [...peaks, ...canyons]

array를 간편하게 복제하는 경우

1
2
3
4

var peaks = ["Tallac", "Ralston", "Rose"];
var [last] = [...peaks].reverse()
console.log(last) // Rose
console.log(peaks.join(', ')) // Tallac, Ralston, Rose

함수의 인자들을 묶어서 표현하는 경우

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function directions(...args) {
    var [start, ...remaining] = args
    var [finish, ...stops] = remaining.reverse()

    console.log(`drive through ${args.length} towns`)
    console.log(`start in ${start}`)
    console.log(`the destination is ${finish}`)
    console.log(`stopping ${stops.length} times in between`)
}

directions(
    "Truckee",
    "Tahoe City",
    "Sunnyside",
    "Homewood",
    "Tahoma"
)

객체 내 인자들을 묶어서 표현하는 경우

1
2
3
4
5
6
7
8
9
10

var morning = {
    breakfast: "oatmeal",
    lunch: "peanut butter and jelly"
}
var dinner = "mac and cheese"
var backpackingMeals = {
    ...morning,
    dinner
}
console.log(backpackingMeals)

Classes

이전 버전의 js에서는 class 가 존재하지 않았기 대문에 클래스가 필요한 경우 함수를 만들고 해당 함수에 대한 프로토 타입을 정의하는 방식으로 클래스를 만들어 사용했다.
하지만 ES6 부터는 정식을로 Class 를 지원하며 다른 클래스를 extends 할 수 있어 인터페이스의 개념도 추가되었다.

여기서 extends 를 사용하는 경우 construct를 다른 함수에서 super() 를 사용해야 하며, 그 사용사례는 다음과 같다.

1
2
3
4
5
6
7
8
9
10
11

class Expedition extends Vacation {
    constructor(destination, length, gear) {
        super(destination, length)
        this.gear = gear
    }

    print() {
        super.print()
        console.log(`Bring your ${this.gear.join(" and your ")}`)
    }
}

ES6 Modules

이전 버전의 js 에서는 외부 라이브러리를 가져오는 방법으로만 import 가 가능했지만, ES6 부터는 정식으로 module 을 제공하고 있다.
특히 같은 파일 내에서 여러 개의 모듈을 export 하는 것도 가능하며, object destructuring 을 통해 간편하게 import 할 수 있으며, 특정 모듈을 원하는 이름 으로 import 하는 것도 가능하다.
다음은 그 사용사례를 보여준다.

1
2

import { print, log } from './text-helpers'
import { print as p, log as l } from './text-helpers'

과거버전의 js와 ES6 에서 통용되는 Common.js는 module.exports 를 사용하여 module을 export 하는데 주의할 점은 이렇게 export된 module은 import 를 통해 import 될 수 없다는 것이다. 그 대신 아래와 같이 require를 사용하여 import를 해야 한다.

1

const { log, print } = require('./txt-helpers')

많은 라이브러리들이 common.js 를 기반으로 export 되었으므로, 외부 라이브러리를 사용할 때 무분별하게 import 문을 사용하면 import 되지 않는 문제가 있으니 특히 주의해야 한다.

Functional Programming with Javascript

What is the functional programming

함수형 프로그래밍은 자료 처리를 수학적 함수의 계산으로 취급하고 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임의 하나이다. 명령형 프로그래밍에서는 상태를 바꾸는 것을 강조하는 것과는 달리, 함수형 프로그래밍은 함수의 응용을 강조한다.

수학적 함수와 명령형 프로그래밍에서 사용되는 함수는 차이가 있는데, 명령형의 함수는 프로그램의 상태의 값을 바꿀 수 있는 부작용이 생길 수 있다. 이 때문에 명령형 함수는 참조 투명성이 없고, 같은 코드라도 실행되는 프로그램의 상태에 따라 다른 결과값을 낼 수 있다. 반대로 함수형 코드에서는 함수의 출력값은 그 함수에 입력된 인수에만 의존하므로 인수 x에 같은 값을 넣고 함수 f를 호출하면 항상 f(x)라는 결과가 나온다. 부작용을 제거하면 프로그램의 동작을 이해하고 예측하기가 훨씬 쉽게 된다. 이것이 함수형 프로그래밍으로 개발하려는 핵심 동기중 하나이다.

여기서 가장 중요한 개념 중 하나인 pure function 이란 부작용이 없는 함수 즉, 함수의 실행이 외부에 영향을 끼치지 않는 함수를 의미한다. 때문에 pure function 은 병렬적인 연산이 가능하고, 스레드에 안전하다.

이러한 pure 함수는 언제나 같은 값을 반환함이 보장되기 때문에 아무런 제약없이 사용되어도 안전하며, 때문에 이러한 pure function 들은 다른 함수의 input 으로 제공되어도 안전하다. 이렇게 함수형 프로그래밍 에서는 함수 자체가 변수처럼 선언되고 input 으로 사용되는 등 변수와 같이 취급되는 fist class citizen이다.

이렇게 함수를 인자로 받는 함수를 higher order function 이라고 한다.

선언형 프로그래밍과 명령형 프로그래밍

example of imperative programming

1
2
3
4
5
6
7

var string = "This is the midday show with Cheryl Waters"; var urlFriendly = "";
for (var i=0; i<string.length; i++) { if (string[i] === " ") {
urlFriendly += "-"; }else{
        urlFriendly += string[i];
      }
    }
    console.log(urlFriendly);

example of declarative programming

1
2

const string = "This is the mid day show with Cheryl Waters" const urlFriendly = string.replace(/ /g, "-")
    console.log(urlFriendly)

위 예제와 같이 선언형 프로그래밍에서는 모든 작업이 replace라는 선언아래 감추어져 있고, 개발자가 코드를 보았을 때 어떤일이 벌어지는지 매우 명확하게 알 수 있다.

code itself describes what is happening

Javscript의 Date Object와 다양한 활용법에 대해 알아보자.

웹사이트를 만들거나 다양한 작업을 함에 있어서 정확한 ‘날짜 표기’ 는 매우 중요하며 이는 js에서 Date Object를 통해 구현된다.
이번 포스트에서는 Date의 내장 함수와 그에 따른 활용법에 대해 알아본다.

Create date object

다음과 같은 방법으로 date object를 생성할 수 있다.

1

var date = new Date("2018-4-30");

이처럼 생성 시점에 날짜를 전달 함으로써 그 날에 해당하는 date object를 반환받을 수 있으며, 다음과 같이 다양한 형태의 날짜를 입력하여도 올바른 반환값이 나온다.

1

var date = new Date()

• Class의 활용
  • Math
  • String
    • 특정 문자를 원하는 문자로 바꾸기
    • 특정 문자열을 쪼개기
    • 스트링을 배열로 쪼게기
• Promise를 이용한 효율적인 비동기 처리
  • 기본 코드
  • Promise.catch
• this의 개념
  • 일반적인 this의 의미
  • new와 this
  • call

Class의 활용

Math

Math를 활용한 랜덤 넘버 생성
Math.floor(Math.random() * 1000000000)

String

특정 문자를 원하는 문자로 바꾸기

.replace("바꿀 문자열","바꾼 뒤의 문자열")

특정 문자열을 쪼개기

str.split(" ")

스트링을 배열로 쪼게기

1
2
3

"1234567890".match(/.{1,2}/g);
// Results in:
["12", "34", "56", "78", "90"]

Promise를 이용한 효율적인 비동기 처리

promise를 이용하여 효율적으로 비동기 함수를 관리한다.

기본 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

//Promise 선언
var promisefunction = function (param) {

	return new Promise(function (resolve, reject) {

		// 비동기를 표현하기 위해 setTimeout 함수를 사용
		window.setTimeout(function () {

			// 파라메터가 참이면,
			if (param) {

				// 해결됨
				resolve("해결 완료");
			}

			// 파라메터가 거짓이면,
			else {

				// 실패
				reject(Error("실패!!"));
			}
		}, 3000);
	});
};

//Promise 실행
promisefunction(true)
.then(function (text) {
	// 성공시
	console.log(text);
}, function (error) {
	// 실패시
	console.error(error);
});

Promise.catch

비동기시에 에러를 잡는다.

1
2
3
4
5
6
7
8

_promise(true)
	.then(JSON.parse)
	.catch(function () {
		window.alert('체이닝 중간에 에러가!!');
	})
	.then(function (text) {
		console.log(text);
	});

this의 개념

일반적인 this의 의미

일반적으로 . 앞의 object를 말한다고 보면 된다.

즉 자신을 호출한 대상 내의 변수나 함수들을 지칭하는 개념이다.

new와 this

new를 통해 새로운 객체를 만들게 되면 자신을 호출한 대상이 없으므로 this의 값이 자기 자신으로 리셋이 된다.

call

함수1.call(함수2,변수)

함수2내의 this값이 함수1을 가르키도록 한다.