/ #JAVASCRIPT

자바스크립트 개요

자바스크립트란?

자바스크립트(Javascript)는 프로토타입 기반의 스크립트 언어입니다. 오늘날 HTML, CSS와 함께 웹을 구성하는 요소 중 하나이며, 모든 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있습니다.

자바스크립트는 1995년에 넷스케이프(Netscape)의 브랜든 아이크(Brendan Eich)가 10일만에 설계한 것으로 시작되었습니다. 처음에는 모카(Mocha)라는 이름으로 개발되었지만 4달 만에 라이브스크립트(LiveScript)로 개명한 후 다시 3달 후에 자바스크립트(JavaScript)로 이름을 변경하여 오늘날까지 이어지고 있습니다.

ECMAScript

자바스크립트가 개발된 이후 마이크로소프트(Microsoft)에서는 자바스크립트에 자사만의 문법을 넣어 JScript를 개발했습니다.

넷스케이프의 자바스크립트와 마이크로소프트의 JScript는 서로 호환되지 못하는 경우가 있어서 크로스 브라우징 문제를 일으켰습니다.

이 문제를 해결하기 위해 넷스케이프는 표준화를 위한 기술 규격을 비영리 표준화기구인 ECMA 인터네셔널에 제출하였고, ECMA-262라는 이름으로 1997년 표준화가 시작되었습니다.

초기에는 마이크로소프트의 비협조적인 태도로 표준화에 실패했지만, 2차 브라우저 전쟁에서 구글의 Chrome에게 패배하고 2009년 ECMAScript 5가 제정되면서 표준 문제가 다소 해결되었습니다.

오늘날 구글 크롬(Chrome)의 V8 엔진, 모질라 파이어폭스(Firefox)의 SpiderMonkey 엔진, 마이크로소프트 에지(Edge)의 Chakra 엔진 등은 ECMAScript 표준을 따르고 있습니다.

ECMAScript 6

ECMAScript 6은 ECMA-262 표준의 제 6판입니다. ES6, ES2015, ECMAScript 2015는 모두 ECMAScript 6를 뜻합니다.

ES6에서는 다양한 문법들이 추가되었습니다.

템플릿 리터럴

ES6에서는 템플릿 리터럴을 통해 문자열 표현이 간단해졌습니다. 작은 따옴표(‘)나 큰 따옴표(“) 대신 백틱(`)을 통해 문자열을 감싸 표현할 수 있습니다. 이때 플레이스 홀더(${변수})를 통해 백틱 내부에 문자열과 변수를 함께 표현할 수 있습니다.

ES5
var nickName = "루비스코"
console.log("닉네임은 " + nickName + "입니다.");
ES6
var nickName = "루비스코"
console.log(`닉네임은 ${nickName}입니다.`);

화살표 함수

ES6에서는 람다식이라 불리는 화살표 함수를 통해 함수 선언이 조금 더 간단해졌습니다.

ES5의 경우 익명함수는 다음과 같이 선언합니다.

ES5
var plus = function(a, b) {
  return a + b;
}

console.log(plus(1, 2));

ES6에서는 다음과 같이 표현할 수 있습니다.

ES6
const plus = (a, b) => {
  return a + b;
}

console.log(plus(1, 2));

리턴문이 위와 같이 한줄이라면 블록과 retrun문을 생략하여 다음과 같이 나타낼 수 있습니다.

ES6
const plus = (a, b) => a + b;

console.log(plus(1, 2));

매개변수가 1개인 경우 괄호의 생략도 가능합니다.

ES6
const msg = text => `메시지: ${text}`;

console.log(msg('메시지입니다.'));

람다식을 통해 함수를 선언할 경우 블록 스코프가 무시되므로 this를 따로 변수에 담을 필요가 없습니다.

ES5
var car = {
  model: 'k5',
  price: 6000,
  msg() {
    var self = this;
    var text = function() {
      return self.model;
    }
    return `모델: ${text()}`;
  }
}

console.log(car.msg());
ES6
var car = {
  model: 'k5',
  price: 6000,
  msg() {
    var text = () => this.model;
    return `모델: ${text()}`;
  }
}

console.log(car.msg());

변수 선언

ES5에서는 var를 통해 변수를 선언합니다. 반면 ES6에서는 let, const를 통해 변수를 선언할 수 있습니다.

var는 변수의 중복선언과 재할당이 가능합니다.

ES5
var text = '루비스코';
console.log(text); // 루비스코

var text = '스팟';
console.log(text); // 스팟

let은 변수의 중복선언은 불가능하지만 재할당은 가능합니다.

ES6
let text = '루비스코';
console.log(text); // 루비스코

text = '스팟';
console.log(text); // 스팟

let text = '루비스코'; // Uncaught SyntaxError: Identifier 'text' has already been declared

const는 변수의 중복선언 뿐만 아니라 재할당도 불가능합니다.

ES6
const text = '루비스코';
console.log(text); // 루비스코

text = '스팟'; // Uncaught SyntaxError: Identifier 'text' has already been declared