가리사니의 조각들...
[백업][가리사니] 자바스크립트 es6 추가 기능들
javascript
박용서 • 2016-05-25

이 문서는 가리사니 개발자 포럼에 올렸던 글의 백업 파일입니다. 오래된 문서가 많아 현재 상황과 맞지 않을 수 있습니다.

이 문서는 ECMAScript 6 추가 기능을 서술하고 있습니다.

별도작성

클래스

{} 내에서 단축된 문법과 get set 프로퍼티

{} 내에서 사용할 수 있는 방법이 추가되었습니다.

  • 함수 제네레이터는 위 별도작성 참고.
var temp =
{
	get pname() { return "고정값을 해보자"; },
	set pname(name) { console.log(name + "으로 변경시도 하지만 변경불가"); },
	func() { console.log('일반함수'); },
	*genFn() { console.log('제네레이터 함수'); yield null; }
};

temp.func();
console.log(temp.pname);
temp.pname = "input!!!";
console.log(temp.pname);
temp.genFn().next().value;
  • 클래스에서도 구분자(,)만 빼면 똑같이 사용할 수 있습니다.
  • 클래스도 자세한건 위 별도작성 참고.
class TempClass
{
	get pname() { return "고정값을 해보자"; }
	set pname(name) { console.log(name + "으로 변경시도 하지만 변경불가"); }
	func() { console.log('일반함수'); }
	*genFn() { console.log('제네레이터 함수'); yield null; }
}

var tc = new TempClass();
tc.func();
console.log(tc.pname);
tc.pname = "input!!!";
console.log(temp.pname);
tc.genFn().next().value;
  • get set 프로퍼티는 위 예제처럼 대입과 반환과정을 직접 만들어 줄 수 있는 기능입니다.
  • C#을 해봤다면 익숙한 기능.

전개 연산자(spread operator)

전개 연산자는 배열인 어떤 값을 함수의 파라미터 순서대로 전달해주는 걸 의미합니다.

var param = ['가리사니', '개발자공간에', '입니다.'];
function func(a, b, c)
{
	console.log(a + ' ' + b + ' ' + c);
}

// 오류 - 파라미터 인자는 a에 배열로 반환되었습니다.
// 가리사니,개발자공간에,입니다. undefined undefined
func(param);

// 과거의 해결법
function func2(arr)
{
	// apply / call 어차피 참조할 대상이 null 임으로 의미는 없습니다.
	return func.apply(null, arr);
}
// 정상동작 - 하지만 불필요하게 구문이 많아 집니다.
// 가리사니 개발자공간에 입니다.
func2(param);

// 하지만 전개연산자를 사용한다면?
// 정상 실행
// 가리사니 개발자공간에 입니다.
func(...param);

// 예를들어 섞어 쓰는것도 가능합니다.
// 정상 실행
// 1, 2, 3
func(1, ...[2, 3]);

위 전개연산자는 여러가지 응용이 가능합니다. 예를들어 array의 push를 이용하여 concat의 효과를 낼 수 있습니다.

var concat = [10, 11, 12];
var arr = [1, 2, 3];

arr.push(4, 5, 6);
// 결과 1, 2, 3, 4, 5, 6
console.log(arr);

arr.push(...concat);
// 결과 1, 2, 3, 4, 5, 6, 10, 11, 12
console.log(arr);

그 밖에도 클래스를 만들 new 라던지 파라미터를 쓸 수 있는 모든 곳에 사용할 수 있습니다.

for - of

for (var element of iteratorObject)

var arr = [3, 7, 11];
for (var val of arr)
{
	console.log(val);
}

결과 3 7 11 설명 아마 별도의 설명이 필요없는 기능같습니다. 기존 for in 의 경우 프로퍼티를 가져왔다면, for of 는 반복자를 가져옵니다. 배열, DOM 컬렉션, generator function 에서 사용할 수 있습니다.

기본 파라미터

  • undefined 대신 기본값을 설정합니다.
function test(a, b  =  '가리사니', c = 30)
{
	console.log(a, b, c);
}
test('a입력');
test('a입력', 'b입력');
test('a입력', 'b입력', 'c입력');
test('a입력', undefined, 'c입력');

결과 a입력 가리사니 30 a입력 b입력 30 a입력 b입력 c입력 a입력 가리사니 c입력 설명 인자가 없거나 undefined 인 경우에 기본값을 세팅합니다.

  • 다만 null은 object 이기에 undefined 를 입력하거나 입력하지 않아야합니다.

const

많은 언어에 친숙하게 있는 읽기전용 값입니다. 블록 단위에서 쓸경우 해당 블록에서만 유효합니다.

const aa = 1;
console.log(aa);
aa = 2; // 오류

결과 1 Uncaught TypeError: Assignment to constant variable. // 오류

Number.isNaN()

  • 글로벌 isNaN 과 달리 정확히 Number 타입의 isNaN인지 구분합니다.
isNaN('aaa'); // true
isNaN('34234'); // false
isNaN(34234); // false

Number.isNaN('aaa'); // false - 스트링 타입이기때문에 정확히 Number 타입의 NaN만 유효
Number.isNaN(NaN); // true
Number.isNaN(0 / 0); // true : 무한도 NaN에 속한다.
Number.isNaN(231); // false

Object.is()

  • 두 값이 같은지 확인합니다.
Object.is(null, null); // true
Object.is(undefined, undefined); // true
Object.is(1, true); // false
Object.is(1, 1); // true
Object.is(1, 3); // false

var abc1 = { a : 1, b : 2 };
var abc2 = { a : 1, b : 2 };
Object.is(abc1, abc2 ); // false : 같아보이지만 다른 객체이다.

var Cl = function()
{
	this.a = 1;
	this.b = 2;
}
var cl1 = new Cl();
var cl2 = new Cl();

// false : 값이 같더라도 object / class 의 경우 [원시자료형 (Number, String, Boolean....) 이 아닌 경우]
//  완전 동일한 객체만 같은 걸로 취급
Object.is(cl1, cl2);

// true : 완전히 같다
Object.is(cl1, cl1);

// 특별한 경우
Object.is(0, -0); // false
Object.is(-0, -0); // true
Object.is(NaN, 0/0); // true : 하나는 NaN 또하나는 무한이지만 같은 NaN으로 취급 합니다.

String 템플릿 리터럴

  • 특이하게 ' 나 " 가 아닌 `을 사용합니다.
var name = '홍길동';
var gs = '가리사니 개발자공간';
var cnt = 300;
console.log(`${name}님 ${gs}에 오신걸 환영합니다.\n숫자더하기 ${ cnt + 33 }`);

결과 홍길동님 가리사니 개발자공간에 오신걸 환영합니다. 숫자더하기 333

배열형 추가기능

TypedArray.prototype.fill() fill(채울값) fill(채울값, 시작위치) fill(채울값, 시작위치, 종료위치)

([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]).fill(99);
// [99, 99, 99, 99, 99, 99, 99, 99, 99, 99]

([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]).fill(99, 3);
// [1, 2, 3, 99, 99, 99, 99, 99, 99, 99]

([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]).fill(99, 3, 7);
// [1, 2, 3, 99, 99, 99, 99, 8, 9, 10]

@@iterator

  • 위 for of는 iterator 가 있는 객체에서 작동합니다.
  • iterator 에 대해서 알아봅시다.
var arr = [3, 7, 11];
var iter = arr [Symbol.iterator;
var node;
while (!(node = iter.next()).done)
{
	console.log(node.value);
}

Array.prototype.values()

  • 취소선 사유 : [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/values
// 위에서 설명한
var iter = arr [Symbol.iterator;
// 아래와 같이 풀어 쓸 수 있습니다.
var iter = arr.values();
// 하지만 취소선을 친 이유는
// 호환성문제로 인해 많은 브라우저들이 지원하지 않고 오히려 제거되는
// 현상까지 있기에 이 기능을 사용하고 싶다면 arr [Symbol.iterator; 쓰는것이 현명 합니다.

Array.of()

  • 신규 배열의 생성자.
  • 필자의 개인적인 생각으론 굳이 사용할 필요가 있을까 싶군요..
Array.of(1);         // [1]
Array.of(1, 2, 3);   // [1, 2, 3]
Array.of(undefined); // [undefined]
// ES 6 를 지원하지 않는 곳 추가구문
if (!Array.of)
{
	Array.of = function() { return Array.prototype.slice.call(arguments); };
}

Array.prototype.entries()

  • [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/entries
var arr = ['a', 'b', 'c'];
var eArr = arr.entries();

console.log(eArr.next().value); // [0, 'a']
console.log(eArr.next().value); // [1, 'b']
console.log(eArr.next().value); // [2, 'c']

Array.prototype.keys()

  • [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/keys
var arr = ["a", "b", "c"];
var iterator = arr.keys();

console.log(iterator.next()); // { value: 0, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

let

var와 유사하지만 블록내로 엄격하게 제한 합니다.

  • 참고 : [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let
var a = 5;
var b = 10;

if (a === 5)
{
	let a = 4; // IF 블록 안에서만 영향
	var b = 1; // 함수 전체에 영향

	console.log(a);  // 4
	console.log(b);  // 1
}

console.log(a); // 5
console.log(b); // 1

import / export

불행이도 이건 이 글을 쓰는시점에서 구현된 브라우저가 없습니다.

  • 참고 : [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import
  • 참고 : [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export