본문 바로가기

Javascript

(7)
Javascript의 Callback vs Promise callback vs promise vs async/await 해당 글이 시작되기전 동기와 비동기의 기본 개념 정리가 필요하다면 아래 링크를 타고 먼저 개념 확인 후 아래 글을 읽는 것이 더 좋다고 생각한다. https://yukang-laboratory.tistory.com/14 Javascript 동기와 비동기 차이를 알아보자 동기와 비동기의 차이 실행순서와 실행 flow가 다른다라는 개념으로 시작하는것이 좋다. 동기(Synchronous) 동기는 요청을 보낸 후 응답(response)을 받아야 다음 동작이 이뤄진다. 응답을 받기 전 까지 yukang-laboratory.tistory.com Callback function이란? Callback function은 javascript의 비동기방식 중 하..
Javascript 동기와 비동기 차이를 알아보자 동기와 비동기의 차이 실행순서와 실행 flow가 다른다라는 개념으로 시작하는것이 좋다. 동기(Synchronous) 동기는 요청을 보낸 후 응답(response)을 받아야 다음 동작이 이뤄진다. 응답을 받기 전 까지 작동 x 한번에 한 작업만 순차적으로 메인 스레드에서 작업 된다. console.log('동기 시작'); console.log('1'); console.log('2'); console.log('3'); console.log('동기 끝'); // 동기 시작 // 1 // 2 // 3 // 동기 끝 비동기(Asynchronous) 비동기는 요청을 보낸 후 응답을 받기까지 기다리지 않고 다른 동작이 이뤄진다. callback으로 응답을 받은 후 다음 작업을 실행한다. 데이터를 가져오기까지 앱이 대..
클로저(Closure)를 알아보자 클로저(Closure)를 알아보자 클로저란? "A closure is the combination of a function and the lexical environment within which that function was declared" 클로저는 함수와 함수가 선언된 어휘적 환경(렉시컬 환경)의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지를 먼저 이해해야 한다. 단순 정의를 보면 간단하지만 이를 이해할 수 있는 사람은 많지 않다고 생각하고 하나씩 풀어가며 알아보자. 클로저를 알기 위해 실행 컨텍스트에 대한 사전 지식을 가지고 시작하는 것이 이해하기 더 좋다. 그러므로 실행 컨텍스트에 대해서 먼저 알아보자! 실행 컨텍스트란? 코드를 실행하는데 필요한 환경을 제공..
호이스팅(Hoisting)을 알아보자 호이스팅(Hoisting)이란? 호이스팅은 변수 선언이 스코프의 선두로 끌어올려진 것처럼 동작하는 자바스크립트 고유의 특징을 말한다. console.log(score); // undefined var score; // 변수 선언 변수 선어문보다 변수를 참조하는 코드가 앞에 있을 경우 자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되기 대문에 console.log(score)가 먼저 실행된다. 그럼 변수가 선언되기 전 참조되었기 때문에 오류를 발생할 것이라고 생각하겠지만 실제로는 오류가 발생되지 않는 이유가 호이스팅 때문이다. 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 런타임이 아니라 그 이전 단계에서 먼절 실행되기 때문! Javascript는 소스코드의 평가 과정을 거치면서..
스코프 체인(Scope chain) 알아보기 스코프체인 스코프(식별자의 유효 범위) 체인이란? 스코프가 함수의 중첩에 의해 계층적 구조를 가질 때 변수를 참조하기 위해 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색하는 것을 말한다. 스코프 체인에서 순서는 절대적이다. 상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있지만 하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없다. 검색이 아래에서부터 올라가 존재하지 않을 시에만 상위로 넘어가 검색하고 하위에서 참조할 변수가 존재한다면 해당 변수가 존재하기 때문에 검색을 종료한다. 스코프를 결정하는 방법 2가지 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정 (동적 스코프) 함수를 ..
인터프리터 언어 vs 컴파일러 언어 인터프리터 언어 vs 컴파일러 언어 Javascript를 공부하면서 나의 궁금증을 정리해본다. 컴파일러 언어란? 컴파일러 언어란 개발자가 작성한 소스 코드(고급 프로그래밍 언어)를 컴파일러(Compiler)를 통해 기계어(저급 프로그래밍 언어)로 바꿔 사용하는 것을 말한다. 한마디로 개발자인 우리에게 친숙한 언어는 컴퓨터가 알기 어려운 언어이므로 컴퓨터가 쉽게 알아들을 수 있도록 컴파일러를 통해 번역해준다고 생각하면 쉽다. 컴파일러를 통해 빌드가 완료되었다면 모든 언어가 기계어로 변환되었기 때문에 실행 속도가 빠르지만 규모가 큰 프로그램을 컴파일할 때에는 컴파일러를 통해 한 번에 모든 코드를 기계어로 바꿔 사용하기 때문에 생산성이 떨어지는 단점이 존재한다. 컴파일러 언어를 통해서 개발을 할 때 가장 효율..
Javascript var, let, const 차이 구분하기 Javascript 변수 선언 구분하기 최근 Javascipt 공부를 시작하면서 기본적인 내용을 정리해보려고 끄적여본다. ㅎㅎ Javasript에서 변수를 선언하기 위해서는 var, let, const가 있는데 이 3가지 변수의 차이점을 비교하자. 3가지 변수 선언방식의 차이를 알기 위해서 먼저 scope에 대해서 알아보자. scope란? scope의 정의는 컴파일러가 변수나 함수가 필요할 때 찾는 공간을 의미한다. scope는 global scope, local scope. lexical scope가 있고 지금은 간단히 global scope, local scope만 설명하겠다. global scope란? global scope란 변수가 블록밖에 선언되어 특정 블록 내부에 바인딩되어있지 않아 사용 범위..