[JavaScript] ECMAScript 5 & ES6

< JS ES5 version > 

(1) "use strict"

: strict mode 선언시, 선언되지 않은 변수를 사용할 수 없음 

 

(2) 문자열 인덱싱 (string index)

: 문자열의 특정 인덱스에 접근가능

=> str[0] 

 

(3) string literal break up 

: 문자열을 여러 줄로 나누어 작성이 가능

" hello" 

+ "hh" 

=> return hello hh 

 

(4) 예약어를 속성 이름으로 사용 가능

 

(5) 배열의 모든 요소를 합산하거나, 특정 로직을 적용하여 값을 축약할 수 있음

=> Array reduce(), reduceRight() : sum of all numbers in an array 

 

(6) 배열의 모든 요소가 특정 조건을 만족하는지 확인

=> Array every() : numbers.every(myFunction) 

function myFunction(value) {
	return value > 18;
}

(7) Array indexOf(), lastIndexOf()

: lastIndexOf() works same as indexOf(), but searches from the end of the array.

 

(8) JSON.parse(), JSON.stringify()

-JSON.parse() : 텍스트(JSON 형식)를 JavaScript 객체로 변환

-JSON.stringify() : JavaScript 객체를 JSON 형식의 문자열로 변환

 

(9) Date.now(), toISOString()

- Date.now() : same as getTime() on a Date Object 

- toISOString() : converts a Date object to a string, using the ISO standard format

=> Date 객체를 ISO 8601 형식의 문자열로 변환 ("2024-11-19T12:34:56.789Z")

 

(10) Property Getters and Setters 

: 객체의 속성을 정의할 때 Object.defineProperty()를 사용해 getter와 setter를 추가 할 수 있음

=> Object.defineProperty() 

 

(11) E5 Object Methods 

: 객체의 프로토타입을 반환

- Accessing the prototype => Object.getPrototypeOf(object)

 

(12) ES5 allows trailing commas in object & array 

JSON형식에서는 허용 XX! 

 

< JS ES6 version > 

(1) let 

: block scope를 가지는 변수 선언을 허용

 

(2) const 

: 값 변경이 불가능

 

(3) Arrow Function "화살표 함수(=>)" 

: NO need for function, return keyword 

• function 키워드와 return 키워드 없이 간결하게 함수를 정의할 수 있음
• 호이스팅이 적용되지 않으므로 반드시 선언 후에 사용함!
• 함수 표현식은 항상 상수값으로 사용되므로 const로 정의하는 것이 더 안전

 

(4) Spread(...) 연산자

: 배열이나 객체 등의 이터러블(iterable)을 개별 요소로 확장

 

(5) Javascript Maps 

: use an Object as a 'key'

 

(6) JavaScript Classes

: class 키워드를 사용하여 클래스를 생성할 수 있습니다.
* 생성자 함수는 constructor()로 정의

 

(7) Promise

: 동기화 관련 

=> 비동기 처리가 아닌 동기 처리로만 코드를 실행한다면, 특정 로직의 실행이 끝날때까지 기다리고 실행해야 하므로 웹 어플리케이션을 실행하는데 많은 시간이 걸림 

• 비동기 처리 관련 작업을 동기적으로 실행할 수 있는 객체
• 비동기 코드를 순차적으로 실행하거나 로직이 끝날 때까지 기다리며 실행 순서를 제어

(8) async, await

: 비동기 코드를 동기 코드처럼 작성할 수 있도록 도와주는 구문

 

(9) setTimeout()  

: web API의 한 종류, 지정된 시간이 지난 후 코드를 실행함

- jquery +  callback 함수 

=> callback 함수 : 데이터가 준비된 시점에서만 지정된 함수(동작)이 작동됨 

 

(10) map(), reduce(), filter()

• map(): 배열의 각 요소를 변환하여 새로운 배열 생성
• reduce(): 배열의 모든 요소를 축약하여 하나의 값을 반환
• filter(): 조건을 만족하는 요소들로만 이루어진 배열을 반환

const arr = [1, 2, 3, 4];
console.log(arr.map(x => x * 2)); // 결과: [2, 4, 6, 8]
console.log(arr.filter(x => x > 2)); // 결과: [3, 4]
console.log(arr.reduce((acc, x) => acc + x, 0)); // 결과: 10

 

(11) 템플릿 문자열 

: 따옴표 대신 ``(백틱) 문자로 문자열을 감싸서 만드는데 ${} 안에 표현식을 넣어 값이나 간단한 식 등 자바스크립트 문법을 문자열 안에 사용가능

=> escape 문자(\)를 `로 대체 가능 

 

 

 

reference : w3schools.com

https://www.geeksforgeeks.org/how-to-use-map-filter-and-reduce-in-javascript/