Life of Jibro

가비지 컬렉션 1. 가비지 컬렉션이란? [1] 가비지 컬렉션(이하 GC)는 메모리 관리 방법 중 하나로, 프로그래머가 동적으로 할당한 메모리 영역 중 더 이상 사용하지 않는 영역을 자동으로 찾아 해당 메모리를 제거하는 기능입니다. C 언어와 같은 저수준 언어에서는 별도로 프로그래머가 직접 메모리를 관리해주어야 하지만, 자바스크립트와 같은 고수준 언어에서는 GC를 이용하여 메모리를 관리하게 됩니다. 자바스크립트의 경우 객체가 생성되었을 때 자동으로 메모리를 할당하고, 더 이상 필요하지 않게 되면 자동으로 해제하게 됩니다. (암묵적 동작) 하지만, 자동 메모리 관리 프로세스가 “더 이상 필요하지 않은” 메모리를 찾는 것은 비결정적인 문제이기 때문에 메모리 관리를 위한 완벽한 방법이라고 볼 수는 없습니다. 💡..

[ this 란 ] 객체는 상태(State)를 나타내는 프로퍼티와 동작(Behavior)을 나타내는 메서드를 하나의 논리적 단위로 묶은 복합 자료구조이다. 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 생성자 함수를 정의하는 시점에는 아직 인스턴스를 생성하기 전이므로 생성자 함수가 생성할 인스턴스를 가리키는 식별자를 아직 알 수 없다. 따라서 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특수한 식별자가 필요한데, 이 때 사용되는 것이 바로 "this" 이다! "this"는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기참조 변수이다. 따라서 this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프..

앞선 ep.02에서 살펴본 변경 방지 메서드들은 얕은 복사만을 막는 수준에 불과했다. 따라서 중첩 객체에 대해서는 변경을 허용하게 되는 문제가 있었다. 이를 해결하기 위해 객체를 값으로 가지는 모든 프로퍼티에 대해 재귀적으로 Object.freeze 메서드를 호출하는 방법을 사용하여 중첩 객체에 대하여도 객체 동결을 수행할 수 있다. function deepFreeze(target) { if (target && typeof target === 'object' && !Object.isFrozen(target)) { Object.freeze(target); Object.keys(target).forEach((key) => deepFreeze(target[key])); } return target; } con..

[ 프로퍼티 정의 ] 프로퍼티 정의란, 새로운 프로퍼티를 추가하면서 프로퍼티 어트리뷰트를 명시적으로 정의하거나, 기존 프로퍼티의 포로퍼티 어트리뷰트를 재정의하는 것을 말한다. [ 프로퍼티 정의하는 방법 ] Object.defineProperty 메서드 또는 Object.defineProperties 메서드를 사용하여 하나 또는 여러 개의 프로퍼티를 한 번에 정의할 수 있다. ※ 프로퍼티 어트리뷰트 기본값(default) Property Discriptor 객체의 Property 대응하는 Property Attribute 미정의시 설정되는 기본값 value [[Value]] undefined get [[Get]] undefined set [[Set]] undefined writable [[Writable]..

1. 데이터 프로퍼티 : 데이터 프로퍼티 어트리뷰트는 자바스크립트 엔진이 프로퍼티를 생성할 때 기본값으로 자동 정의된다. 프로퍼티 Attribute 프로퍼티 Discriptor 객체의 프로퍼티 설명 [[Value]] value - 프로퍼티 키를 통해 프로퍼티 값에 접근하면 반환되는 값이다. - 프로퍼티 키를 통해 프로퍼티 값을 변경하면 [[Value]]에 값을 재할당한다. 이때 프로퍼티가 없으면 프로퍼티를 동적 생성하고 생성된 프로퍼티의 [[Value]]에 값을 저장한다. [[Writable]] writable - 프로퍼티 값의 변경 가능 여부를 나타내며 불리언 값을 갖는다. - [[Writable]]의 값이 false인 경우 해당 프로퍼티의 [[Value]]의 값을 변경할 수 없는 읽기 전용 프로퍼티가..

자바스크립트를 깊이 있게 공부하겠다고 다짐한지 벌써 3개월이라는 시간이 흘렀습니다. 하지만 이리 저리 바쁜 시간 속에서 학습의 빈도는 점점 작아지고, 배운 내용을 블로그에 깊이 있게 다루자니 너무나도 많은 시간이 소요되어 쓰기 싫어진다는 단점이 존재하였습니다. 이에 필자는 특단의 대책을 세울 수 밖에 없었습니다. 바로 자바스크립트를 큰 단위로 나누어 학습 및 포스팅하지 않고 잘게 잘라서 딱 먹기 좋은 "한 스푼"의 사이즈만 학습하고 포스팅 하는 것입니다. 대신 그 빈도를 주 3회로 진행할 예정입니다. 작게 하는 것도 좋지만, 때로는 너무 비약적이거나 필자만 이해할 수 있게 작성하는 경우 또는 작게 쪼개서 큰 그림을 보기 어려울 경우가 존재할 것이라는 우려가 있습니다. 하지만 완벽하게 하기 위해 시도 조차..

이제 대망의 마지막인 const에 대해 살펴보도록 하자. 우선 const는 let과 대부분 동일하다(블록 레벨 스코프를 가지고, 변수 호이스팅과 TDZ를 가진다). 그 중 const 고유의 특징이라고 여겨지는 부분들에 대해 살펴보자. [ const의 특징 - 1 ] 선언과 초기화 const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화를 해야한다. 이 부분은 let과 다른 부분이다. 다음의 예시를 살펴보자. let x; console.log(x); // undefined x = 20; console.log(x); // 20 const x; // Uncaught SyntaxError: Missing initializer in const declaration [ const의 특징 - 2 ] 재할당 금지..

1편에서 var의 문제점 3가지에 대해 언급하였다. 이번에는 var 키워드의 문제를 보완하기 위해 나온 let과 const의 특징에 대해 살펴보도록 하자. [ let의 특징 - 1 ] 변수 중복 선언 금지 var와 달리 변수의 중복 선언을 금지한다. 따라서 변수를 중복으로 선언하면 SyntaxError가 발생하게 된다. let x = 10; console.log(x); // 10 let x = 20; // Uncaught SyntaxError: Identifier 'x' has already been declared [ let의 특징 - 2 ] 블록 레벨 스코프 모든 코드 블록(if문, for문, 함수, while문 등)내에서 let으로 선언된 변수는 지역 스코프를 가지게 된다. 따라서 코드 블록 밖에서..

웹 개발 취준생이라면 면접 질문을 준비하면서 무조건 접해보았을 준비 대목인 "var vs. let vs. const"에 대해 정리하고자 한다. let과 const는 ES6부터 제공된 업데이트 항목이며, 그 이전에는 var를 사용하여 변수를 선언하였다. 하지만, var의 아주 고질적인 문제가 있었기에 ES6 이후에는 var 사용을 지양하고 let과 const로만 변수를 선언할 것을 권고하고 있다(초보자에게 가장 좋은 방법은 const로 변수를 선언하고 재할당이 이루어지는 변수에 대해서만 let을 사용하는 것이 좋다.). 그렇다면 var에는 어떠한 문제가 있었던 것일까? [ var의 문제점 - 1 ] 변수 중복 선언 허용 var로 변수 선언을 하게 되면 변수의 중복 선언이 가능해진다. 따라서 다음과 같은 변..

HTML 파일에 JavaScript 파일을 연결하는 방법은 아래와 같이 head 요소 내에 script 요소를 작성하는 것이다. script요소의 소스코드로 main.js를 넣은 것을 확인할 수 있다. 잠깐! 이렇게 작성한 경우 어떻게 브라우저는 이 파일을 렌더링할까?? STEP1) 브라우저가 html 파일을 다운받고, html 선언(DOCTYPE html)에서부터 한 줄씩 내려가며 동작하게 된다. STEP2) script요소를 만나면, js파일이 있어야함을 확인하고 html 파일을 읽어나가는 작업을 일시중지하게 된다. STEP3) js 파일을 브라우저 상에 fetching한 뒤에 js 파일을 실행한다. STEP4) js 파일을 모두 실행한 뒤에 다시 일시정지하였던 html 파일을 읽어나가면서 한 줄씩 ..