글

11월, 2022의 게시물 표시

JAVASCRIPT scope and scope chain

 앞서 실행 컨텍스트 에서는 scope chain이 존재 한다고 언급하였다. 스코프와 관련된 여러 용어 부터 알아보자. Scoping : 프로그램의 변수가 어떻게 조직되어 있고 접근 가능한 지이다. "어디서 변수들이 살고 있는지" , "어디서 특정한 변수에 접근할 수 있는지" Lexical scoping : scoping이 함수의 위치 그리고 코드의 블럭에 따르는 것이다. Scope : 특정한 변수가 선언된 장소나 환경이다.(variable environment 는 함수의 경우이다.) 전역 규모, 함수 규모 그리고 block 규모가 있다. Scope of a variable : 특정한 변수에 접근 가능한 코드의 지역 스코프의 세가지 종류 자바스크립트에는 세가지 종류의 scope가 있다. 먼저 Global scope 어떠한 함수나 블럭 밖에 위치하여 있다. global scope 에서 선언된 모든 변수들은 모든 곳에서 사용가능하다. Function scope 1.변수들은 오직 함수 안에만 접근가능하다.  2.local scope 라고도 불린다. Block scope 1, 변수들은 오직 block 안에서만 접근 가능하다. 2. 그러나, 오직 let 그리고 const 변수들만 적용된다.(var 은 적용 안됨) 3. 함수들은 또한 block scope 이다. (strict mode 에서는 블럭 스코프이지만) (strict mode 가 아닐 시 function scope 이다) scope chain 에 대해 알아보자. const myName = " jonas " ; function first () {   const age = 30 ;   if ( age >= 30 ) {     const decade = 3 ;     var millenial = true ;   }   function second () {     const j...

JAVASCRIPT EXCUTION CONTEXT

자바스크립트의 excution context(실행 컨텍스트)에 대해 알아보자!  자바스크립트가 컴파일이 끝났고 이제 실행될 준비 가 되었다. 자바스크립트는 top-level code (함수가 들어있지 않은 코드)를 만들기 위해 가장 먼저 global excution context 를 만든다. 여기서 excution context 실행 컨텍스트에 대해 알아보자. 실행 컨텍스트는 자바스크립트가 실행되는 한 조각의 환경이다. 이곳엔 자바스크립트의 코드 뿐만 아니라 실행되기 위해 필요한 정보들을 담고 있다.  전역 실행 컨텍스트에 탑 레벨 코드의 정보가 담기고 나면 코드가 실행되는데,함수 내부의 코드를 제외한 모든 코드가 실행되고 나면 그때 함수들이 실행되게 된다. 각각의 함수는 각각의 실행 컨텍스트를 가지며 실행 될때 마다 call stack 에 쌓이게 된다. 모든 함수가 실행되면 이벤트 루프가 콜백(클릭 이벤트) 큐 에서 콜백 함수가 콜 스택에 보내 주기를 기다린다. 실행 컨텍스트의 구성에 대해 알아보자  -- Variable Environment(변수 환경) let, const,var 로 선언한 변수들(declarations) 함수들 (functions) Arguments 객체 (함수가 실행되는데 필요한 인자를 객체 형태로 저장한다.) -- 스코프 체인(Scope Chain) 현재 함수의 바깥쪽을 참조하는 변수들의 영역 --this 키워드 화살표형 함수는 인자가 없으므로 argument 객체 그리고 this 키워드가 없다는 걸 명심하자. 단, 가까운 정규함수 (regular function) 부모로부터 객체와 this 키워드를 사용할 수 있다. 콜 스택에선 실행 컨텍스트가 쌓여 , 현재 어떤 코드가 실행되고 있는지 알 수 있는 공간이다. 함수 실행 컨텍스트가 return 값을 내놓으면 그때 콜 스택에서 실행 컨텍스트가 제거된다. 그렇게 진행되어 결국 전역 실행 컨텍스트가 실행되어 끝나면 실행과정이 끝나고 브라우저를 종료 하기 전까지는 종...

JAVASCIRPT ENGINE AND RUNTIME

이미지
(https://blog.sessionstack.com/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code-ac089e62b12e) 위 글에서 참고 자바스크립트의 엔진은 간단하게 자바스크립트의 코드를 실행시켜주는 역할을 한다. 대표적으로 구글 크롬의 V8 Engine 이 있고 다른 브라우저 모두 자신만의 자바스크립트 엔진을 가지고 있다. 엔진은 크게 두가지 부분으로 구성 되어 있다. 1.메모리 힙(memory heap) : 메모리 할당이 이루어 지는 곳이다. 2.콜 스택(call stack) : 코드가 실행되면서 스택이 호출 되는 곳이다. 자바스크립트 엔진과 브라우저 에서 제공되는 web api 그리고 call back queue ,event loops 등 자바스크립트 실행에 필요한 모든 요소들을 runtime 이라고 한다. runtime을 큰 박스라고 생각하면 편하다. 콜 스택 (Call Stack) 자바스크립트는 단일 쓰레드 (single- thread) 프로그래밍 언어이다. 따라서 하나의 call stack만을 가져서 한번에 하나씩 일을 처리한다. 기본적으론 콜 스택에선 우리가 프로그램에서 어디에 위치하는지 나타내 주는 데이터 구조이다. 함수가 실행되면 그 함수를 콜 스택 가장 위로 올린다. 함수가 실행된다면 (반환하게 된다면) 그때 그 함수를 제거 한다. 이게 콜 스택이 하는 일이다. 각각의 단계를 stack frame 이라고 한다. 스택 날림(blowing stack) 현상 주로 콜 스택의 최대 크기를 넘었을 때 나타난다. function foo(){  foo(); } foo() ; 주로 재귀 함수에서 나타나는데 실행할 때 마다 자기 자신을 호출해 결국 콜 스택의 최대 크기를 넘어버린 것이다. 단일 쓰레드를 사용 한다는 것은 멀티 쓰레드 기반 프로그래밍 언어 보다는 쉬울 수 있다. 하지만 단일 쓰레드이기에 발생하는 문제가 있다. 콜 스택에 수행할 함수가 ...

JAVASCRIPT 9가지 특징

 자바스크립트는 여러 특징을 가진다. 1. high level c언어 같은 low level 언어는 개발자가 리소스(사용 가능한 데이터, 데이터의 한 구성요소)를 손수 다뤄야 하지만 javascript 같은 high level은 개발자가 관리 할 필요없이 자동적으로 관리된다. 2.garbage collection javascript안의 알고리즘으로써 컴퓨터 메모리 안에 오래되고 사용하지 않는 object를 정리해준다. 따라서 우리는 손수 코드를 작성하지 않아도 알고리즘이 자동으로 정리해준다. 3.interpreted or just-in-time compiled 자바스크립트로 쓰여진 코드는 우리는 이해할 수 있지만 컴퓨터는 이해를 못한다. 컴퓨터가 이해하는 건 machine code 0과 1 로 이루어진 코드이다. 자바스크립트를 포함해 다른 언어들은 우리가 작성한 코드를 0 과 1로 바꿔주는 interpreted 역할을 해준다. 4.Multi-paradigm 우선 paradigm 은 코드를 구성하는 접근법이나 생각이다. 세가지 대표적인 paradigm이 있다. 1. Procedural programming(지금까지 써온 선형적인 코드) 2. Object-oriented programming(OOP) 3. Funtional programming(FP) 자바스크립트는 이 세가지 paradigm 을 적용할 수 있다. 5.Prototype-based object-oriented 자바스크립트는 거의 대부분 객체로 이루어져 있다. 원시 값 빼고 (number,string,boolean..) 배열 또한 객체 인데 배열에 매쏘드를 사용가능한 이유는 array.prototype. 이란 곳에서 add 같은 매쏘드를 만들어 놨기 때문이다. 6.First-class functions first-class functions를 가진 언어는 함수를 단순히 변수로 대한다. 다른 함수안에 인자로 넣을 수 도 있고 함수를 반환하는 함수를 만들 수 있다. 그리고 이것이 functional...