ES란 무엇일까

계발자·2024년 4월 25일

ES란?

크로스 브라우징 이슈
기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈
이 크로스 브라우징 이슈를 해결하기 위해 JavaScript를 표준화를 했다.

ES란 ECMA Script의 약어이며 자바스크립트의 표준 규격을 나타내는 용어이고,
JavaScript를 표준화시키기 위해 탄생했다.

JavaScript가 오래도록 사용되면서, 문법이 확장되고 보완이 필요해지면서
JavaScript를 표준화시키고 규격화시키기 위해 ES가 만들어졌다.
현재는 ES10 버전까지 나왔고, 주로 쓰이는 것은 ES6인데, 6은 버전 이름이다.

ES5 와 ES6 의 차이

템플릿 리터럴

템플릿 리터럴이란 작은 따옴표, 큰 따옴표 대신 백틱(`)으로 문자열을 감싸 표현하는 기능을 말한다. 이는 문자열을 중간에 추가할 때 '+'를 사용할 필요없이 백틱 사이에 ${문자열}을 넣어 추가할 수 있다.

ES5
let age = 30;
let name = "크리스"
console.log(name + "의 나이는 " + age + "입니다.")

ES6
let age = 30;
let name = "크리스"
console.log(`${name}의 나이는 ${age}입니다.`)

화살표 함수

화살표 함수로 함수선언이 더욱 간단해졌다. 화살표 함수를 map, filter 등의 내장함수에 사용할 수 있다.

ES5
function myFunc(name) {
	return '안녕' + name;
}

console.log(myFunc('크리스'));

ES6
const myFunc = (name) => {
	return `안녕 ${name}`;
}

console.log(myFunc('크리스')); 

//return을 따로 명시하지 않아도 된다.
const myFunc = (name) => `안녕 ${name}`;

console.log(myFunc('크리스'));

변수 선언

ES5에서는 var 키워드로 변수를 선언할 수 있었다. 이는 function 단위로 사용할 수 있으며 그 안에서 재할당 재선언이 가능했다.

ES6에서는 let, const이 등장했다.
let은 동일한 이름으로 재선언할 수 없지만 값은 재할당 할 수 있다.
const는 상수로, 재선언과 재할당이 불가능하다.
let과 const는 Block 스코프 또는 Function 스코프 내부에 선언하면 해당 block이나 function 밖에서는 참조할 수 없다.
즉 중괄호 밖에서는 불려질 수 없다.

var은 Function 내부에 선언되면 외부에서 참조할 수 없지만 block의 경우 내부에 선언되어 있어도 외부에서 참조 할 수 있다.

변수를 재할당 할 일이 없을 경우에는 const를 사용하는 것이 좋다고 한다.

const name = "Isabel"
//name = "Isabella" const 재할당할 경우 에러 발생

let age = 30
age = 29 // let 재할당 가능
console.log(name + "의 나이는 " + age + "입니다.")

모듈

모듈은 실현가능한 특정 프로그램의 그룹으로 ES6부터는 export, import로 모듈을 관리할 수 있다.
export와 import로 재사용 가능한 구성요소를 작성할 수 있게된다. export로 모듈을 내보낼 수 있고, import로 원하는 모듈을 가져와 사용할 수 있다.
둘 이상의 모듈을 import하려는 경우
import { 임포트 하려는 모듈들 } from '임포트하려는 모듈이 들어있는 파일의 경로'의 형식으로 사용할 수 있다.

import{ detail, post, update } from './modules'

클래스

ES5에서는 클래스라는 키워드가 없었다. ES6에서부터 생겨 클래스를 생성할 수 있게 되었다.

class myFriends {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
  	function friendList(){
    	console.log(this.name + " : " + this.age)
    }
}

const friendA = new myFriends('크리스', 30);
friendA.friendList(); // 크리스 : 30

클래스 상속

extends키워드로 클래스를 상속받아올 수 있고, super키워드로 부모클래스의 요소에 접근할 수 있다. 상속받아온 클래스를 자식클래스에서 super키워드로 접근하여 overriding 재정의할 수 있다.(JAVA의 클래스와 유사)

class classFriends extends myFriends {
	constructor(name, age, class) {
		super(name) = name;
		super(age) = age;
      	this.class = class;
	}
  	function introFrnd(){
    	console.log(`${super.name}은 ${super.age}살이고, ${this.class}반입니다. `)
    }
}

const friendB = new myFriends('크리스티나', 33, '심화반');
friendB.introFrnd();