[JavaScript] ES6 문법

🏷 알아볼 내용

• ES6 문법!
  현재 내게 코드를 작성하며 많은 도움이 되는
  자바스크립트의 표준 문법인 ES6문법에 대해 알아보자!! 🔥🔥🔥

📌 ES6 ??

ES란 ECMAScript의 약자이며 자바스크립트의 표준,규격을 나타내는 용어이며
6는 버전을 뜻하며 2015년에 출시 되었다! 그리하여 ECMAScript 2015로도 알려져 있다!
자주 사용되는 ES6의 업데이트 된 기능에 대해 알아보자!

• let, const 키워드
• 템플릿 리터럴
• 화살표 함수
• 기본 매개변수
• 구조 분해 할당
• Promise
• Classes
• String Method(includes,startsWith,endsWith)

---

let, const 키워드

let : 변수 선언 키워드는 재선언은 불가능 하지만 재할당이 가능한 키워드
const : 상수 선언 키워드로 재선언과 재할당이 불가능하다 즉, 객체와 함께 사용할 때를 제외하고는 변경 불가능한 변수
let, const : 블록스코프를 가지고 있다.

위처럼 let과 const 키워드의 등장으로 기존 var 키워드만 존재했을때 보다 예측 가능한 코드를 작성 할수 있게 되었다

---

템플릿 리터럴(Template Literals)

템플릿 리터럴은 문자열을 연결하기 위해 + 연산자를 사용할 필요가 없고
백틱(`)을 사용하여 문자열 내에서 변수를 사용할 수도 있다.

// 적용 전
function template_literals(str1,str2) {
  return '템플릿 ' + str1 + ' 이렇게' + str2;
}

// 적용 후
function template_literals(str1,str2) {
  return `템플릿 ${str1} 이렇게 ${str2}`
}

console.log(template_literals('리터럴','사용해'))	// '템플릿 리터럴 이렇게 사용해'

---

화살표 함수

함수 표현식을 화살표 함수로 표현할 수 있으며
함수를 간결하게 나타낼 수 있게되어 가독성이 올라갔다

// 적용 전
function arrow(){
	return '나는 화살표 함수' 
}

// 적용 후
const arrow = () => {
	return '나는 화살표 함수'
}

// 화살표 함수 사용 시 return만 있는 경우 생략 가능
const arrow = () => '나는 화살표 함수'

---

기본 매개변수(Default parameters)

매개변수를 찾을 수 없을때 기본 매개변수를 사용하면
매개변수가 정의 되지 않았어도 해당 값으로 사용 가능하다

// 적용 전
function template_literals(str1,str2) {
  return `템플릿 ${str1} 이렇게 ${str2}`
}
console.log(template_literals('리터럴'))	// '템플릿 리터럴 이렇게 undefined'

// 적용 후
function template_literals(str1,str2 = '사용해') {
  return `템플릿 ${str1} 이렇게 ${str2}`
}

console.log(template_literals('리터럴'))	// '템플릿 리터럴 이렇게 사용해'

---

구조 분해 할당

구조 분해 할당이란 펼치다란 뜻으로 객체나 배열에서 사용하며
값을 해체한 후 개별 값을 변수에 새로 할당하는 과정을 말한다.

// 배열
const arr = [1, 2, 3];
const [one, two, three] = arr;
one    // 1
two    // 2
three  // 3

// 객체
const obj = {
 	name : '철수',
  	age : 22
};

const {name, age} = obj;
name  // '철수'
age   // 22

---

Promise

기존 비동기 처리는 콜백 함수를 사용하여 처리하였는데 콜백이 반복 되다보니 콜백헬을 유발시켰다
이를 대체하기 위해 Promise가 도입되었고 Promise 후속처리 메소드를 통해 API 사용 시 편리하게 사용 가능하다

더 자세한 코드와 설명은 아래 링크를 참조 바랍니다
Promise 포스팅

---

Classes(클래스)

class는 객체 지향 프로그래밍(OOP)의 핵심이고 코드를 더욱 안전하게 캡슐화 할 수 있습니다
하지만 자바스크립트는 프로토타입 기반의 객체 지향 언어이다.
그래서 도입된게 class 키워드다

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

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

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

// 상속 적용 시
class myClass {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}

	sayHello() {
		console.log(`안녕 ${this.name} 너의 나이는 ${this.age}살이다`);
	}
}

// myClass 메서드 및 속성 상속
class UserProfile extends myClass {
	userName() {
		console.log(this.name);
	}
}

const profile = new UserProfile('영희', 22);

profile.sayHello(); // 안녕 영희 너의 나이는 22살이다.
profile.userName(); // 영희

---

String Method(includes,startsWith,endsWith)

포함되어있는지(includes), 시작하는지(startsWith), 끝나는지(endsWith)
boolean 타입을 return 해준다.

const str = 'Hello World Hanamon';
str.includes("Hana"); // true
str.startsWith("Hello"); // true
str.endsWith("mon"); // true

---

참고자료

• hyunsu.log
• hanamon.kr