원본 본문으로 이동하기

자바스크립트 ES6 추가 기능들

박용서 - 이 문서는 ECMAScript 6 추가 기능을 서술하고 있습니다. 별도작성 클래스 - https://gs.saro.me/#!m=elec&jn=732 Promise - https://gs.saro.me/#!m=elec&jn=731 function* / yield* (generator function) - https://gs.saro.me/#!m=elec&jn=726 화살표함수 - https://gs.saro.me/#!m=elec&jn=709 {} 내에서 단축된 문법과 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 - 자바스크립트