WIL - ES6 문법

Jaa-van·2023년 4월 10일
0
post-thumbnail

기존과 다른 문법

@let, const

var 는 선언을 다시 할 수 있지만
let 과 const 는 선언을 다시 하면 오류가 난다

@arrow function

let function = x => 1; 과 같이 괄호를 생략할 수 있다
기존 function 구조에 대해 충분히 익숙해진 이후에 사용할 것

@삼항연산자

세 개의 피연산자를 받는 유일한 연산자이다
조건문 ? 1.표현식 : 2.표현식 과 같이 문법으로 이루어지는데

조건문이 참(truthy) 일경우 1번 표현식이,
거짓 (falsy) 일 경우 2번 표현식이 배치된다

%truthy, falsy => true, false 와 같거나 그것으로 치환될 수 있는 값
ex) falsy => null, NaN, 0, ""(비어있는 문자열), undefined

if else 문을 간략하게 표현할 수 있다

@구조분해할당

배열의 경우

let [value1, value2] = [1, "new"]

와 같이 value1 에 1을, value2 에 new 를 할당해준다

let arr  = ['value1', 'value2', 'value3']
let [ a, b, c] = arr

=> a에 'value1'을, b에 'value2'를, c에 'value3'을 할당한다

let arr  = ['value1', 'value2', 'value3']
let [ a, b, c, d] = arr

위와 같이 배열의 갯수가 달라 할당을 못 받을 경우 undefined 가 할당된다

let [ a, b, c, d = default value ] = arr

위와 같이 undefined 를 대신할 기본값을 지정해 줄 수 있다

~js 에서 비어있다는 것을 표현해주는 두가지 undefined 와 null 이 있는데~
~null 값은 명시적으로 비어있다는 것을 표현해줄 때 사용된다~

객체의 경우

let user = {
    name: 'abe'
    age: 30
}

let {name, age} = user

console.log(name) // 'abe'
console.log(age) // 30

배열과 같이 = 를 통해 초기값을 잡아줄 수 있고 존재하지 않는 key 값에 할당을 하면 undefined 가 할당된다

let {name : newName, age: newAge} = user
console.log(newName) // abc
console.log(newAge) // 30

위와 같은 구조분해를 통해서 newName 이라는 다른 이름으로 할당할 수 있게 된다

@property shorthand, 단축속성명

const name = 'abc'
const newAge = 30

const obj = {
    name = name,
    age = newAge
}

위와 같이 key 와 value 의 이름이 같을 경우 생략해서
const obj = {name. age: newAge} 와 같이 쓸 수 있다

@spread operator 스프레드 (...)

배열에서

let arr = [1, 2, 3]
console.log(...arr) // 1 2 3

위와 같이 배열이 풀려서 전개된다

let newArr = [...arr, 4]
console.log(newArr) // [1, 2, 3, 4]

와 같이 사용할 수 있다

객체에서

let user = {
    name : 'abc',
    age  : 30
}

let user2 = {...user}

이런 식으로 객체를 분해해서 다른 key:value 를 할당할 수 있다

함수에서

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

...args 를 배열의 형태로 반환한다

@template literal

console.log( 백틱 hello world 백틱 )
백틱은 기본적으로 ' 와 같은 기능을 하는데 ~멀티 라인을 지원한다~
console.log( hello world my name is !!!!)
와 같은 식으로 활용할 수 있다

0개의 댓글

관련 채용 정보