개발감성

JS 타입 종류 //number 5, 3, 6 //boolen true, false //string "hello" //undefined undefined //null null //symbol Symbol("just symbol") //object {} 자바스크립트의 타입 종류는 각각 아래와 같다. number: 숫자 boolen: 참, 거짓 string: 문자열 undefined: 아직 정해지지 않은 값 null: 비어있는 값(undefined과 다르게 비어있다고 정해져 있는 값) symbol: es6에서 추가된 변수타입, 유니크한 값을 가진다. symbol 설명글 object: 객체 타입 primitive, non-primitive (원시형, 참조형) //primitive typeof 1; typeof..

//call function a() { console.log("a"); } a.call(); //a a.apply(); //a a(); //a js의 function에는 call, apply, bind라는 내장 함수가 있다. 이 글에서는 이 세 함수의 특징과 사용법에 집중해서 다루도록 하겠다. 객체의 메서드 const wizard = { name: "Merlin", health: 70, heal(num1, num2) { return (this.health += num1 + num2); }, revival() { return (this.health = 100); }, }; 마법사 객체는 이름이 멀린, 체력은 70이다. 또 두 기술을 가지고 있는데 각각 heal과 revival이다. 그럼 마법사 스스로에게 ..

요약 : JS는 선언된 위치에 따라 scope가 결정되는 lexical을 따른다. 하지만 JS의 this는 호출 시점에 따라 값이 결정되는 dynamic scope방식과 '비슷한' 동작을 한다. JS는 기본적으로 function scope를 가지며 새로 추가된 let,const변수선언을 통해 block scope를 추가로 가질 수 있다. 두 scope의 차이를 모른다면 이전 글에 작성해뒀다. function scope와 block scope가 scope의 범위에 대해 정의한다면 dynamic과 lexical은 정의된 scope의 범위가 어디에서 파생되는 지를 정의한다. dynamic - 어디에서 호출을 하느냐에 따라 scope가 달라진다. (옛, 일부 언어) lexical - 선언을 한 장소에 따라 sc..

실행 컨텍스트 실행 컨텍스트(Execution Context)는 JS 동작의 핵심원리로써 동작의 단위라고 볼 수 있다. NodeJS의 런타임 동작 방식에서 콜 스택에 쌓이는 것이 실행 컨텍스트 이다. 이 실행 컨텍스트는 객체의 형태이며 세 개의 속성 값을 가진다. Variable Object 실행 컨텍스트의 첫 번째 속성 VO는 변수 정보를 가리킨다. 위 코드가 런타임에서 실행된다면 anonymous(Global) => one => two 순서로 콜 스택에 담기게 된다. 각 세 개의 실행컨텍스트의 VO가 가르키는 객체에 담겨있는 것은 전역 컨텍스트 var isValid = false, function one(), function two() 함수 컨텍스트(one) var isValid = true 함수 컨..

ES6 호환코드에서는 arguments 보다는 나머지 인자를 사용하세요 arguments와 ...args(나머지 인자)는 함수의 인자에 접근할 수 있다. arguments arguments는 함수의 인자로 전달받은 person1, person2를 배열의 형태로 전달받는다. 첫줄 결과에서 보듯이 arguments는 배열이 아닌 Arguments객체이다. 따라서 배열처럼 사용하고 싶다면 Array.from()을 사용해 변환이 필요하다. ...args 나머지인자는 arguments처럼 array변환이 필요없이 배열의 형태로 인자를 전달받는다. arguments와 ...args는 함수선언에서 명시된 인수의 갯수에 상관없이 받을 수 있다. arguments 명시된 인자는 두개지만 호출 시 네개의 인자를 넣어 호출..

선언 변수 선언과 두 가지 방식의 함수 호출을 하고 선언을 그 이후에 해봤다. 일단은 세 가지 케이스 모두 오류는 없었지만 선언형 함수 말고 변수와 함수 표현식의 one, say2는 undefined를 출력한다. 지금까지 위에서 아래로 읽어내려 오는 인터프리터 방식으로 JS를 해석한다고 알았다면 어째서 선언보다 호출이 먼저가 되어도 오류가 없는지 등에 대해 JS의 선언 방식에 대해 알아보자 변수 선언 위 코드의 세 번의 num콘솔 출력은 해당 시점의 num의 상태를 보여 줄 것이다. 선언을 하기 전에 호출할 때에는 undefined를 출력하고 그 이후엔 선언한 대로 값을 출력한다. 여기서 집중할 것은 처음의 undefined출력이다. 호이스팅이라 하는 JS의 변수 선언은 문서 전체를 읽기 전에 미리 예습..

지금까지 JS가 V8엔진을 통해 어떻게 기계어로 번역되고 실행되는지 알아봤다. 하지만 JS가 브라우저에서 동작할 때는 다른 얘기가 된다. Node.js 위 사진은 노드 js의 전체 시스템 아키텍처이다. JS를 읽고 처리하는 V8엔진은 한 부분만을 차지하고 그 외에 더 넓은 환경이 있다고 일단 이해해보자 JS문서가 어떤 명령을 내릴지에 대해 적어뒀다면 V8엔진은 JS를 해석한다. 마지막으로 런타임은 JS를 V8이 해석한 내용을 토대로 브라우저를 실질적으로 동작시키는 환경이다. 실제로 node.js 설치 페이지에 가보면 확실하게 적어뒀다. 노드 js는 자바스크립트 런타임 환경이라고 순수 JS는 언어로써 입출력을 하거나 알고리즘 문제를 푸는 등의 행동은 가능하지만 비동기 처리 등의 브라우저 환경에서의 동작을 ..

메모리 힙에 이어서 이번엔 콜 스택에 대해 알아보도록 한다. 콜 스택은 이름에서 알 수 있듯이 스택 구조의 저장공간에서 코드를 호출한다. Call Stack 위와 같은 코드의 JS문서가 실행된다고 가정했을 때 콜 스택을 확인해보자 크롬 개발자 콘솔창에서 해당 코드를 실행시켜서 디버깅을 하면 스코프 상태 밑에 콜 스택을 볼 수 있다. 처음 스택에 들어가는 것은 anonymous, 전체 파일이며 main함수라고 보면 된다. 파일이 실행되고 calc함수를 호출하는 코드를 만난다. 콜 스택을 확인해보자 anonymous위에 calc가 쌓인 것을 볼 수 있다. 이후 실행상태는 calc함수 내의 코드로 이동했다. sum을 계산하고 리턴문으로 넘어갔더니 이번엔 sub함수 호출을 만나게 된다. 다음 행동이 이제는 예상..

지금까지 JS가 어떻게 번역되어서 기계에게 전달되는지 알아봤다. 이번에는 코드를 읽는 과정에서 데이터를 메모하여 저장하는 공간에 대해 알아볼 것이다. 메모리 힙 힙 자료구조와 Call by value, Call by reference 개념에 대한 학습이 선행되길 추천 코드를 읽는 과정에서 변수 선언을 만나면 해당 데이터를 저장할 공간이 필요하게 된다. 여기서 number와 string변수는 Call by value human객체는 Call by reference 형식을 가진다. 메모리 힙에는 Call by reference형식의 데이터만이 저장된다. 힙과 스택의 자료구조와 변수 참조 형식에 대해 이해하고 있다면 왜 두 다른 저장공간을 사용해서 참조 변수만을 힙에 저장하는지 알 수 있을 것이다. 메모리 누..

Inline Caching 인라인 캐싱은 js컴파일 과정에서 한번 참조된 데이터에 대해서는 기억해서 여러 번 데이터를 중복 참조하지 않도록 하는 최적화 방식이다. 컴파일을 할 때 처음 find함수는 data에 접근하여 속성 a, b를 가져온다. 하지만 이후부터는 find(data)는 문자열 a=1 b=2로 캐시에 저장되어 다시 데이터에 접근하는 것을 줄여주는 최적화 방식이며 인라인 캐싱은 히든 클래스를 기반으로 둔다. Hidden Class 히든 클래스에 대해 더 정확히 알고싶다면 동적 타이핑과 동적 탐색 개념에 대한 학습을 추천한다. 만약 위와 같은 함수형 클래스인 Num이 있다고 했을 때 obj1과 obj2는 Num의 인스턴스 객체이다. 크롬 콘솔창에서 두 객체의 히든 클래스를 확인할 수 있다. (콘..