[ECMAScript] ES5, ES6 문법 정리

ECMAScript 공부

1. ES5 이전

• ES3 (1999) : 정규표현식, try/catch문

1.1. string

• string.length : 길이 속성
• string.indexOf(string, [start]) : 해당 글자의 시작 index 위치 반환
• string.lastIndexOf(string, [start]) : 해당 글자의 마지막 시작 index 위치 반환
• string.search(string) : indexOf와 비슷하지만 정규표현식 사용 x
• string.slice(index, index2) : index부터 index2-1까지 자르기
  • 음수 index는 뒤에서부터 셈
• string.substring(index, index2) : slice와 비슷하지만, 음수 불가
• string.substr(index, length) : index부터 length만큼 자르기
• string.replace(string, string2) : string을 string2로 변환
• string.toUpperCase() : 대문자 만들기
• string.toLowerCase() : 소문자 만들기
• string.concat(string, string2) : string과 string2 이어붙여서 return
• string.split(구분자) : 구분자로 구분하여 array로 변환

1.2. 정규 표현식

• 문법

/pattern/modifier

pattern : 찾아야하는 것

modifier : case에 맞춰 찾을 수 있게 해줌

• pattern
  • [abc] : 대괄호 내의 아무 char에나 맞으면 됨
  • [0-9] : 해당 범위 내
  • (x|y) : 여러 가지 중 하나
  • \d : digit 찾기
  • \s : 공백 찾기
  • \b : 단어 시작이나 끝
  • \uxxxx : hex 숫자
  • n+ : 적어도 하나의 n
  • n* : 0이상
  • n? : 0 또는 1개
• modifier 종류
  • i : 기본
  • g : 모든 matching 찾기
  • m : multiline matching 찾기
• 함수
  • pattern.test(string) 으로 테스트해볼 수 있음
    • 찾으면 true
    • 아니면 false
  • pattern.exec(string) 으로 테스트해볼 수 있음
    • 찾으면 object
    • 아니면 null object

2. ES5

2.1. 문법 변경 사항

• []로 string value에 접근 가능
• array나 {} 의 마지막 요소에 콤마
  • {} : object literals
  • 마지막 요소에 콤마 : Trailing comma
  • 주의 : JSON에는 허용 x, IE8은 crash남
• string 상수에 multiline 가능
• 속성 이름으로 예약어 사용 가능

2.2. 주요 변경 사항

2.2.1. use strict

use strict 구문이 global 변수 처리되어 해당 범위에 있는 js가 strict mode에서 실행된다.

strict mode란?

• 변수 이름을 잘못 기재하면, 다른 변수를 생성하는 것이 아니라 error를 throw함

• 기재되어있지 / 존재하지 않는 변수에 대한 접근 불가

• 변수, 함수 삭제 불가

• 똑같은 매개변수 불가

• 숫자 앞에 0불가

• readonly 변수는 쓰기 연산 불가

  var obj = {};
  Object.defineProperty(obj, "x", {value:0, writable:false});
  obj.x = 3.14; // 불가

• get으로만 얻을 수 있는 변수는 바로 쓸 수 없음

  var obj = {get x() {return 0} };
  
  obj.x = 3.14; // 불가

• 변수 이름으로 불가한 것들

  • implements
  • interface
  • let
  • package
  • private
  • protected
  • public
  • static
  • yield

• this는 해당 function을 호출한 object를 의미하기 때문에, 해당 object가 명확하지 않으면 this가 undefined가 됨

2.2.2. String.trim()

let str = "        hello heejin   ";
alert(str.trim());

양쪽의 빈칸을 없애줌

IE8에서는 정규표현식으로 대체해야함

2.2.3. Array.isArray(object)

object가 array인지 체크

2.2.4. Array.forEach(func)

forEach에 넘겨진 매개변수 function이 Array의 각 요소마다 실행됨

function에는 매개변수 value가 있음

2.2.5. Array.map(func)

map에 넘겨진 매개변수 function이 Array의 각 요소마다 실행되고, 실행 결과를 새로운 Array로 return함

function에는 매개변수 value, index, array가 있음

 

2.2.6. Array.filter(func)

filter에 넘겨진 매개변수 test function을 통과한 요소만 다시 저장하여, 실행 결과를 새로운 Array로 return 함

function에는 매개변수 value, index, array가 있음

2.2.7. Array.reduce(func)

한 가지 변수를 생성하기 위해 Array의 요소를 반복해서 가져오는 경우.

reduce에 넘겨진 매개변수 function을 통해 새로 정의한 변수를 넘겨받고 결과로 return 함

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

function에는 매개변수 total, value, index, array가 있음

total은 초기 변수이자 이전 요소의 function에서 return된 값임

2.2.8. Array.reduceRight(func)

오른쪽에서 왼쪽으로 동작

2.2.9. Array.every(func)

모든 요소가 매개변수로 넘겨진 test function을 만족하는지 boolean으로 return

2.2.10. Array.some(func)

매개변수로 넘겨진 test function을 만족하는 요소가 있는지 boolean으로 return

2.2.11. Array.indexOf(item, [start])

찾고자하는 요소를 매개변수로 넘기면 해당 요소를 start부터 찾아서 첫 index를 return

2.2.12. Array.lastIndexOf(item, [start])

찾고자하는 요소를 매개변수로 넘기면 해당 요소를 start부터 찾아서 마지막 index를 return

2.2.13. JSON.parse(string)

string을 json object로 변환

2.2.14. JSON.stringify(object)

object를 string으로

2.2.15. Date.now()

milliseconds 단위의 date return

2.2.16. Property Getters and Setters

// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;

2.2.17. New Object Property Methods

Object.defineProperty(변수, 속성, 바꿀 속성)로 object의 속성을 변경할 수 있으며, 읽기 쓰기 변경 권한도 조정할 수 있음

// Change a Property:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});

추가된 메소드들

// Adding or changing an object property
Object.defineProperty(object, property, descriptor)

// Adding or changing many object properties
Object.defineProperties(object, descriptors)

// Accessing Properties
Object.getOwnPropertyDescriptor(object, property)

// Returns all properties as an array
Object.getOwnPropertyNames(object)

// Returns enumerable properties as an array
Object.keys(object)

// Accessing the prototype
Object.getPrototypeOf(object)

// Prevents adding properties to an object
Object.preventExtensions(object)
// Returns true if properties can be added to an object
Object.isExtensible(object)

// Prevents changes of object properties (not values)
Object.seal(object)
// Returns true if object is sealed
Object.isSealed(object)

// Prevents any changes to an object
Object.freeze(object)
// Returns true if object is frozen
Object.isFrozen(object)

2.2.18. string 속성 접근

• string.charAt(index) : index에 있는 character 반환
  • charAt 연산자는 없으면 empty string return
• string.charCodeAt(index) : 해당 index의 글자의 UTF-16 code 반환
• string[] 으로 접근 가능
  • IE7 전에는 동작 x
  • [] 연산자는 없으면 undefined return
  • readonly => 해당 연산자로 값 할당 x

3. ES6

3.0.1. let, const

let, const는 block 범위 내에서 정의할 수 있음

재정의 불가

let은 값 재할당 가능, const는 불가

3.0.2. arrow function

const a = (x, y) => x*y;

arrow function은 this 가 기본 function과 다름

기본 function은 해당 function을 call한 object

arrow function은 해당 function의 owner

본래 js는 hoisting(끌어올려 사용하기)이 가능한데, arrow function은 불가

return 키워드와 {}를 생략 가능

3.0.3. Loop Array, String

for (x of cars) {
    ...
}
for (x of txt) {
    ...
}

• for in : object에 적용되어 index를 받아옴
• for of : iterable object에 적용되어 요소를 받아옴
  • string, array, map, nodelist 등등 가능

3.0.4. JS classes

class 키워드를 사용해서 class를 만들 수 있게 됨

constructor function을 항상 포함하고 있어야 함

object가 아니라 object의 template으로 작용

사용 방식은 여느 언어들과 같음

3.0.5. JS Promises

let myPromise = new Promise(function(myResolve, myReject) {

  myResolve(); // when successful
  myReject();  // when error
});

myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

3.0.6. Symbol type

object의 숨은 identifier를 만들 때 사용

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

let id = Symbol('id');
person.id = 140353;

항상 unique한 값을 가져야 함

3.0.7. default parameter values

매개변수 넘길 때 default 값 지정 가능

3.0.8. rest parameter

function sum(...args){
}

해당 함수는 매개변수의 갯수가 정해지지 않음

3.0.9. Array.find(func)

매개변수로 넘겨진 function을 통과한 첫번째 요소 반환

function의 매개변수는 value, index, array

3.0.10. Array.findIndex(func)

위와 같고, index를 반환

3.0.11. New Number Properties

• EPSILON
• MIN_SAFE_INTEGER
• MAX_SAFE_INTEGER

3.0.12. New Number Method

• Number.isInteger(number) : 정수인지 확인
• Number.isSafeInteger(number) : 안전한 범위 내의 정수인지 확인

3.0.13. New Global Methods

• isFinite() : Infinity 또는 NaN이 아닌지 확인
• isNaN() : NaN이 아닌지 확인

4. ES7

4.0.1. string.padStart(size, paddingChar)

paddingChar를 size-1만큼 앞에 padding

4.0.2. string.padEnd(size, paddingChar)

paddingChar를 size-1만큼 뒤에 padding

 

 

 

---

참고 : www.w3schools.com/js/js_versions.asp