FE BE 개발 메모장/Javascript

ES-6 문법 정리

1. 변수(variable)

 

const는 블록 범위이며 값이 지정되면 재선언 되거나 바꿀 수 없는 상수이다.(읽기전용)

const variable = 'immutable(Constants), Block Scope'

variable = "crytek"// Error

 

let은 블록 범위이며 재선언 및 재할당이 가능하다.

let variable = 'mutable, Block Scope'

variable = 'Infinity Word' //'Infinity Word'

 

2. 지역 스코프 변수와 함수

 

for(let idx of arr){
  console.log(idx)
}

for(let idx = 0; i < arr.length; i++){
  let x = arr[idx]
}

x = 5;
console.log(x) // 'x' not is defined 

 

 

{
  function func1() {return 1} 
  func1()     //1
   {
    function func2() {return 2;}
    func2()   //2
   }
 func1()      //1
}

console.log(func1()) // 1
consoel.log(func2()) // 2

 

3. 화살표 함수(Arrow Function)

 

함수를 간결하게 표현이 가능하다. Array function은 this를 생성하지 않는다.

const sum = (a, b) => a + b;

const send = () => //statement

let odd = []

arr.forEach(el => {
  if(el % 2 !== 0) 
   bi.push(el)
})

 

4. 전개 연산자

rest Parameter

let func = (a, b, ...f) => `${a * b}은(는) ${f}의 합보다 작다`

func(3,4,1,2,3,4,5)

 

Spread Operator

let nums = [1,2,3,4,5]
let other = [1, 2, ...nums] // [1,2,1,2,3,4,5]

let func = (a, b, ...f) => `${a * b}은(는) ${f[0]}~${f[4]}까지의 합보다 작다`

func(3,4,...nums)  // "12은(는) 1~5까지의 합보다 작다"

let str = "오큘러스 리프트2"
let dstStr = [...str] // ["오", "큘", "러", "스", " ", "리", "프", "트", "2"]

 

5. 템플릿 리터럴

 

let hwinfo = { cpu: 'R7-3700X', ram: 32GB, vga: RX-6800 }

let sendHwInfo = `내 컴퓨터의 사양은 다음과같다 CPU는 ${hwinfo.cpu}를 사용하며,
                  메모리는 두개를 장착해 ${hwinfo.ram} 이고, 
                  그래픽카드는 ${hwinfo.vga}를 사용하고있다.`

 

 

6. 구조 분해 할당 (Destructuring)

const [] = res.

 

 

7. 모듈(Modules)

 

Export, Import 를 이용하여 함수(function)이나 변수(variables)들을 다른 위치에서 사용할 수 있다.

index.js
=============================================================
export let times = {
                     name: 'Modern Times',
                     director: 'Charlie Chaplin',
                   }
=============================================================

 

app.js
=============================================================
import { movies } from "./index.js"

console.log(movies)
=============================================================

7. Class

 

class Area {
  constructor (a, b, c){
   	this.a = a 
    this.b = b
    this.c = c
   }
   area(a, b, c){
	return `this Area is `${a}${b}${c}`

   }

 

상속

class ATC extends Area{
  constructor (a, b, c, feet, mach) {
    super(a, b, c)
    this.feet = feet
    this.mach = mach
  }
}

class JTAC extends Area{
  constructor (a, b, c, mach) {
    super(a, b, c)
    this.mach = mach
  }
}

 

8. Promise

비동기(Asynchronously) 프로세싱을 위해 사용한다. 가독성이 좋은 코드를 작성이 가능하고, 콜백의 단점을 완화한다.

(예, Callback hell)

 

대기중(pending)

이행(fulfilled)

거부(rejected)

const protect = new Promise((resolve, reject) => {
   if(resolve){
   
   }
   
   if(reject){
   
   }
})

'FE BE 개발 메모장 > Javascript' 카테고리의 다른 글

var, let, const 차이점과 TDZ(작성중)  (0) 2021.05.05
Date 생성자  (0) 2021.03.17
구조 분해 할당  (0) 2021.02.08
Promise 메소드들...  (0) 2021.02.04
JSON에 대하여  (0) 2021.02.03