프로그래밍 공부하기

JavaScript의 기본이 되는 6개의 원시 타입은 Number, String, Boolean, null, undefined, Symbol이다. 이 중 Symbol(심볼)에 대해 알아보자. 1. Symbol과 기존 JS 객체의 문제점 // 1. No Symbol const arr = [1,2,3,4,5]; console.log(arr.length); // output: 5 arr.length = 10; console.log(arr.length); // output: 10 심볼이란 ES6에서 도입된 원시 타입으로, 유일무이한 값, 고유한 값을 지정하기 위해 사용된다. 위 코드에 나타난 JS의 문제점은 무엇일까? 바로 객체의 내장 속성과 같은 이름으로 속성을 재정의 하면 속성의 값이 덮어쓰기 되어버린다는 ..

1. Access Property of Primitive Type JS은 객체(Object) 값(Reference Type)과 그렇지 않은 값(Primiteve Type)으로 나뉜다. 여기서 객체란 key-value로 구성된 프로퍼티들의 정렬되지 않은 집합이라 말할 수 있으며, 이때 value가 함수라면 해당 프로퍼티는 메서드라 부른다. // primitive Type의 메서드 사용 'abc'.toUpperCase(); // 'ABC' 1 .toString(); // '1' // primitive Type의 프로퍼티 접근 '123'.length; // 3 1 .x; // undefined 그런데 JS에선 Primitive Type도 메서드를 사용하거나 프로퍼티에 접근가능하다 이것이 가능한 이유는 Prim..

function* generator() { yield 1; yield 2; } const g = generator(); // what is this? javascript에서 함수를 선언할 때 *을 붙이는 경우를 종종 볼 수 있다. 이런 함수가 어떻게 동작하는지 알아보고 어떻게 활용할 수 있는지 살펴보자. 1. Generator & Iterateration MDN에서는 function* 선언은 generator function을 정의하는 데 사용하며, 이 함수는 Generator 객체를 반환한다고 정의되어 있다. 그렇다면 Generator란 무엇일까? Generator 객체란 반복자(Iteration) 프로토콜을 준수하는 객체이다. 그리고 Iteration Protocol은 iterable과 iterato..

브라우저에서 JS 컴파일 방식은 일반적으로 인터프리터로 알려져 있다. 그러나 검색을 조금만 해보면 컴파일러처럼 최적화를 진행한다고 하기도 한다. 대체 JS 컴파일이 어떻게 진행되고 있는 것인지 조금 더 자세히 알아보자. 1. 인터프리터와 컴파일러 컴파일이란 A언어를 B언어로 바꾸는 과정을 의미한다. 일반적으로 컴파일이라고 하면 고급 언어를 컴퓨터(CPU/프로세서)가 이해하고 실행할 수 있는 기계어로 번역한다는 의미로 사용된다. 컴파일의 대표적인 2가지 방법은 컴파일러와 인터트리터이다. 컴파일러는 미리 모든 내용을 읽고 목적 프로그램을 생성한다. 그 후 필요한 라이브러리들을 엮는 링킹 작업을 거쳐 실행 프로그램을 생성한다.(링킹까지 합쳐서 컴파일러가 하는 일이라고 하기도 한다.) 반면, 인터프리터는 고급 ..

This란 함수 호출 시 실행컨텍스트가 생성되며 자동으로 Binding 되는 값으로, 호출된 함수가 속한 객체를 의미한다. This의 값은 함수 호출 방법에 따라 다르게 호출된다. 1. New Binding function Cat(name) { this.name = name; this.say = function() { console.log(`${this.name} says nyang!`); } } const nabi = new Cat('nabi'); nabi.say(); // nabi says nyang! new 키워드로 함수 호출 시 new 연산자가 빈 객체를 메모리 상에 생성 후 this에 바인딩 시킨다. 함수를 실행시키며 this의 속성을 채운 후 함수가 리턴하는 것이 없다면 만들어진 this가 리..

코딩을 하다보면 Call By Value와 Call By Reference 라는 말을 들어본 적이 있을 것이다. 나는 지금까지 Call By XXX은 함수의 인자로 전달되는 타입에 따라 다르다고 생각했다. Primiteve Type을 넣으면 Call By Value, Reference Type을 넣으면 Call By Reference와 같은 식으로 말이다. 하지만 엄밀히 말하자면 대부분의 프로그래밍 언어는 Call By Value 이다. 왜 그런 것인지 알아보자. 1. Call By Value function addTwo(x) { x -= 1; console.log(x); } let x = 10; addTwo(10); console.log(x); // output: 10 Call By XXX과 같은 말은..

JavaScript로 비동기 작업을 JS 런타임에서 처리 후 연결된 콜백 함수를 JS 엔진의 콜스택으로 적절한 타이밍에 적재시키기 위한 장치가 Event Loop이다. 이벤트 루프에 의해 JS 엔진의 콜스택에 적재되기 전 콜백함수가 대기하고 있는 곳을 Callback Queue 혹은 Task Queue라고 한다. 태스크 큐는 2가지 종류의 우선순위 큐로 구성되어있으며, 두 개의 큐 간에도 우선순위가 존재한다. setTimeout(() => { console.log('A'); }, 0); Promise.resolve() .then(() => { console.log('B'); }) .then(function() { console.log('C'); }); console.log('D'); 위 코드의 출력결과는..

블로깅을 시작하고 100개가 넘는 포스팅을 했지만 JavaScript의 기본인 실행 컨텍스트에 대한 포스팅을 한 적이 없다. 왜냐하면 내 스스로 실행 컨텍스트에 대한 이해가 부족하다고 생각하고 정리하기 어려운 개념이기 때문이다. 하지만 이를 계속 회피할 수는 없기 때문에 내가 생각하는 실행 컨텍스트에 대해 정리해보고자 한다. 이 글의 내용은 특히 필자의 주관적인 의견이 담겨있을 수도 있고, 정확한 정보가 아닐 수도 있다. 혹시 읽는 사람이 있다면 이러한 점을 고려해주었으면 좋겠다,, 1. Context 문맥(Context)이란 말을 코드 이외의 곳에서 들어본 적이 있는가? 나는 학창시절 국어시험에서 본 경험이 있다. 국어 시험에선 지문의 '배' 와 같은 단어에 밑줄을 쳐놓고 '문맥'상 어떤 의미인지 고르..

프로그래밍이란 문제를 정의하고 해결해나가는 과정이다. 만약 문제가 너무 복잡하고 큰 문제라면 어떻게 해야할까? 일반적으로 문제를 작은 부분으로 쪼개어 하나씩 풀어나갈 것이다. 이 때 문제를 작은 부분으로 쪼개나가는 것을 모듈화라고 한다. 모듈은 프로그램의 일부로, 독립적인 기능을 갖는 단위이다. 따라서 독립적으로 컴파일 가능한 프로그램 혹은 하나의 함수도 모듈이 될 수 있다. 일반적으로 모듈의 독립성이 높을수록 좋은 모듈이라고 한다. 일반적으로 독립성이 높은 모듈이 재사용성이 높고 코드의 이해/수정이 용이하기 때문이다. 이 때 모듈의 독립성은 결합도와 응집도로 측정한다. 응집도는 한 모듈 내의 구성요소들 간의 연관 정도를 의미하고, 결합도는 모듈과 모듈 간의 의존 정도를 의미한다. 응집도는 강할수록, 결..

(function () { console.log('Hello!!') })(); // Hello!! JS 코드를 보다보면 위와 같은 형식의 코드를 볼 수 있다. 위와 같은 문법은 IIFE(Immediately Invoked Function Expression)이라고 하며, 괄호로 둘러싸인 익명함수와 함수를 실행하는 괄호를 연결하여 함수가 정의되자마자 실행되게 한다. 즉시 실행 함수 표현이라고도 한다. 일단 함수 선언식과 표현식에 대해 알아보자. 1. 함수 선언문과 표현식 //함수 선언문 function fn1() { console.log("Hello!"); } //함수 표현식 - 익명 const fn2 = function() { console.log("Hello!"); } //함수 표현식 - 기명 cons..