Javascript : ES 란 ??

ES 는 무엇인가

---

ES 는 ECAMAScript 의 약자이다.

ECAMASript ??

ECAMAScript 는 ECMA 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어입니다.
자바스크립트를 표준화하기 위해서 만들어졌으며 , 꼭 자바스크립트가 아니더라도 어도비 플래시를 사용하는 소프트웨에서 사용하는 소프트웨어에서 사용하는 액션스크립트,MS 사의 인터넷 익스플로러에 쓰이는 J스크립트 등 다른 구현체들 여깃 포함하고 있습니다.

ES 는 프로그래밍 언어가 아닌 스크립트 언어들에 대한 표준, 규격입니다.

New features

• ES2016 (ES7)
• ES2017 (ES8)
• ES2018 (ES9)
• ES2019 (ES10)
• ES2020 (ES11)
• ES2021 (ES12)
• ES2022 (ES13) Stage4 / Finished

ES6 문법

• const, let

const는 변수 선언을 위한 ES6의 새로운 키워드입니다.
const는 var보다 강력하고 일단 사용되면 변수를 다시 할당할 수 없습니다.
즉, 객체와 함께 사용할 때를 제외하고는 변경 불가능한 변수 입니다.

• Arrow functions

  함수 표현식을 화살표 함수로 표현할 수도 있다.
  화살표 함수가 추가되어 함수를 간결하게 나타낼 수 있게 되어 가독성 및 유지 보수성이 올라갔다.
  만약 함수의 본문(body)에 return만 있는 경우 화살표 함수는 return과 {}를 생략할 수 있다. 단, 같이 생략해야한다.
  return문에서 소괄호는 사용가능하다.

가장 좋은 것은 this 를 바인딩 하지 않고 그대로 가져온다.

• Template Literals

  문자열을 연결하기 위해 더하기(+) 연산자를 사용할 필요는 없으며,
  백틱을 사용하여 문자열 내에서 변수를 사용할 수도 있습니다.

  // ES6
  const myFunc = (name, age) => {
  	return `안녕 ${name}, 너의 나이는 ${age}살 이다!`; 
  };
  console.log(myFunc1('영희', 22));
  // 출력 => 안녕 영희, 너의 나이는 22살 이다!
  

• Default parameters (기본 매개 변수)

  매개 변수를 쓰지 않은 경우 매개 변수가 이미 기본값에 정의되어 있으므로 정의되지 않은 오류가 반환되지 않습니다
  따라서 누락된 매개 변수를 사용하여 함수를 실행할 때 기본 매개 변수값을 사용하고 오류를 반환하지 않습니다!

const myFunc = (name, age) => {
	return `안녕 ${name} 너의 나이는 ${age}살 이니?`; 
};

console.log(myFunc1('영희'));
출력 => 안녕 영희 너의 나이는 undefined살 이니?

위의 함수는 정의되지 않은 상태로 반환됩니다. 두 번째 매개 변수 age를 지정하는 것을 잊어버렸기 때문입니다.

그러나 기본 매개 변수를 사용하면 정의되지 않은 매개 변수가 반환되지 않고 매개 변수 할당을 잊어버렸을 때 해당 값이 사용됩니다!

const myFunc = (name, age = 22) => {
	return `안녕 ${name} 너의 나이는 ${age}살 이니?`; 
};

console.log(myFunc1('영희'));
// 출력 => 안녕 영희 너의 나이는 22살 이니?

보시다시피 함수는 두 번째 매개 변수를 놓쳤더라도 값을 반환합니다. 이제 기본 파라미터를 사용하여 오류를 미리 처리할 수 있습니다.

• Array and object destructing(배열 및 객체 비구조화)

비구조화를 통해 배열 또는 객체의 값을 새 변수에 더 쉽게 할당할 수 있습니다.

// ES6 문법
const contacts = {
	famillyName: '이',
	name: '영희',
	age: 22
};

let { famillyName, name, age } = contacts;

• Promises(프로미스)

Promise는 ES6의 새로운 특징입니다.
비동기 코드를 쓰는 방법입니다.
예를 들어 API에서 데이터를 가져오거나 실행하는데 시간이 걸리는 함수를 가지고 있을 때 사용할 수 있습니다.

[Promise , aysnc ,await]
프로미스에 관해 자세히 보려면 위 링크로

• Class
  class는 객체 지향 프로그래밍(OOP)의 핵심입니다. 코드를 더욱 안전하게 캡슐화할 수 있습니다. class를 사용하면 코드 구조가 좋아지고 방향을 유지합니다.

class myClass {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
}

const user = new myClass('영희', 22);

console.log(user.name); // 영희

ES 문법 시리즈 참조
https://velog.io/@kyusung/after-es6
https://www.zerocho.com/category/ECMAScript?page=1