ES6 자바스크립트 최신 문법 정리

객체 초기화

원래 객체를 만들 때 사용했던 방법은

let name = "jin"
let age = 17

let person = {
    name : 'jin',
    age : 17
}

이렇게 사용이 되었다. 하지만 개발자들은 같은 것을 반복하는 걸 안좋아한다!

그래서 단순하게 만들 수 있는 방법이 바로 객체 초기화 방법이라는 것이당

"변수 이름이 키값이였으면 좋겠다"

라고 생각할 때 사용할 수 있는 방법은

let name = "jin"
let age = 17

let person = {name, age};

이렇게 작성만 해줘도, 알아서 변수에 있는 값이 키의 값으로 들어가게된다.

객체 분해

만들어놓은 객체 안에 있는 값을 다른 변수에 저장하고 싶을 때 사용할 수 있는 방법이다.

let person = {
    name : 'jin',
    age : 24
}

let name = person.name
let age = person.age

이렇게 작성하는게 보편적이다.

하지만 더욱더 쉽게 만들 수 있을까? 만들  수 있다!

let person = {
    name : 'jin',
    age : 24
}

let {name, age} = person

하지만 만들고 싶은 변수명이 객체 안에 있는 키값과 이름이 다르다면, 예전 문법을 사용해야한다 (ㅠㅠ)

키값과 같은 이름의 변수명을 지정해줘야한다.

 

배열 분해

원래 배열을 분해해서 변수에 저장하는 방법은

let array = [1,2,3]

let a = array[0]
let b = array[1]
let c = array[2]

이랬다.. 참 귀찮자나..?

이걸 어떻게 간단하게 만들까?!

let array = [1,2,3]

let [a,b,c] = array

바로 요로코롬 간단하게 만들 수 있다. 객체와 아주 유사하다!!!!

근데 나는 변수 a만 만들고싶엉... 라고 하신다면

...변수명

을 사용하면 된다!

어떻게 사용하냐구?

let array = [1,2,3]

let [a,...rest] = array

바로 요렇게 사용해준다

a를 뺀 나머지를 rest 라는 변수에 넣어주는 방식이다. 실제로 console.log 에 rest를 찍어본다면 [2,3] 이렇게 나오는 것을 확인할 수 있다!

이걸 객체 에도 사용할 수 있지 않을까..? 사용가능하다!!!!!

let person = {
    name : 'jin',
    age : 24,
    cute : true
}

let {name,...personInfo} = person

너무 쉽쟈냐 ??!!

이 ...변수명을 사용하는 다른 방법도 있다!!

let a = [1,2]
let b = [3,4]
let c = [5,6]

이렇게 나뉘어진 배열들을 다 한번에 나오게 하고 싶다!!! 할 때

let a = [1,2]
let b = [3,4]
let c = [5,6]

let result = a.concat(b,c)

이런식으로 concat() 이라는 함수를 사용했쟈냐?? 

하지만 이 방법보다 더 직관적으로 만들 수 있다네?? (...변수명 너 뭐니?)

let a = [1,2]
let b = [3,4]
let c = [5,6]

let result = [...a,...b,...c]

바로 이렇게 갖고 오는것이다!!!

갖고 오고 싶은 배열이 들어가있는 변수명을 ... 을 붙혀 불러와주는 것이다

이렇게 하면 위에 코드와 결과가 같게 나오는 것을 확인할 수 있땅

 

화살표 함수

우리가 원래 함수를 만들 때는

function foo () {
    console.log('foo')
}

이렇게 만들었쟈냐...

매번 function 치기 넘 귀찮자나......ㅠㅠ

그래서!! function 안치고 사용할 수 있는 화살표 함수는 어떻게 생겼냐면!

let foo = () => {
    console.log('foo')
}

이렇게 바뀌었당.. 변수 안에 함수를 넣는 방식인데, 저기 (매개변수) 옆에 있는 화살표가 function을 대체해준다고 합니더.

화살표 함수는 함수가 한줄이라면 return 생략 가능하고! return만 있다면 {} 생략 가능하댜규..

function foo(){
    return console.log("foo")
}

foo()



let foo1 = () => console.log("foo")

foo1()

위에 있는 게 우리가 기존에 사용했던 함수

밑에 있는 게 화살표 함수를 사용했지만, 코드가 한줄이라서 {}을 생략한 모습!

화살표 함수 넘 편리하구려..

but 화살표 함수는 일반함수를 대체할 수 없다!!

왜?

화살표 함수에는 일반 함수에는 없는 딱 한 흠이 있어요..

그것은 바로 "this" 입니다 밑에서 더 자세히 알아보도록 합시댜

 

this

얘는 또 도대체 뭘까?

자바스크립트에서는 모든 일반함수가 실행될 때마다 함수 내부에 this 라는 객체가 추가가 됩니당!!!

this는 이 함수를 부른 객체에요

예시를 보면서 이해를 해볼까요?? (글로 보면 어려운법)

let age = 20

let person = {
    name : 'jin',
    age : 24,
    getInfo:function(){
        console.log(age)
    }
}

person.getInfo()

이걸 실행하면 age의 값은 무엇이 나올까?

바로 전역변수의 값인 20이 나오게 됩니다.

엥?! 나는 person 안에 있는 age 값을 받고싶은데?!

할 때 사용하는게 "this" 이라는 것이지요.

let age = 20

let person = {
    name : 'jin',
    age : 24,
    getInfo:function(){
        console.log(this.age)
    }
}

person.getInfo()

요로코롬 코드를 작성해준 뒤, 호출하면 person이라는 객체 안에 있는 age 의 값이 나오게 됩니다!

왜냐? this는 이 함수를 부른 객체를 나타내니까!!!! 그니까 여기서 나온 this = person 이라고 볼 수 있찌

but 근데 왜 화살표 함수에는 this 못 써..??

한번 못쓰는지 해보쟈규

let age = 20

let person = {
    name : 'jin',
    age : 24,
    getInfo:()=>{
        console.log(this.age)
    }
}

person.getInfo()

한번 실행해보쟈?

.. undefined

화살표 함수에는 this가 없다!! 일반 함수는 알아서 this 를 생성해주지만 , 화살표 함수는 생성해주지 않하.......

화살표 함수에서의 this는 함수를 포함하고 있는 변수가 포함된 곳을 나타내조.. 그 말은 즉슨 window를 객체로 삼는다는것..... -ㅅ-;

이런걸 전문용어로 렉시컬 스코프 (lexical scope) 라고 합니다!!!

내가 포함된 그곳의 this => 렉시컬 스코프