javacript ES6

javacript ES6 특징

1. var, let, const 변수

변수 var , let, const 차이점

var

1. 변수 중복 선언이 가능하다.
2. 중복선언으로 인해 동일한 변수가 있으면 값이 변경된다.

var x = 1;
var y = 2;

var x = 2; // 중복선언으로 x의 값은 2로 변경된다.
var y = 2;

console.log (x,y) // x = 2, y = 2 의 값을 가진다.

let

1. 변수 중복 선언이 불가능하며, 중복선언 시 에러가 발생된다.
2. 변수에 재할당이 가능하다.

let age = 18

let age = 19 // 중복선언.

console.log(age) // 중복선언으로 에러발생!!

age = 20; // age에 재할당
console.log(age) // 20

const

1. 중복 선언,재할당이 불가능하다.
2. 변수 선언과 초기화를 같이 해야한다.

const name = "철수"

name = "훈이" // 재할당 x 오류 발생

var name = "훈이" // name은 위에 상수로 잡혀있기 때문에 똑같은 변수명을 사용하게 되면 오류

2. Default Parameters

• 함수의 파라미터 정의 부분에 default 값을 선언할 수 있다.

const str = function (a, b = 2) {
	return a +b
}

str(10) // 10 + 2 = 12 

3. Template Literals, Muti-line Strings

템플릿 리터럴(Template literals)

ES6부터 새로 도입된 문자열 표기법이다.
표현식/문자열 삽입, 여러 줄 문자열 등 다양한 기능을 제공한다.
템플릿 리터럴은 런타임 시점(크롬,파이어폭스,익스플로러)에
일반 자바스크립트 문자열로 처리/변환된다.

// 기존의 따옴표 방식 예제
const name : "철수"
const age: 18

console.log("저의 이름은 " + name + "이고, 나이는 " + age + "입니다.") //'저의 이름은 철수이고, 나이는 18입니다.'

기존의 따옴표 방식에는 줄바꿈이 허용되지 않아. 백슬럿()로 시작하는 이스케이프 시퀀스를 사용해야하며, "+" 연산자로 여러번 이어 붙이게 되는데, 이 과정에서 실수하게 된다면 코드를 다시 살펴보게 되고, 처음 접하시는 비전공자 같은 경우에는 오류로 인해 하나하나 찾는 시간이 늘어나게 된다.

// ``(백틱) 사용 예제
const name : "철수"
const age: 18

console.log(`저의 이름은 ${name}`이고, 나이는 ${age}입니다.) //'저의 이름은 철수이고, 나이는 18입니다.'

다음은 백틱(`) 사용 예제이다.
기존 따옴표 방식에는 +연산자로 여러번 이어 붙여야 한다면 백틱 같은경우 + 연사자를 사용하지 않고 (``) 안에 가지고 오고싶은 변수를 $(변수명)을 가져와 값을 얻을 수 있고, 또 기존 따옴표방식에 비해 가독성이 좋고, 코드가 한결 편안해진 느낌이 든다.![]

4. 구조 분해 할당

- 배열 혹은 객체 에서 가각 값(value)이나 프로퍼티(property)를 분해하여 손쉽게 별도의 변수에 담을 수 있도록 해줍니다. - 구조분해를 할시 분해대상은 수정 또는 파괴 되지 않는다.

배열 분해하기

• 변수명을 자유롭게 정할 수 있다.
• 순서가 중요하다(필요없을 경우 ,로 생략한다.)

// 이름과 성을 요소로 가진 배열 arr
let arr = ["Bora", "Lee"]

let [firstName, surname] = arr;

alert(firstName); // Bora
alert(surname); // Lee

객체 구조분해 할당

• key값으로만 저장할 수 있다.
• 순서가 중요하지 않음 (하지만 변수명이 중요함)

const obj ={ name : "철수", gender :"male"}

const {name, gender} = obj // 이름과 성별을 가져온다.

console.log({name, gender}) //{ name : "철수", gender :"male"}
console.log(obj) // { name : "철수", gender :"male"}

//새로운 벨류값으로 저장
const {name: newName, gender : newGender} = obj

console.log(newName,newGender) // '철수' 'male'

5. (Enhanced Object Literal) - 객체 리터럴

향상된 객체 리터럴

- 기존 자바스크립트에서 사용하던 객체 정의 방식을 개선한 문법이다. 자주 사용하던 문법들을 간결하게 사용할 수 있도록 바뀌었다.

- 속성과 값이 같으면 value값은 지우고 key만 적을 수 있다.

let name = "철수"
let gender = "male"
   
const profile = {
  name,
  gender
}

console.log(profile) // { name: '철수', gender: 'male' }

- 속성에 함수를 정의할 때 function 생략

const profile = {
  name(){ // function 생략 부분, 기존  name: function(){}
		    console.log("철수")
  }
}

console.log(profile.name())
   

6. 화살표 함수

화살표 함수 (Arrow Function)

• 기존에 쓰던 문법은 function 키워드를 써서 사용하고 있었지만 이걸 화살표를 이용해서 좀 더 간결하고 가독성 좋게 표현할 수 있다.

const num = function(a,b){
  return a + b
}
num(1,5) // 6  기존 문법 function 키워드를 쓰는 방법

const num01 = (a,b) => {
  return a + b
}

num01(1,5) // 6  화살표 함수를 사용한 함수

7. Promises

Promise

• 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다
• 원래는 전통적인 콜백 패턴을 사용했지만, 콜백 지옥으로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다.

const promiseTest = function(){
  return new Promise((resolver,reject) =>{
    // resolver(100)
    reject("error")
  })
}
console.log(promiseTest()) // error , resolver 실행시 값은 100

Promise 상태

• pending : 비동기 처리가 아직 수행되지 않은상태
  구현 : resolve 또는 rehect험수가 아직 호출되지 않은 상태

• fulfilled : 비동기 처리가 수행된 상태(성공)
  구현 : resolve 함수가 호출된 상태

• rejected : 비동기 처리가 수행된 상태(실패)
  구현 : reject 함수가 호출된 상태

• settled : 비동기 처리가 수행된 상태(성공 또는 실패)
  구현 : resolve 또는 reject 함수가 호출된 상태

  8. Classes

Class

• ES6에서 class라는 문법이 추가되었고, prototype 기반으로 클래스를 만드는 것보다 명료하게 클래스를 만들 수 있다.
• JavaScript에서 Class는 함수입니다. class키워드를 만나면 class 오브젝트를 생성
• 함수 선언과 달리 클래스 선언은 호이스팅이 일어나지 않기 때문에 클래스를 사용할때는 먼저 선언을 해야한다.

기존 class 구현

• 이전 클래스 개념이 없을때는 prototype을 이용해 구현했다.

function food(name){
  this.name = name;
}

food.prototype.say = function(){
  console.log(`맛있는 ${this.name}`)
}

var food = new food("음식")
food.say() // 맛있는 음식

ES6 class 구현

class food {
  constructor(name){
    this.name = name;
  }
  say(){
    console.log(`맛있는 ${this.name}`)
  }
}

const Food = new food("맛있는")
Food.say()

9. Modules

• Javacript의 중요한 새 기능
• import, export 텍스트를 이용해 내보내거나 불러올 수 있다.

export const member = ()=>{
  return "use Module"
}
   import {member} from "my module.js" // member라는 함수 사용
   import member from "my module.js" //export default를 사용하면 {}로 감싸주지 않아도 된다.

이것으로 마치며, 블로그를 쓰면서 하나하나 찾고 쓰다보니 이해가 많이되고, 자세하게 몰랐던 부분들을 좀 더 알 수 있는 시간이 된거 같아서 너무 기분이 좋네요 ㅎㅎ!!
머리로써는, 이해가 가지만 이게 설명하는건 되게 어렵네요.. 어떤 부분들을 써야하고, 어떤 부분들을 없애야하는지.. 좀 더 노력해서 제가 이해한것들을 쉽게 많이 써서 저한테도..보시는분들한테도 쉽게 알 수 있도록 하겠습니다!! 화이튕~!!