Jihan Kim laziel

ES6시대의 JavaScript

원문 : http://techlife.cookpad.com/entry/2015/02/02/094607

안녕하세요. 사원사업부의 마루야마@h13i32maru입니다. 최근의 Web 프론트엔드의 변화는 매우 격렬해서, 조금 눈을 땐 사이에 점점 새로운 것이 나오고 있더라구요. 그런 격렬한 변화중 하나가 ES6이라는 차세대 JavaScript의 사양입니다. 이 ES6는 현재 재정중으로 집필시점에서는 Draft Rev31이 공개되어있습니다.

JavaScript는 ECMAScript(ECMA262)라는 사양을 기반으로 구현되어있습니다. 현재 모던한 Web 브라우저는 ECMAScript 5.1th Edition을 기반으로 한 JavaScript실행 엔진을 탑재하고 있습니다. 그리고 다음 버전인 ECMAScript 6th Edition이 현재 재정중으로, 약칭으로 ES6이라는 명칭이 사용되고 있습니다.

	var ctx = null, usingWebAudio = true;

	try {
	if (typeof AudioContext !== 'undefined') {
	ctx = new AudioContext();
	} else if (typeof webkitAudioContext !== 'undefined') {
	ctx = new webkitAudioContext();
	} else {
	usingWebAudio = false;
	}

	function extend() {
	var target = arguments[0] \|\| {};
	var length = arguments.length;
	var prop;

	for (var i = 1; i < length; i++) {
	if (typeof arguments[i] === 'object') {
	for (prop in arguments[i]) {
	target[prop] = arguments[i][prop];
	}

	let a = 20;
	let b = 10;
	let c = ‘Test String’;

	console.log(`a+b: ${a+b}, c: ${c}`);

	// ‘a+b: 30, c: Test String’

	$a: 4;
	$b: 3;

	.slide {
	position: absolute;
	top: 0;
	left: calc(50vw - #{$a/$b/2*100vh});
	width: $a/$b*100vh;
	height: 100vh;

	<a href="http://your-url" class="github-corner">
	<svg width="80" height="80" viewBox="0 0 250 250"
	style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;">
	<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
	<path
	d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
	fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
	<path
	d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9

	function isEpsilonEqual(a, b) {
	return (Math.abs(a - b) < Number.EPSILON);
	}

	module.exports = leftpad;
	function leftpad (str, len, ch) {
	str = String(str);
	var i = -1;
	if (!ch && ch !== 0)
	ch = ' ';
	len = len - str.length;
	while (++i < len) {
	str = ch + str;
	}

	(function(){
	var networks = [{
	url: "https://squareup.com/login?return_to=%2Ffavicon.ico",
	name: "Square"
	}, {
	url: "https://www.instagram.com/accounts/login/?next=%2Ffavicon.ico",
	name: "Instagram"
	}, {
	url: "https://twitter.com/login?redirect_after_login=%2Ffavicon.ico",
	name: "Twitter"

	/*
	* Water Canvas by Almer Thie (http://code.almeros.com).
	* Description: A realtime water ripple effect on an HTML5 canvas.
	* Copyright 2010 Almer Thie. All rights reserved.
	*
	* Example: http://code.almeros.com/code-examples/water-effect-canvas/
	* Tutorial: http://code.almeros.com/water-ripple-canvas-and-javascript
	*/