JavaScript ES6 문법

ES6란?

JavaScript의 버전 중 하나로 새로운 문법과 기능을 도입하여 2015년에 발표 되었습니다.
대규모 문법적 향상 및 변경이 있어서 항상 언급이 됩니다.

변수

2015년 이전에는 변수를 선언하기 위해서는 var를 사용했습니다.
ES6 이후에는 let과 const가 추가 되었습니다.

let(변수)

let a = "value1"
console.log(a) // value1
let a = "value2"
console.log(a) // value2 let은 재할당이 가능합니다
a = "value3" //SyntaxError: Identifier 'value' has already been declared 라는 에러가 뜨면서 재선언은 불가합니다.

const(상수)

const a = "value1"
console.log(a) // value1
const a = "value2"
console.log(a) // TypeError: Assignment to constant variable.
a = "value3" // SyntaxError: Identifier 'value' has already been declared
// const는 재할당, 재선언이 불가능합니다

arrow 함수

function add(){

}//ES6 이전 함수 형태

let add =  function(){

}

let add = (a)=>{
  return b
}//ES6 이후 함수 형태

let add = (a) => b //return문이 한 개일 때 중괄호 생략이 가능합니다.

삼항연산자

console.log(condition ? true인경우 : false인경우)
console.log(2 < 3 ? "맞습니다" : "아닙니다")//맞습니다.

구조분해할당

배열 분해

let [value1, value2]=[1,"two"]
console.log(value1) // 1
console.log(value2) // two

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

let arr = ["value1","value2","value3"]
let [a, b, c, d=4] = arr; //d 값을 넣어 줄 수 있음
console.log(a) //value1
console.log(b) //value2
console.log(c) //value3
console.log(d) // 4

let arr = ["value1","value2","value3","value4"]
let [a, b, c, d=4] = arr;

console.log(a) //value1
console.log(b) //value2
console.log(c) //value3
console.log(d) //value4

객체 분해

let {name, age}={
    name:"민석",
    age : 26
}
console.log(name) //민석
console.log(age) //26

//새로운 이름으로 할당

let user = {
     name:"민석",
     age : 26
 }
 let {
     name : newName,
     age : newAge
 }= user

console.log(name) //민석
console.log(newAge) //26


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

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

 let user = {
     name:"민석",
     age : 26,
     birthday : "yesterday"
 }

 let {name, age, birthday="today"} = user

 console.log(name)
 console.log(age)
 console.log(birthday) //yesterday

단축 속성명 : property shortcut

const name = "민석"
const age = "26"

const obj = {
    Newname : name,
    Newage : age
}
console.log(obj)

const month = "1월"
const day = "2일"

const date = {month, day}
console.log(date) //이름이 같다면 생략 가능

전개 구문 (spread operator)

배열

//destructuring과 함꼐 가장 만힝 사용되는 es6 문법 중 하나
let arr =[1, 2, 3]
let newarr = [...arr, 4]
console.log(arr) //[1,2,3]
console.log(newarr)// [1,2,3,4]

객체

let user = {
    name : "이름",
    age : 26
}
let newuser = {...user}
console.log(user); //{ name: '이름', age: 26 }
console.log(newuser);//{ name: '이름', age: 26 } 같은 걸 볼 수 있음

나머지 매게변수 (rest parameter)

function exampleFunc(a, b, c, ...args){
    console.log(a,b,c) // 1 2 3
    console.log(args)// 4 5 6 7 8 9
}
exampleFunc(1,2,3,4,5,6,7,8,9)

템플릿 리터널 (Template Literal)

const testval = "안녕하세요"
console.log(`Hello World ${testval}`);
console.log(`
Hello 
my name is Javascript
nice to meet you`
)

---

회고

기본 문법을 숙달하는데 시간이 많이 소요되고 있다.. 시간을 잘 분배해서 잘 숙달할 수 있도록 노력하겠다