[JavaScript] 헷갈렸던 개념 간단 정리

 

화살표 함수의 this

화살표 함수는 this 를 가지고 있지 않다. 화살표 함수가 정의 됐을때 자신의 상위 스코프의 this 를 가리킨다. 그에 따라 의도와 다르게 동작할 수 있으므로 다음의 경우 화살표 함수를 사용하지 않아야 한다.

- 메소드

- 생성자 함수

- addEventListener의 콜백 함수

 

자바스크립트 class

ES6에서 추가된 문법. 자바스크립트는 클래스 없이도 프로토타입의 chain, closure 등으로 객체지향 프로그래밍이 가능한 언어이나 객체지향 프로그래밍 언어에 익숙한 개발자들이 좀더 쉽게 이해하고 사용할 수 있도록 일종의 syntactic sugar로서 class 문법이 사용된다. 즉, 여전히 자바스크립트 내부적으로는 프로토타입 기반으로 동작한다.

 

for반복문 for ... of vs for ... in

for element of array

배열 순회시 사용

const breeds = ['dutch', 'harlequin','holland lop']

for(breed of breeds){
	console.log(`This one is ${rabbit} rabbit`) 
    // This one is dutch rabbit
    // This one is harelquin rabbit
    // This one is holland rabbit
}

 

for property in object

객체의 각 프로퍼티 순회시 사용

const user = {
	name: 'Joe',
    age: 27,
    grade: 'gold'
}

let info = [];

for(property in user){
	info.push({[property]: user[property]})
}

console.log(info) // [{name: 'Joe'},{age: 27},{grade: 'gold'}]

 

 

 

 

---

참고자료

https://poiemaweb.com/es6-arrow-function

https://poiemaweb.com/es6-class