개발감성

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의 인스턴스 객체이다. 크롬 콘솔창에서 두 객체의 히든 클래스를 확인할 수 있다. (콘..

JS는 고급언어의 일종으로 기계가 이해하기 위한 '번역'과정을 거침으로써 사람과 기계가 소통할 수 있다. V8 - js 엔진 구글의 V8은 JS를 기계가 이해할 수 있는 기계어로 변환해주는 엔진이다. 위의 과정을 하나씩 이해해보도록 하겠다. Parser, AST JS문서가 들어오면 파싱 과정을 거쳐 구문을 분석하고 문법 체크를 한다. 파싱은 말 그대로 js문서를 분해한다고 이해하면 된다. 파싱된 js 문서는 AST(추상 구문 트리)로 변환된다. 직접 입력해서 테스트해보고 싶다면 위 단어를 클릭해서 트리구조를 확인할 수 있다. JIT Compiler - 인터프리터와 컴파일러를 한 번에 인터프리터는 한 줄씩 실행하여 순간 속도가 빠르고 메모리 사용량이 적다. ex) 파이썬 컴파일러는 통째로 기계어로 변환하여..

위와 같이 객체를 생성할 때 new 를 쓰곤 한다. 여기서 new 연산자의 내부 동작에 대해 알아본다. new 사용 멤버 변수 2개와 그 수를 더해주는 메서드를 정의했다. 이제 정의한 Add에 1과2를 인자로 가져가는 add 객체를 생성한다. add객체에는 a에 1, b에 2가 들어가있으므로 plus메서드를 호출하면 3이 값으로 나온다. new 미사용 new 연산자를 사용하지 않고 newadd객체로 같은 결과를 보이도록 해본다. js 객체에는 proto속성이 있는데 그 속성을 Add의 prototype객체를 참조하도록 연결해준다. 이렇게 하면 newadd는 Add를 상속받게 된다. apply메서드는 this객체와 배열을 전달하는데, Add에 newadd객체에 인자 1,2를 전달하는 것과 같다. 따라서 n..

현재는 클래스 또한 문법적으로 지원을 하지만 원래 JS는 Prototype을 기반으로 확장, 재사용성을 가지는 언어이다. oop, 상속, 확장, 오버라이딩.., 을 JS는 어떤 방식으로 풀어냈는지 알아보자 첫 번째 이야기 : 과일의 속성 (상속, 오버라이딩) 여기 과일을(이름은 apple인) 정의했다. fruit.name은?? apple이다. 사과의 색은 빨간색이기에 fruit에 color속성을 red로 추가해주었다. fruit.color는?? red다. 이쯤에서 fruit의 속성은 무엇이 있는지 궁금해서 hasOwnProperty메서드를 사용해 알아보았다. color속성은 true로 존재한다고 하고 shape속성은 false로 없다고 한다. 아직 만들지 않았으니깐 잠깐...그런데 hasOwnProper..

this는 자기 자신을 가르킨다. 클래스에서 this 함수형 클래스에 this로 속성을 하나 생성하고 프로토타입으로 메소드를 정의하여 this.property1을 띄우도록 한다. 여기서 this는 자기자신, 즉 클래스인 MyClass를 가르키게 된다. MyClass의 인스턴스인 my의 method를 호출했을 때 어떤 값이 나오는지 확인한다. 클래스 내에서의 this는 클래스 자신을 가르킴을 알 수 있다. 함수에서 this 이번엔 함수에서 this를 사용해본다. 전역변수 data에 10을 넣고 중첩함수 inner에 this를 사용해 data를 20으로 생성하고 전역변수 data에 30을 넣어준다. 1번의 data는 30이 나왔다. 함수내에서 같은 이름의 변수를 불렀고 지역변수 var data가 존재하므로 ..