Javascript/core 11

Javascript의 garbage collecting

기본 개념 - heap: object, function등의 동적인 메모리 할당 - stack: primitive data, references pointing to the real objects 등의 정적인 메모리 할당. 더 안전 1. reference-counting: js는 더이상 사용하지 않는 object에 대해 gc 실시. circle reference에 대해서 취약. 2. mark-and-sweep: root object로부터 지정된 하위 object까지 도달가능 여부를 따짐. node.js의 경우 new space와 old space의 두 부분으로 나뉩니다. 이름에서 알 수 있듯이, 전자는 새로운 개체(젊은 세대)가 할당되는 위치이고 후자는 오랜 기간(구세대) 동안 생존한 개체의 대상입니다. ..

Javascript/core 2021.07.05

Spread operator: unshift보단 전개연산자를 쓰자!

배열에 원소를 추가할 때 unshift를 쓰곤 한다. arr = [2, 3, 4] arr.unshift(1) arr.unshift(0) console.log(arr) // [0, 1, 2, 3, 4] 그러나 unshift는 다음과 같이 배열의 값을 직접 참조하여 원본 배열에 변형을 일으키는데, 불변성의 이슈에서나 성능 상의 이유에서나 좋지 못하다. arr = [2, 3, 4] // 0: 2, 1: 3, 2: 4 arr.unshift(1) // 0: 1, 1: 2, 2: 3, 3: 4 arr.unshift(0) // 0: 0, 1: 1, 2: 2, 3: 3, 4: 4 보시다시피 배열의 원소와 인덱스의 연결이 전부 끊어지고 새로운 값이 할당된다. 중간에 새로운 원소가 끼어들거나, 최악의 경우 첫 번째에 새로..

Javascript/core 2021.04.05

자바스크립트의 런타임, 엔진 그리고 이벤트 루프에 대하여

한창 취준을 하면서, 연습삼아 여기저기 인터뷰를 보고 있다. 오늘은 화상통화를 하며 1시간 동안 js와 react 문제를 해결하는 형식의 인터뷰를 진행했다. 그리고 1번으로 나온 문제다. for (var i = 0; i < 10; i++) { setTimeout(function() { console.log(i); }, 10); } 늘상 코딩테스트 단골문제로 나온다고 다른 블로그에서 스치듯 지나간 문제이다. 언뜻 보기에 별 문제없는 코드이고 정상적으로 0부터 9까지 출력될 것 같다. 그러나 실상은 다르다. 제대로 된 원리를 알지 못해 미심쩍어하면서도 0~9를 적은 본인을 탓하며, 왜 이렇게 돌아가는지 조사해보았다. 간단하게 말해보자면 setTimeout 내의 callback 함수는 모든 함수가 종료되고 난..

Javascript/core 2021.03.29

static method, static property와 class에 관하여

참조prototype, __proto__에 관하여 prototype, __proto__에 관하여 프로토타입 개념에 관한 도식이다. Constructor 생성자함수로 instance를 생성한 경우 Constructor의 프로퍼티인 prototype가 instance의 __proto__라는 프로퍼티에 전달이 된다. 그럼 prototype은 무엇일까? co.. student513.tistory.com prototype, __proto__에 관하여 프로토타입 개념에 관한 도식이다. Constructor 생성자함수로 instance를 생성한 경우 Constructor의 프로퍼티인 prototype가 instance의 __proto__라는 프로퍼티에 전달이 된다. 그럼 prototype은 무엇일까? co.. stu..

Javascript/core 2020.12.20

prototype chaining에 관하여

참조: prototype, __proto__에 관하여 Object로부터 상속받는 생성자함수의 prototype prototype은 객체형태이기 때문에 Object라는 생성자로부터 상속을 받는다. 이 경우 Object의 prototype 입장에서 Array의 prototype은 __proto__으로 취급되는 것이다. 각 변수는 생성자 함수가 존재하며, 각 데이터타입에 해당하는 메소드가 정의되어있어, 메소드를 사용하려 할 때 해당 변수는 자동으로 instance로 변환된다. Array 뿐만 아니라 Number, String, Boolean 등에 대해서도 동일하게 적용된다. Object 생성자 함수는 누구로부터 상속을 받을까? 그렇다면 다른 생성자들의 부모격인 Object의 prototype은 어떤 상속구조를..

Javascript/core 2020.12.20

prototype, __proto__에 관하여

프로토타입 개념에 관한 도식이다. Constructor 생성자함수로 instance를 생성한 경우 Constructor의 프로퍼티인 prototype가 instance의 __proto__라는 프로퍼티에 전달이 된다. 그럼 prototype은 무엇일까? console.dir로 Array 생성자를 출력해보았다. 많은 메소드들 중 prototype이 보인다. Array 생성자로 생성한 인스턴스인 배열은 __proto__에 prototype의 메소드들을 포함하게 되는 것이다! arr라는 배열을 생성하여 콘솔에 출력해보니 Array의 prototype과 똑같은 __proto__라는 객체가 출력이 되는 것을 알 수 있다. arr라는 instance는 Array 생성자로부터 메소드를 상속받게 된 것이다. Array:..

Javascript/core 2020.12.20

Closure란?

"지역변수가 함수 종료 후에도 사라지지 않게 할 수 있다." 라고 한다. 이해하고 나면 알겠는데, 설명하기는 참 까다로운 개념이다. 일단 코드부터 보자 var outer = function (){ var a = 1; var inner = function(){ return ++a; }; return inner; } var outer2 = outer(); console.log(outer2());// 출력: 2 console.log(outer2());// 출력: 3 var outer2에 할당된 값은 함수 outer의 반환값 inner이다. var inner = function(){ return ++a; }; 딱 요 부분만이 outer2에 할당되는 것이다. 그런데 inner에 할당된 함수 내에 a라는 값은 선언..

Javascript/core 2020.12.19

callback 함수란?

함수가 자신의 인자로 다른 함수를 받을 때, 인자로 넘겨진 함수를 callback 함수라고 한다. callback함수는 자신을 인수로 받은 함수에게 제어권을 넘겨준다. 제어권에는 세 가지가 있다. 실행시점에 관한 제어권: 어떤 시점에 콜백함수를 호출할지 인자에 대한 제어권: 인자에는 어떤 값들을 넘겨줄지 this에 대한 제어권: this에 무엇을 바인딩할지 실행시점에 대한 제어권 실행시점을 제어하는 것으로 흔히 예를 들 수 있는 함수는 setInterval과 setTimeout이 있다. MDN의 setTimeout의 표준 사용법을 보자. window.setTimeout(func[, delay, param1, param2, ...]); [ ] 대괄호 안의 인자는 넣어도 되고 안 넣어도 되는 인자들이다. 맨..

Javascript/core 2020.12.19

var, let, const 비교하기

javascript에는 변수를 선언할 수 있는 3가지 키워드가 있습니다. 그리고 이와 관련된 내용을 검색해서 들어오셨다면 셋이 어떻게 다른지 알고 싶으실 것입니다. 각설하고, var, let, const는 두 가지의 기준으로 비교할 수 있습니다. 재선언이 가능한가? 재할당이 가능한가? var의 경우 재선언과 재할당이 모두 가능합니다. var a = 5; a = 4; console.log(a) // 4 (재할당 ok) var a = 3; console.log(a) // 3 (재선언 ok) var a; console.log(a) // undefined (재선언 ok) 개인적으로 재선언이란 개념 자체가 바람직한 프로그래밍 문법이 아니라고 생각합니다. 변수의 값을 변경하고 싶다면 재할당으로도 충분하기 때문입니다..

Javascript/core 2020.12.19

this에 관하여

함수가 호출될 때 동적으로 바인딩된다. 호출 방식에 따라 바인딩이 달라진다. 호출되는 문맥 브라우저 node.js 전역공간에서 호출 시 window global 함수 호출 시 window global 메소드 호출 시 메소드 호출 주체(메소드명 앞) callback 호출 시 기본적으로는 함수 내부에서와 동일 생성자함수 호출 시 인스턴스 함수 호출시 그런데 이상하다. 함수 호출 시에도 전역공간에서 호출한 것과 같은 효과가 나타난다. 이 경우에는 함수의 호출이 전역공간에서 일어난 것이므로 자연스럽다고 볼 수 있다. function a() { console.log(this); } a(); 함수 내에 함수가 호출된 경우에는 어떨까? function b() { function c() { console.log(thi..

Javascript/core 2020.12.15