Languages (11) 썸네일형 리스트형 this this란? 함수가 어떻게 호출되는지에 따라 동적으로 결정되는 녀석(?)이다. this의 목적 작성된 코드를 여러 목적으로 재사용하기 위해 존재 this의 특징 전역 및 함수 바디에서 사용 가능하다. class 안에서 사용하는 this는 생성자 함수에서 사용하는 this와 동일하다. 전역에서의 this 브라우저 환경에서 this를 전역에서 사용하면 이 this는 전역 객체인 window객체를 가리킨다. 그래서 전역에서 const, let, var 없이 valueA라는 변수를 사용할 경우 window.valueA와 같다. 일반 함수에서의 this this를 사용하는 일반 함수를 호출하면 this는 전역 객체인 window객체를 가리킨다. 단, 함수 내에서 'use strict'키워드를 사용하면 this는 .. promise 갖고 놀기 promise를 응용하여 로직을 하나 구현해보고자 한다!일단 원하는 로직은 다음과 같다.a가 콘솔에 먼저 찍히고 일정 시간 뒤에 b가 찍히는 로직을 만들고 싶은 상황해당 로직을 구현하려면 다음과 같이 구현하면 된다.const delay = (time) => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(); },time * 1000); });}const run = async () => { console.log('a'); try { await delay(3); } catch (err) { console.log('에러 발생'); .. 가비지컬렉션 타 저수준 언어에서는 메모리 관리를 따로 해야 하지만 자바스크립트와 같은 고수준 언어는 메모리 관리를 자동으로 수행해준다. 가비지 컬렉션 객체, 함수 등은 메모리를 차지하는데 더 이상 쓸모 없는 것들은 메모리에서 삭제 처리하는 것을 의미하며 그 주체를 가비지 컬렉터라고 한다. 가비지 컬렉션의 알고리즘 자바스크립트의 가비지 컬렉션은 **도달가능성(reachability)**이라는 개념으로 메모리 관리 수행 도달 가능성이 있는 값이란 접근 및 사용이 가능한 값을 의미한다. 예를 들어 A라는 메모리가 있는데 A를 통해 B라는 메모리에 접근할 수있다는 것은 B는 A에 참조된다는 것을 의미하며 B는 접근 및 사용이 가능하는 것이다. 이러한 것들은 메모리에서 삭제되지 않는다. 근본적으로 도달가능성이 있는 값 1. .. 이벤트 루프(event loop) 이벤트 루프란 결론부터 말하자면 호출 스택이 비워질 때마다 콜백 큐에서 호출할 콜백함수가 있는지 반복하여 확인 후 있으면 콜백함수를 호출하여 실행하는 역할을 하는 것이다. 이벤트 루프의 정의를 들었을 때 이해가 안 간다면 아마 호출 스택, 콜백 큐 등을 구동하는 브라우저 환경에 대한 이해가 확실하지 않아 그럴 수 있다. 일단 자바스크립트 엔진을 구동하는 브라우저 환경을 그림으로 나타내면 다음과 같다. 구성요소는 다음과 같다. heap : 메모리 할당이 이루어지는 곳 호출 스택(call stack) : 자바스크립트는 코드가 실행되면 순서대로 실행될 코드들이 쌓여 처리되는 곳 web APIs : 실행시키고자 하는 코드 중에 xmlHttpRequest(), setTimeout(), setInterval() 등.. 비동기 2편(async, await) 비동기 2편에서 설명할 async, await은 promise보다 비교적 코드를 보기 좋은 형태로 작성할 수 있으며 비동기의 단점을 해결할 수 있다. 우선 async와 await은 독립적인 기능이 아니라 같이 사용한다. 그럼 다음 코드를 살펴보자! const err = false const PROMISE = (count) => { return new Promise((resolve, reject) => { setTimeout(() => { if(err) reject('에러 발생'); resolve(`실행${count}`); },200) }) } async function install(){ const start1 = await PROMISE(1) const start2 = await PROMISE(2) c.. 비동기 1편(콜백함수, promise) 비동기 방식이란 논 블로킹 형태로 동작하는 방식이라는 것을 의미한다. 그럼 논 블로킹 방식이란 무엇인가? 이 논 블로킹 방식은 콜백함수를 반환하는 코드 방식을 의미한다. 이에 대해 구체적으로 설명해보고자 한다. 비동기 방식은 메인 쓰레드가 있으며 실제 코드를 실행하는 역할을 한다. 잠깐 용어를 짚고 넘어가자! 프로세스란 단순히 실행중인 프로그램을 의미하며 쓰레드는 이 프로세스 내에서 실제로 작업을 수행하는 주체이다. 다시 비동기 방식의 얘기로 돌아오자! 이 메인 쓰레드가 실제 코드를 실행할 때 실행시간이 좀 오래 걸린다고 판단하면 다른 쓰레드에게 '방금 내가 맡은 코드가 실행시간이 좀 오래 걸릴 거 같은데 너가 대신 실행해줘!'라고 하며 작업을 넘기고 다른 코드를 실행시키는 작업을 한다. 그러면 메인 쓰.. 클로저(closure) 클로저란 특정 함수가 선언될 때 해당 함수의 렉시컬 환경을 기억하는 함수를 의미한다. 여기서 만약 렉시컬 환경을 모른다면 이전의 '실행 컨텍스트(Execution context)와 스코프체인(scope chain)' 페이지를 읽고 관련 용어를 이해한 후에 클로저 게시물을 읽기를 권장한다. 일단 코드를 통해 클로저를 설명하고자 한다. function myAge(){ let age = 10; return { subtract : function(){age--;}, lookup : function(){return age;} }; }; const addAge1 = myAge() const addAge2 = myAge() addAge1.subtract() addAge1.subtract() console.log(ad.. 호이스팅(hoisting) 호이스팅을 직역하면 '끌어 올리기'를 의미한다. 자바스크립트 생태계에서 말하는 호이스팅이란 변수 혹은 함수를 선언하기 전에 메모리 공간에 미리 할당하여 해당 변수 혹은 함수를 사용할 수 있게끔 해주는 것을 의미한다. 그럼 코드로 알아보자! Hi(); function Hi(){ console.log('안녕하세요:)') }; 위처럼 함수를 선언하는 코드보다 함수를 실행하는 코드가 위에 있어도 정상적으로 함수가 에러 없이 실행된다는 것이다. 이것은 호이스팅의 원리로 인해 함수를 선언하는 코드가 함수 실행 코드가 실행되기 전에 미리 메모리에 할당되었기 때문에 가능한 것이다. 하지만 다음과 같은 코드는 어떨까? Hi2(); var Hi2 = function(){ console.log('안녕하세요') } 결과는 다.. 이전 1 2 다음 목록 더보기
