JavaScript가 넷스케이프 커뮤니케이션즈로부터 개발되고 나서, MS에서 JScript를 개발하였다.
하지만 두 언어는 서로 호환되지 못하는 경우가 있어 크로스 브라우징 이슈가 발생하였다.
크로스 브라우징 이슈
:기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈
이 크로스 브라우징 이슈를 해결하기 위해 JavaScript를 표준화를 했다. 그게 바로 ECMAScript 이다
let car_name = 'Ionic';
let price = 50000000;
console.log("차의 이름은 " + car_name + "이고, 가격은 " + price + "원 입니다.");
차의 이름은 Ionic이고, 가격은 50000000원 입니다.
let car_name2 = 'EV';
let price2 = 50000000;
console.log(`차의 이름은 ${car_name2}이고, 가격은 ${price2}원 입니다.`)
차의 이름은 EV이고, 가격은 50000000원 입니다.
ES5
function str(arg1, arg2) { console.log(ar1, arg2); }
var str = function(arg1, arg2) { console.log(arg1, arg2); };
ES6
var str2 = (arg1, arg2) => {
console.log(arg1, arg2);
};
var str3 = arg1 => console.log(arg1);
화살표 함수에서 인자가 하나밖에 없다면, 괄호를 생략할 수 있다.
또한 한줄로 표현이 가능하다면, 중괄호도 생략할 수 있다.
ES5의 경우 객체 내에 있는 메소드를 실행 할 시 this는 메소드가 선언된 해당 객체를 가르키게 된다.
하지만, 객체 안에서 선언된 함수의 this는 해당 객체가 아닌 window를 바라보고 있기 때문에 함수 안에서 this.price을 하여도 아무값도 나오지 않는다.
var NewCar = {
name : "Ionic3",
price : 330000000,
info : function() {
console.log(this)
console.log(this.name , this.price)
function innerInfo() {
console.log(this)
return this.name + ":" + this.price
}
return innerInfo()
}
}
결과로는
{name: "Ionic3", price: 330000000, info: ƒ}
Ionic3 330000000
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
// ":undefined"
ES6의 경우에는 this는 자신을 둘러싸고 있는 this를 바라보고 있기 때문에 바인딩이나 변수에 담을 필요가 없다.
let NewCar2 = {
name : "EV3",
price : 330000000,
info() {
console.log(this)
console.log(this.name , this.price)
innerInfo = () => {
console.log(this)
return this.name + ":" + this.price
}
return innerInfo()
}
}
결과로는
{name: "EV3", price: 330000000, info: ƒ}
EV3 330000000
{name: "EV3", price: 330000000, info: ƒ}
"김현진:25"
화살표 함수를 사용하면 함수가 선언된 스코프에 자동 바인딩이 된다.
let some_car = {
price: 3500000,
show: function () {
console.log(this.price); //3500000
function show_01 () {
console.log(this.price); // undefined
}
show_01();
//화살표 함수
let show_02 = () => {
console.log(this.price); // 3500000
}
show_02();
}
}
some_car.show();
3500000
undefined
3500000
ES5에서는 var밖에 존재하지 않았지만, ES6에서는 let과 const가 추가되었다.
let은 한번 선언된 변수에 다른 값으로 바꿔줄수있지만 const는 바꿀수 없다.
또한 let, const는 블록 스코프로서 스코프 밖에서는 변수를 참조할 수 없다.
var:
재선언, 재할당 가능
block scope 외부에서 내부 참조 가능
function scope 외부에서 내부 참조 불가능
let:
재선언 불가능, 재할당 가능
block scope 외부에서 내부 참조 불가능
function scope 외부에서 내부 참조 불가능
const:
재선언 불가능, 재할당 불가능
block scope 외부에서 내부 참조 불가능
function scope 외부에서 내부 참조 불가능
ES5 이전에는 각 기능별로 JS파일을 나누고 개발 및 관리하는 것이 불가능했다.
ES6에서는 import/export 로 모듈을 관리할 수 있다.
로드 모듈
import 'import to loadname' from 'path'
export default 'module'
import Carousel from "./carousel";
cosnt carousel = new Carousel();
export default class Carousel {
constructor() {
this.calc();
}
calc() {
console.log(10);
}
}
여러 모듈을 사용할 때
import {a1, a2, ...} from '파일 경로'}
export const i = 10;
export function multi(x) {
return i * x;
}
export function superMulti(x) {
return i * x * 10;
}
import * as ‘쓰고싶은단어’ form ‘path’
ES5에서는 class라는 키워드가 없었지만, 프로토타입을 통해 실현이 가능했다.
var Add = function(arg1, arg2) {
this.arg1 = arg1;
this.arg2 = arg2;
};
Add.prototype.calc = function() {
return this.arg1 + "+" + this.arg2 + "=" + (this.arg1 + this.arg2);
};
var num = new Add(12, 33);
console.log(num.calc()); // 12 + 33 = 45
12+33=45
ES6에서는 class 키워드를 사용해서 선언할 수 있다.
class Multiple {
constructor(arg1, arg2) {
this.arg1 = arg1;
this.arg2 = arg2;
}
calc() {
return this.arg1 + "*" + this.arg2 + "=" + (this.arg1 * this.arg2);
}
}
var result = new Multiple(2, 10);
console.log(result.calc()); // 2 * 10 = 20
2*10=20
클래스 상속
클래스의 상속과 오버라이딩은 super를 사용해서 할 수 있다.
ES5
var AddSquare = function(arg1, arg2) {
Add.call(this, arg1, arg2);
};
Object.assign(AddSquare.prototype, Add.prototype);
AddSquare.prototype = {
calc: function() {
// 메소드는 생략될 수 없습니다.
Add.prototype.calc.call(this);
},
calcSquare: function() {
this.pow = Math.pow(this.arg1 + this.arg2, 2);
return "(" + this.arg1 + "+" + this.arg2 + ")^2=" + this.pow;
}
};
var numSquare = new AddSquare(5, 8);
console.log(numSquare.calc()); // 5 + 8 = 13
console.log(numSquare.calcSquare()); // (5 + 8) ^ 2 =169
class AddSquare extends Add {
constructor(arg1, arg2) {
super(arg1, arg2);
}
calc() {
super.calc();
}
calcSquare() {
this.pow = Math.pow(this.arg1 + this.arg2, 2);
return "(" + this.arg1 + "+" + this.arg2 + ") ^ 2 =" + this.pow;
}
}
var numSquare = new AddSquare(5, 8);
console.log(numSquare.calc()); // 5 + 8 = 13
console.log(numSquare.calcSquare()); // (5 + 8) ^ 2 = 169