자바스크립트 ES6
ECMAScript 2015는 JavaScript의 두 번째 주요 개정판입니다.
ECMAScript 2015는 ES6 및 ECMAScript 6으로도 알려져 있습니다.
이 장에서는 ES6의 가장 중요한 기능에 대해 설명합니다.
ES6의 새로운 기능
- let 키워드
- const 키워드
- 화살표 함수
- ~을 위해/의
- 지도 개체
- 개체 설정
- 클래스
- 약속
- 상징
- 기본 매개변수
- 기능 휴식 매개변수
- String.includes()
- String.startsWith()
- String.endsWith()
- Array.from()
- 배열 키()
- 배열 찾기()
- 배열 찾기 인덱스()
- 새로운 수학 방법
- 새 숫자 속성
- 새로운 숫자 방법
- 새로운 전역 방법
- Iterables Object.entries
- 자바스크립트 모듈
ES6(2015)에 대한 브라우저 지원
Safari 10 및 Edge 14는 ES6을 완벽하게 지원하는 최초의 브라우저였습니다.
| Chrome 58 | Edge 14 | Firefox 54 | Safari 10 | Opera 55 |
| Jan 2017 | Aug 2016 | Mar 2017 | Jul 2016 | Aug 2018 |
자바스크립트 하자
키워드를 사용하면 블록 범위 의 let변수를 선언할 수 있습니다.
예시
var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
자세한 내용은 JavaScript Letlet 장에서 읽어보세요 .
자바스크립트 상수
const키워드를 사용하면 상수(상수 값이 있는 JavaScript 변수)를 선언할 수 있습니다 .
상수는 값을 변경할 수 없다는 점을 제외하고 let 변수와 유사합니다.
예시
var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
자세한 내용은 JavaScript Constconst 장에서 읽어보세요 .
화살표 함수
화살표 함수는 함수 표현식을 작성하기 위한 짧은 구문을 허용합니다.
function키워드, return키워드 및
중괄호 는 필요하지 않습니다 .
예시
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
화살표 기능에는 고유한 기능이 없습니다 this. 그것들은 객체 메소드 를 정의하는 데 적합하지 않습니다 .
화살표 함수는 호이스팅되지 않습니다. 사용 하기 전에 정의해야 합니다 .
함수 표현식은 항상 상수 값이기 때문에 를 사용 하는 const
것이 를 사용하는 것보다 더 안전 합니다.var
return함수가 단일 명령문인 경우에만 키워드와 중괄호 를 생략할 수 있습니다 . 이 때문에 항상 보관하는 것이 좋은 습관일 수 있습니다.
예시
const x = (x, y) => { return x * y };
JavaScript Arrow Function 장에서 Arrow Functions에 대해 자세히 알아보십시오 .
For/Of 루프
JavaScript for/of문은 반복 가능한 개체의 값을 반복합니다.
for/of Arrays, Strings, Maps, NodeLists 등과 같이 반복 가능한 데이터 구조를 반복할 수 있습니다.
루프 의 for/of구문은 다음과 같습니다.
for (variable of iterable) {
// code block to be executed
}
변수 - 모든 반복에 대해 다음 속성 값이 변수에 할당됩니다. 변수const 는 , let또는 로 선언할 수 있습니다
var.
iterable - iterable 속성이 있는 객체입니다.
배열에 대한 루핑
예시
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x + " ";
}
문자열 반복
예시
let language = "JavaScript";
let text = "";
for (let x of language) {
text += x + " ";
}
자세한 내용은 JavaScript 루프 For/In/Of 장에서 알아보세요 .
자바스크립트 맵 객체
Object를 키로 사용할 수 있다는 것은 Map의 중요한 기능입니다.
예시
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Create a new Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
JavaScript Map() 장에서 Map 객체에 대해 자세히 알아보십시오 .
자바스크립트 세트 객체
예시
// Create a Set
const letters = new Set();
// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
JavaScript Set() 장에서 Set 객체에 대해 자세히 알아보십시오 .
자바스크립트 클래스
JavaScript 클래스는 JavaScript 객체용 템플릿입니다.
키워드 class를 사용하여 클래스를 만듭니다.
항상 다음과 같은 메소드를 추가하십시오 constructor().
통사론
class ClassName {
constructor() { ... }
}
예시
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
위의 예는 "Car"라는 클래스를 생성합니다.
클래스에는 "이름"과 "연도"의 두 가지 초기 속성이 있습니다.
JavaScript 클래스는 객체가 아닙니다 .
JavaScript 객체를 위한 템플릿 입니다.
클래스 사용
클래스가 있으면 클래스를 사용하여 객체를 만들 수 있습니다.
예시
const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);
JavaScript 클래스 장에서 클래스에 대해 자세히 알아보십시오 .
자바스크립트 약속
Promise는 "코드 생성"과 "코드 소비"를 연결하는 JavaScript 객체입니다.
"코드 생성"은 시간이 걸릴 수 있으며 "코드 소비"는 결과를 기다려야 합니다.
약속 구문
const myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)
myResolve(); // when successful
myReject(); // when error
});
// "Consuming Code" (Must wait for a fulfilled Promise).
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
프라미스 사용 예
const myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
JavaScript Promises 장에서 Promises에 대해 자세히 알아보십시오 .
기호 유형
JavaScript 기호는 숫자, 문자열 또는 부울과 같은 기본 데이터 유형입니다.
다른 코드가 실수로 액세스할 수 없는 고유한 "숨겨진" 식별자를 나타냅니다.
예를 들어, 다른 코더가 제3자 코드에 속한 person 객체에 person.id 속성을 추가하려는 경우 서로 값을 혼합할 수 있습니다.
Symbol()을 사용하여 고유 식별자를 생성하면 이 문제가 해결됩니다.
예시
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
let id = Symbol('id');
person[id] = 140353;
// Now person[id] = 140353
// but person.id is still undefined
기호는 항상 고유합니다.
동일한 설명으로 두 개의 기호를 생성하면 값이 다릅니다.
Symbol("id") == Symbol("id") // false
기본 매개변수 값
ES6에서는 함수 매개변수가 기본값을 가질 수 있습니다.
예시
function myFunction(x, y = 10) {
// y is 10 if not passed or undefined
return x + y;
}
myFunction(5); // will return 15
기능 휴식 매개변수
나머지 매개변수(...)를 사용하면 함수가 무한한 수의 인수를 배열로 처리할 수 있습니다.
예시
function sum(...args) {
let sum = 0;
for (let arg of args) sum += arg;
return sum;
}
let x = sum(4, 9, 16, 25, 29, 100, 66, 77);
String.includes()
이 includes()메서드는 true문자열에 지정된 값이 포함되어 있으면 반환하고, 그렇지 않으면 false다음 을 반환합니다.
예시
let text = "Hello world, welcome to the universe.";
text.includes("world") // Returns true
String.startsWith()
이 startsWith()메서드는 true
문자열이 지정된 값으로 시작하면 반환하고, 그렇지 않으면 false다음 을 반환합니다.
예시
let text = "Hello world, welcome to the universe.";
text.startsWith("Hello") // Returns true
String.endsWith()
이 endsWith()메서드는 true
문자열이 지정된 값으로 끝나면 반환하고, 그렇지 않으면 false다음 을 반환합니다.
예시
var text = "John Doe";
text.endsWith("Doe") // Returns true
Array.from()
The Array.from() method returns an Array object from any object with a length
property or any iterable object.
Example
Create an Array from a String:
Array.from("ABCDEFG") // Returns [A,B,C,D,E,F,G]
Array keys()
The keys() method returns an Array Iterator object with the keys of an array.
Example
Create an Array Iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
}
Array find()
The find() method returns the value of the first array element that passes a
test function.
This example finds (returns the value of ) the first element that is larger than 18:
Example
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
Array findIndex()
The findIndex() method returns the index of the first array element that
passes a test function.
This example finds the index of the first element that is larger than 18:
Example
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
New Math Methods
ES6 added the following methods to the Math object:
Math.trunc()Math.sign()Math.cbrt()Math.log2()Math.log10()
The Math.trunc() Method
Math.trunc(x) returns the integer part of x:
Example
Math.trunc(4.9); // returns 4
Math.trunc(4.7); // returns 4
Math.trunc(4.4); // returns 4
Math.trunc(4.2); // returns 4
Math.trunc(-4.2); // returns -4
The Math.sign() Method
Math.sign(x) returns if x is negative, null or positive:
Example
Math.sign(-4); // returns -1
Math.sign(0); // returns 0
Math.sign(4); // returns 1
The Math.cbrt() Method
Math.cbrt(x) returns the cube root of x:
Example
Math.cbrt(8); // returns 2
Math.cbrt(64); // returns 4
Math.cbrt(125); // returns 5
The Math.log2() Method
Math.log2(x) returns the base 2 logarithm of x:
Example
Math.log2(2); // returns 1
The Math.log10() Method
Math.log10(x) returns the base 10 logarithm of x:
Example
Math.log10(10); // returns 1
New Number Properties
ES6 added the following properties to the Number object:
EPSILONMIN_SAFE_INTEGERMAX_SAFE_INTEGER
Example
let x = Number.EPSILON;
Example
let x = Number.MIN_SAFE_INTEGER;
Example
let x = Number.MAX_SAFE_INTEGER;
New Number Methods
ES6 added 2 new methods to the Number object:
Number.isInteger()Number.isSafeInteger()
The Number.isInteger() Method
The Number.isInteger() method returns true if the argument is an integer.
Example
Number.isInteger(10); // returns true
Number.isInteger(10.5); // returns false
The Number.isSafeInteger() Method
A safe integer is an integer that can be exactly represented as a double precision number.
The Number.isSafeInteger() method returns true if the argument is a safe integer.
Example
Number.isSafeInteger(10); // returns true
Number.isSafeInteger(12345678901234567890); // returns false
Safe integers are all integers from -(253 - 1) to +(253 - 1).
This is safe: 9007199254740991. This is not safe: 9007199254740992.
New Global Methods
ES6 added 2 new global number methods:
isFinite()isNaN()
The isFinite() Method
The global isFinite() method returns false if the argument is Infinity or NaN.
Otherwise it returns true:
Example
isFinite(10/0); // returns false
isFinite(10/1); // returns true
The isNaN() Method
The global isNaN() method returns true if the argument is NaN. Otherwise it returns false:
Example
isNaN("Hello"); // returns true