WIL 8월 3주차_ JavaScript의 ES란?, ES5/ES6 문법 차이

이번주는 자바스크립트 기초문법 강의와 알고리즘 문제를 푸는 주간이다.
오늘은 자바스크립트의 ES에 대해 간단하게 회고하고 가려고 한다.

자바스크립트의 역사

• 1995년 자바스크립트 탄생
  • 🌐 넷스케이프 커뮤니케이션(LiveScript → Javascript)
  • 🖥️ 브라우저 동작 스크립트 언어
• 1999년 자바스크립트 표준화(ECMA-262) 완료
• 2005년 AJAX 등장
  • 비동기 웹 애플리케이션 개발 가능
  • 폭발적인 UX 향상 🚀
• 2008년 V8 엔진 출시(google)
  • super fast(코드 실행 속도 상당부분 개선)
  • 🛠️ 컴파일러, 메모리관리 시스템 👍
• 2009년 Node.js 등장, 서버 개발 활성화
  • 서버개발의 지각변동 : PHP, Ruby, Python, Java → Javascript(Node.js)
  • 하나의 언어 → FrontEnd + BackEnd + DB(MongoDB) = FullStack
• 2015년 ECMAScript 6(ES6) 버전 출시 🚀
• 2016년 프론트엔드 프레임워크(React, Vue, Angular) 대중화, SPA 개발 활성화 🌟
• 현재 자바스크립트는 프론트엔드 및 백엔드 개발 분야에서 널리 사용되며, Node.js를 이용한 서버 개발도 활발하게 이루어지고 있습니다.

ES6

let, const

변수 선언을 위해 존재하던 var 를 대체해서 나온 변수 선언에 사용되는 키워드 !

선언 : 변수명을 자바스크립트 엔진에 알리는 것
할당 : 변수에 값을 저장하는 것 (= 할당연산자)

let , const 의 특징
let : 재할당은 가능 , 재선언은 불가

let value = "value1"
console.log(value) // value1

value = "value2" // 재할당 가능
console.log(value) // value2

let value = "value3" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared

const: 재할당, 재선언이 불가능, 초기값이 없으면 선언 불가능.

const value; // 초기값 없이 선언 불가능, SyntaxError: Missing initializer in const declaration
---
const value = "value1"
console.log(value) // value1

value = "value2" // 재할당 불가능, TypeError: Assignment to constant variable.

const value = "value2" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared

화살표 함수 (Arrow Fuction)
function이나 return키워드 없이 함수를 만드는 방법!

// ES5
function func() {
	return true
}

//ES6
const func = () => true
const func = () => {
	return true
}

() => {}
parm => {}
(parm1, parm2, ...parms) -> {}

// 익명 화살표 함수
() => {}

this
function을 호출할 때, this가 정해지지만, 화살표 함수는 선언할 때, this 가 정해진다.

삼항 연산자 (ternary operator)

condition ? expr1 : expr2

console.log(true ? "참" : "거짓") // 참
console.log(false ? "참" : "거짓") // 거짓코드를 입력하세요

구조분해할당 (Desctructuring)
구조 분해 할당이란?
배열[]이나 객체{}의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법.

// 배열의 경우
let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // "new"

let arr = ["value1", "value2", "value3"];
let [a,b,c] = arr;
console.log(a,b,c) // value1 value2 value3

// let [a,b,c] = arr; 은 아래와 동일!
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];

let [a,b,c,d] = arr
console.log(d) // undefined

let [a,b,c,d = 4] = arr
console.log(d) // 4

// 객체의 경우
let user = {name: "nbc", age: 30};
let {name, age} = user;

// let name = user.name;
// let age = user.age;

console.log(name, age) // nbc 30

// 새로운 이름으로 할당
let {name: newName, age: newAge} = user;
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) //nbc 30

let {name, age, birthDay} = user;
console.log(birthDay) // undefined

let {name, age, birthDay = "today"} = user;
console.log(birthDay) // today

ㄴ위의 내용은 잘 이해되지 않는다.(강의를 다시 봐야할 듯 )

전개구문 (Spread)
배열이나 객체를 전개하는 문법
구조분행할당과 함께 정말 많이 사용됨.

// 배열
let arr = [1,2,3];

let newArr = [...arr, 4];
console.log(newArr) // [1,2,3,4]

// 객체
let user = {name: "nbc", age: 30};
let user2 = {...user}

user2.name = "nbc2"

console.log(user.name) // nbc
console.log(user2.name) // nbc2

let user2 = {...user}
여기서 ...user 의 의미는

...은 자바스크립트에서 전개연산자, 스프레드 연산자라고 불리는 특별한 구문
객체를 복사한다고 이해하면 된다. 객체를 복사하거나 펼치는 역할을 한다.
예를 들어, 다음과 같이 user객체가 있다고 가정해보자.

let user = {
  name: 'John',
  age: 30,
  email: 'john@example.com'
};

let user2 = {...user};

user2 객체는 user객체의 속성과 값을 복사한 결과를 가지게 된다. 따라서 user2객체는 다음과 같아짐

{
  name: 'John',
  age: 30,
  email: 'john@example.com'
}

템플릿 리터럴 (Template literals)
여러 줄로 이뤄진 문자열과 문자 보간기능을 사용하게 만들어주는 문자열 리터럴 표현식
백틱 (`) 과 ${}로 표현합니다.

"string"
'string'
new String("string")

`string text`

`string text 
string text line2`

`string text ${value} text`