Javascript

클로져

렉시컬 스코프 자바스크립트 엔진은 함수를 어디서 호출했는 지가 아니라 함수를 어디에 정의 했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라 한다. 클로져에 대해 알려면 렉시컬 스코프에 대해 꼭 알아야 한다! 아래 코드를 보면 foo()를 실행하면 bar()가 실행되어서 10이 나올 것 같지만 실제 bar가 선언되었을 당시의 x인 1을 가리키게 되어 1을 출력합니다! 이런 예시처럼 렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디서 선언하였는지 결정됩니다!! var x = 1; function foo() { var x = 10; bar(); } function bar() { console.log(x); } foo(); // 1 bar(); // 1 클로져 자바스크립트 고유 개..

자바스크립트 작동 방식

작동 방식 브라우저가 웹페이지에서 자바스크립트를 발견하면 프로그램의 텍스트를 자바스크립트 컴파일러로 전달한다. 컴파일러는 프로그램에 에러가 있는지 검사하고, 프로그램을 모형 컴퓨터처럼 만들어 낸 컴퓨터의 어셈블리 언어 명령어로 컴파일한다. 모형 컴퓨터 같은 시뮬레이터를 실행하여 자바스크립트 프로그램이 수행하기로 되어 있는 모든 기능을 수행한다. 자바스크립트 동작 구조 자바스크립트의 대표적인 엔진은 Google에서 만든 V8 엔진이다. 엔진은 Memory Heap 과 Call Stack 으로 구성되어 있다. Memory Heap은 메모리 할당이 발생하고, Call Stack (호출 스택)은 코드 스택에 따라 하나씩 쌓이는 곳이다. 자바스크립트에서는 수 많은 API를 사용하고 있다. 하지만 이런 API들은 ..

자바스크립트와 동시성

참고 https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop 이벤트 루프 - JavaScript | MDN JavaScript의 런타임 모델은 코드의 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 이벤트 루프에 기반하고 있으며, C 또는 Java 등 다른 언어가 가진 모델과는 상당히 다릅니다. developer.mozilla.org Javasript 와 싱글 쓰레드 자바스크립트는 싱글 쓰레드로 동작하는 언어이다. 메인 쓰레드 하나와 콜스택 하나로 구성되어 있다! 비동기 작업을 동시에 할 수 있다 → 자바스크립트는 코어 엔진만 가지고 않고 실행환경(런타임)의 도움을 받아 동시 실행을 한다. → WebAPI(dom, ajax, s..

This, 리액트에서의 bind()

This this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. 즉, this는 함수가 호출되는 방식에 따라 동적으로 결정된다! 자바스크립트에서 this는 크게 4가지로 사용될 수 있다. 일반 함수 내부 (전역 객체 바인딩) 메서드 내부 (메서드를 호출한 객체 바인딩) 생성자 함수 (생성자 함수가 생성할 인스턴스 바인딩) apply/call/bind 호출 (메서드에 첫 번째 인수로 전달하는 객체 바인딩) 일반 함수 내부 this 일반 함수 내부에서 호출한 this는 전역 객체에 바인딩된다. var a = 4 function duck(){ console.log(this.a); } duck(); //4 메서드 내부 this 메서드 안에서 this를 호출하면 this는 메서드..