Language/Javascript (19) 썸네일형 리스트형 [Javascript] 호출 스택과 이벤트 루프 자바스크립트는 이벤트 기반 방식으로 동작한다. 이벤트 기반 시스템에서는 이벤트 리스너에 콜백 함수를 등록한다. 예를 들어 버튼을 누르면 경고 창을 띄우도록 설정할 때, 클릭 이벤트 리스너에 경고 창을 띄우는 콜백 함수를 등록한다. 이벤트 루프 - 이벤트 발생 시 호출할 콜백 함수들을 관리한다. 호출된 콜백 함수의 실행 순서를 결정하고, 노드가 종료될 때까지 이벤트 처리를 위한 작업을 반복한다. 태스크 큐(콜백 큐) - 콜백 함수들이 기다리는 공간. 이벤트 루프가 정한 순서대로 콜백 함수들이 줄 서있는 공간. 백그라운드 - 타이머, I/O 작업 콜백, 이벤트 리스너들이 동작하는 곳 function first(){ second(); console.log('첫 번째'); } function second(){ .. [Javascript] async, await async, await를 사용하면 Promise의 then 함수를 체이닝 형식으로 호출하는 것보다 가독성이 좋아진다. async 함수 앞에 async를 붙이면 항상 Promise를 반환한다. async function getName() { return "Mike"; } console.log(getName()); // Promise {: "Mike"} getName().then((name) => { console.log(name); // "Mike" }); 리턴값이 프로미스이면 리턴한 프로미스를 그대로 사용한다. async function getName() { return Promise.resolve('Tom'); } getName().then((name) => { console.log(name); // .. [Javascript] 프로미스(Promise) 상점에 가서 물건을 주문하는데 그 물건이 나올 때까지 시간이 걸린다고 가정해보자. 언제 완료되는지 알 수 없고, 물건을 만들다가 실패하는 경우도 있다. 이럴 때 소비자는 10초에 한 번씩 "다 됐나요?"라고 물어본다. 판매자는 "아니요" 또는 "다 됐습니다"라고 대답한다. 실패했다고 말하는 경우도 있다. 그러면 물건을 다시 주문해야한다. 이럴 때 상점에 주문을 하고 상품이 준비되었거나 실패되었으면 알려달라고 하면서 전화번호를 주고 나오는 게 낫다. 상품이 준비되는 동안 다른 작업도 할 수 있다. 상점은 이 번호를 기억했다가 작업이 완료되거나 실패하면 소비자에게 알려준다. 이와 같은 상황에서 사용할 수 있는 것이 Promise이다. 프로미스는 다음과 같이 사용한다. const pr = new Promise.. [Javascript] 클래스(Class) 지금까지 비슷한 형태의 객체를 생성하기 위해 생성자 함수를 사용했었다. const User = function(name, age){ this.name = name; this.age = age; this.showName = function(){ console.log(this.name); }; }; const mike = new User("Mike", 30); 클래스로도 비슷한 형태의 객체를 만들 수 있다. 클래스는 ES6에 추가된 스펙이다. class User2 { constructor(name, age){ this.name = name; this.age = age; } showName(){ console.log(this.name); } } const tom = new User2("Tom", 10); cl.. [Javascript] 상속, 프로토타입(Prototype) const user = { name : 'Mike' } user.name; // "Mike" user.hasOwnProperty('name'); // true user.hasOwnProperty('age'); // false hasOwnProperty는 자신이 프로퍼티를 가지고 있는지 확인하는 함수이다. user 객체에 name이라는 프로퍼티가 있으므로 true가 나오고, age라는 프로퍼티는 없으므로 false가 나온다. hasOwnProperty는 만든 적이 없는데 어디에 있는 것일까? __proto__라는 객체에 들어있다. 객체에서 프로퍼티를 찾으려고 하는데 없으면 여기에서 찾는다. const user = { name : 'Mike' hasOwnProperty : function(){ console.. [Javascript] call, apply, bind 함수 호출 방식과 관계없이 this를 지정할 수 있는 call, apply, bind 메서드에 대해 알아보자. call call 메서드는 모든 함수에서 사용할 수 있으며, this를 특정값으로 지정할 수 있다. const mike = { name : "Mike", }; const tom = { name : "Tom", }; function showThisName(){ console.log(this.name); } showThisName(); // ? showThisName 메서드를 호출했을 때 아무것도 뜨지 않는다. 여기에서 this는 window를 가리킨다. window.name이 빈 문자열이기 때문에 아무것도 뜨지 않는 것이다. showThisName.call(mike); // Mike showThi.. [Javascript] setTimeout / setInterval setTimeout : 일정 시간이 지난 후 함수를 실행 function fn(){ console.log(3) } setTimeout(fn, 3000); setTimeout은 두 개의 매개변수를 갖는다. 첫 번째는 일정 시간이 지난 뒤 실행하는 함수이고, 두 번째는 시간이다. 3000은 3초를 의미한다. setTimeout(function(){ console.log(3) }, 3000); 함수를 매개변수 안에 직접 쓰는 것도 가능하다. const tId = function showName(name){ console.log(name); } setTimeout(showName, 3000, 'Mike'); clearTimeout(tId); 함수에 인수가 필요하다면 시간 뒤에 적어준다. 'Mike'는 name에.. [Javascript] 어휘적 환경(Lexical Environment), 클로저(Closure) 어휘적 환경(Lexical Environment) let one; one = 1; function addOne(num){ console.log(one + num); } addOne(5); 코드가 위에서부터 아래로 어떻게 동작하는지 알아보자. Lexical 환경 one : 초기화X 사용 불가 addOne : function 사용 가능 프로그램이 실행되면 스크립트 내에서 선언한 변수들이 lexical 환경에 올라간다. let으로 선언한 변수는 초기화 되어 있지 않기 때문에 사용할 수 없다. 반면 함수 선언문은 바로 초기화되어 사용할 수 있다. (함수 표현식은 불가능) let one; Lexical 환경 one : undefined 사용 가능 addOne : function 아직 할당은 안 되어 있기 때문에 .. 이전 1 2 3 다음
