TIL (Today I Learned) 23.10.16

각종 es6 문법 소개

ECMAScript 6 (ES6)는 JavaScript의 버전 중 하나로, 2015년에 발표되었다. ES6는 이전 버전인 ES5에서 새로운 문법과 기능을 도입하여 JavaScript 개발자들이 보다 쉽고 효율적으로 코드를 작성할 수 있도록 개선함

1.let,const

// ES6

// (1) let,const

// 2015년도 이전에는 Var만 사용함

//es6 => let(변수),const(상수)

//const 재할당 불가

//let 재할당 가능

//var 선언도 다시 가능함 let.const는 불가

// (2) arrow function {활용 여지가 많지만 기본 function키워드가 익숙해진후 사용 추천}

function add() {

}

var add = function () {

}

var add = () => {

    return 1;

}

//리턴 문이 한줄인 경우 중괄호{}도 생략가능

var add = () => 1;

//매개 변수가 있다면 소괄호() 까지줄일수도 있음

var add = x => 1;

// (3) 삼항 연산자

// condition ? true인경우 : false인경우

console.log(true ? `참` : `거짓`);

// conditio이 트루면 앞 아니면 뒤

console.log(1 !==1 ? `참` : `거짓`);

2,구조분해 할당

// 구조분해 할당 : destructuring(de + structur + ing)

// 구조 분해 할당이란? (구조를 찢어버려 할당해버린다 는 말)

// 배열`[]`이나 객체`{}`의 속성을 분해해서 그 값을

// 변수에 담을 수 있게 해주는 문법

// 1 .배열의 경우

let [valuel1,valuel2,] = [1,"new"]

console.log("1",valuel1)

console.log("2",valuel2)

//각각의 자리에 맞는 배열을 가짐

// 2. 객체인 경우

//구조 분해 할당

let { name, age } = {

    name : "npc",

    age : 30

};

console.log("name =>", name)

console.log("age =>", age)

결과값

PS C:\Users\woghk\Desktop\WEEK_2> node 02.js
name => npc
age => 30

name과 age가 객체 형태가아니라 각각 string ,number형식으로 나오는 걸 볼수있다 

 

//새로운 이름으로 할당

let user = {

    name : '폼포코',

    age : 26

};

let {name : newname, age : newage} = user;

 console.log("new name =>",newname);

 console.log("newage =>",newage);

결과값

PS C:\Users\woghk\Desktop\WEEK_2> node 02.js
new name => 폼포코
newage => 26

다시한번 새로운 이름으로 할당하여  new name과 newage  에 user의 객체값이 들어가고있다 

 

3.단축 속성명 (key - value 가 똑같으면 생략할수있다

//단축 속성명 : property shorthand

//이걸 모르면 다른개발자 코드 해석이 힘들다 중요!

const name = "npc";

const age = "30";

//key - value

const obj = {
    name : name,
    age: newage
}

const obj = { name , age};

const obj1 = { name :name , age : age};

이상태에서  name : name,끼리는 이름이 같으므로 생략도 가능하다 

age: newage 도 newage가아닌 age였다면

 

const obj = { name , age}; 이런식으로도 생략이 가능하기때문에 

객체임에도 불구하고 마치 배열과 같은 모습을 하기에 "단축 속성명"을 사용했다는 사실을 모르면 매우 헷갈린다

 

 4.전개 구문 = spread operator  {...}  점3개

// 전개 구문 = spread operator

//destructuring과 함께 가장 많이 사용되는 es 문법 중 하나!

let arr = [1,2,3];

console.log(arr);

console.log(...arr);

결과값 
PS C:\Users\woghk\Desktop\WEEK_2> node 03.js      
[ 1, 2, 3 ]
1 2 3

안에있는 요소들이 바로 전개되는 걸 알수있다 보통 이구조를 벗고 새로운 구조로만들때 사용한다 

let arr = [1,2,3];

let newarr = [...arr,4];

console.log(arr);

console.log(newarr);

결과값

PS C:\Users\woghk\Desktop\WEEK_2> node 03.js
[ 1, 2, 3 ]
[ 1, 2, 3, 4 ]    newarr의 출력값이 이렇게 나오게된다 따로 수정없이 편하게 추가가능

// 배열 뿐만아니라 객체도 적용가능

let user = {

     name : `npc`,

     age : 30

}

let user2 = {...user};

console.log(user);

console.log(user2);

*핵심은 풀어주는것 (spread) 활용방법은 다양하다 

5.//나머지 매개변수(rest parameter)

function examplefunc (a,b,c) {

    console.log(a,b,c)

}

examplefunc(1,2,3);

결과값

PS C:\Users\woghk\Desktop\WEEK_2> node 03.js
1 2 3 이렇게 나오는데 여기서 arguments {args} 추가후 

function examplefunc (a,b,c,...args) {

    console.log(a,b,c)

    console.log(...args)

}

examplefunc(1,2,3,4,5,6,7);

결과값

PS C:\Users\woghk\Desktop\WEEK_2> node 03.js
1 2 3
4 5 6 7     

이 나오는 걸볼수있는데  (...args) 에   4567이 들어간것을 알수있다

스프레드 문법을 빼는 경우에는 

PS C:\Users\woghk\Desktop\WEEK_2> node 03.js 
1 2 3
[ 4, 5, 6, 7 ]  이렇게 배열형태로 나오게된다

 

6.탬플릿 리터럴 (template Literal)

 

백틱 (  ` ) 을 활용하여 함수(변수,연산)를 안에 집어넣을수도 있다 사용방법은 (  ${}  )

그리고 백틱의 또 하나의 장점 

멀티라인이 지원가능해 개발자에게 매우 편리한 기능!!

 

---

와.... 알면알수록 뭔가가 너무 많아져서 부담스럽지만 차차 손에 익는 느낌이 어느정도 들기시작하는거같네요

이제 자바스크립트 하나 배우는데 참... 아직 갈길이 멀었습니다 그래도 어느정도 문법 구조가 눈에 들어와 

다행입니다