알아두어야 할 자바스크립트

---

- 이벤트 루프 : 이벤트 발생 시 호출할 콜백 함수들을 관리하고 실행순서를 결정한다.

                        노드가 종료 될 때까지 이벤트 처리를 위한 작업을 반복하므로 루프(loop)라고 부른다.

- 백그라운드 : setTimeout같은 타이머나 이벤트 리스너들이 대기하는 곳. 여러 작업이 동시에 실행될 수 있다.

- 태스크 큐 : 이벤트 발생후 백그라운드에서는 태스크 큐로 타이머나 이벤트 리스너의 콜백 함수를 보낸다.

                     정해진 순서대로 콜백들이 줄을 서있으므로 콜백 큐라고도 불리나 특정 경우에는 순서가 바뀌기도 한다.

 

---

var, const, let

 

요즘엔 var 잘 안쓰고 let이나 const 많이 쓴다고함

var는 블록 스코프를 무시한다는 특징이 있음

ex)

if (true) {

 var x = 3;

}

conlose.log(x); //3

 

if (true) {

 const y = 3;

}

console.log(y); // Uncaught ReferenceError: y is not defined

 

const 는 = 을 한번만 쓸 수 있다.

const a = 3;

a = '5'; // 에러

const b = { name : 'value' };

b.name = 'changevalue';

 

const c;

c = 'xxxx'; // error

 

값을 바꾸고 싶으면

let c = 5;

c = 3;

c = 10;

---

템플릿 문자열, 객체 리터럴

 

var won = 1000;

var result = '이 과자는' + won + '원입니다.';

// 이 과자는 1000원 입니다.

 

const result = '이 과자는 ${won}원입니다'; // 템플릿 문자열

---

화살표 함수

 

function add1(x, y) {

 return x + y;

}

 

const add2 = (x, y) => {

 return x + y;

}

 

const add3 = (x, y) => x + y;

 

const add4 = (x, y) => (x + y);

 

function not1(x) {

 return !x;

}

 

const not2 = x => !x;

 

const obj = (x, y) => ({x, y}); // 객체를 return 할때는 소괄호가 필수

 

* 기존 function 이 안없어진 이유는? this 때문

강사왈 ) this를 써야하는 상황이면 function을 쓰고, this가 없으면 화살표를 쓰는 것을 추천한다고 함.

 

button.addEventListener('click', function() {

 console.log(this.textContent); // 버튼에 적혀있는 텍스트 값을 가져옴

});

 

this;

button.addEventListener('click', (e) => {

 console.log(this.textContent); // 동작 안함, 바깥에 있는 this로 인식

});

 

button.addEventListener('click', (e) => {

 console.log(e.target.textContent); // function 의 this처럼 사용하려면 e.target.* 으로 사용해야함

});

---