짹뚜 스튜디오

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 열다섯 번째인 new, Constructor, instanceof and Instances 항목을 공부하면서 간단하게 작성한 글이다. 동일한 로직을 가진 객체를 여러 개 만들 때 각 객체마다 반복해서 생성을 한다면 비효율적이다. 그래서 객체의 구조 또는 blueprint를 만들어서 재사용을 하게 되면 효율적으로 여러 개의 객체를 생성할 수 있다. 이때 사용할 수 있는 것이 Constructor 함수 (생성자 함수)이다. Constructor (생성자) 함수 생성자 함수는 객체를 만들어내는 역할을 한다. 객체를 return 하는 Factory 함수와 동일하게 객체를 만들어내는 역할이지만 Constructor 함수는 객체를 return 하지..

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 열다섯 번째인 this, call, apply and bind 항목을 공부하면서 간단하게 작성한 글이다. this 자바스크립트에서 this는 현재 실행 컨텍스트를 담고 있는 객체를 의미한다. 여기에서 실행 컨텍스트 (Execution Context) 란 쉽게 말해서 현재 코드가 실행되고 있는 환경이라고 한다. 브라우저의 콘솔에서 this를 확인해보면 Global 실행 컨텍스트인 window가 출력되는 것을 볼 수 있다. 왜냐하면 현재 this가 Global 환경에서 호출되었기 때문이다. console.log(this); // window 그렇다면 다음과 같이 객체 안에 함수가 있다고 가정해보자 function aWhoIsThis(){ c..

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 열네 번째인 Factories and Classes 항목을 공부하면서 간단하게 작성한 글이다. 기본적으로 객체를 만들려면 다음과 같이 작성하면 된다. const dog = { name: 'Max', eat: function(){ return `Max eats`; } } 그리고 만약 dog와 동일한 property를 가지고 있지만 value만 다른 객체를 만들고 싶다면 동일한 코드를 여러 번 작성해주면 된다. const dogMax = { name: 'Max', eat: function(){ return `Max eats`; } } const dogBaduki = { name: 'Baduki', eat: function(){ return ..

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 열세 번째인 DOM and Layout Trees 항목을 공부하면서 간단하게 작성한 글이다. 브라우저가 html 파일을 메모리에 보관할 수 있는 object 형태로 변환시킨 후 Tree 구조를 만들어낸다. 이것을 Document Object Model (DOM)이라고 부른다. DOM을 이용해서 자바스크립트로 웹페이지를 제어하는 것이 가능하다. 따라서 자바스크립트로 웹페이지를 수정할 때 html 원본 파일 조작하는 것이 아닌 DOM을 조작하는 것이다. Node vs Element node란 임의의 DOM 객체를 얘기한다. 즉, DOM tree에 존재하는 모든 것들을 node라고 하고 element는 그러한 node 중에서 div, a, h..

논리 연산자 Expression은 왼쪽에서 오른쪽으로 평가가 되는데 만약 Expression의 최종 결과값이 결정된다면 뒤에 남은 평가 과정을 생략하고 최종 결과값을 결정한 피연산자를 return 한다. 이것을 Short-circuiting (단축 평가)라고 한다. Short-circuiting은 불필요한 작업을 수행하지 않게 함으로써 효율적으로 값을 도출해낸다. OR (||) 연산자 두 피연산자가 있는 경우 하나만 truthy어도 최종 결과가 true이기 때문에 왼쪽부터 평가를 진행하면서 왼쪽 피연산자가 truthy면 그 즉시 Short-circuiting을 진행하고 왼쪽 피연산자를 return 한다. 만약 왼쪽이 falsy면 오른쪽 피연산자를 return 한다. const a = 0 || 2; //왼..

Arguments(전달인자)와 가장 많이 헷갈리는 용어는 Parameter(매개변수)이다. 둘의 차이점은 Parameter는 함수 정의에서 나열되는 변수의 이름이고 Arguments는 함수를 호출할 때 전달하는 값이다. //여기에서 x와 y는 Parameters이다. function func1(x, y){ return x + y; } //여기에서 3과 5는 Arguments이다. func1(3, 5); 함수를 호출할 때는 항상 Parameter가 있는 만큼 Arguments를 같이 보내준다. 그러나 자바스크립트 함수의 특성 중 하나가 Paramter를 나열하지 않은 상태에서 원하는 만큼의 Arguments를 보내도 에러가 발생하지 않는 것이다. 그것이 가능한 이유는 자바스크립트의 모든 함수에는 argum..

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 열한 번째인 Javascript Engine 항목을 공부하면서 간단하게 작성한 글이다. 자바스크립트 엔진은 자바스크립트 코드를 Bytecode로 변환하고 실행해주는 프로그램이다. 브라우저마다 사용하는 자바스크립트 엔진의 동작방법은 자세히 보면 다르지만 비슷한 개념을 가지고 있기 때문에 어떤 식으로 자바스크립트 코드가 실행이 되는지 간단하게 알아보려고 한다. Parsing 일단 자바스크립트 엔진이 자바스크립트 코드를 input으로 받아서 제일 먼저 해주는 것이 Parsing이다. Parsing 이란 자바스크립트 코드를 토큰으로 만든다음에 Abstract Syntax Tree (AST)로 변환한다. 위 이미지는 변수 선언과 할당을 AST 형..

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 열 번째인 setTimeout, setInterval and requestAnimationFrame 항목을 공부하면서 간단하게 작성한 글이다. setTimeout setTimeout은 특정 시간이 지난 후에 함수를 호출할 때 사용하는 Web API이다. let timeoutID = setTimeout( foo1, 1000, arg1, arg2, ... ); 첫 번째 인자로는 실행할 함수를 받고 두 번째 인자로는 몇 초가 지난 뒤 실행할지 millisecond로 받는다. 그래서 위 코드에서는 1000ms = 1초 후에 foo1이라는 함수를 호출하라는 의미가 된다. 그리고 setTimeout 함수는 양의 정수 값을 반환하는데 이것은 setT..

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 아홉 번째인 Message Queue and Event Loop 항목을 공부하면서 간단하게 작성한 글이다. Callback Queue(콜백 큐) Web APIs의 비동기 요청들의 결괏값을 저장하는 공간이다. 예를 들어, setTimeout(remove, 1000)을 호출하면 Web APIs에서 타이머를 실행시키고 1초 후, Callback Queue에 remove 함수를 넣는다. 이벤트 루프 이벤트 루프가 하는 일은 단순하다. 계속해서 Call Stack과 Callback Queue를 주시해서 만약 Call Stack이 비어있다면 Callback Queue의 첫 번째 함수를 가져와서 Call Stack에 넣는다. console.log("..

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 여덟 번째인 IIFE, modules and namespace 항목을 공부하면서 간단하게 작성한 글이다. 모듈이란? 프로그램의 기능을 독립적인 작은 부품들로 나눈 것을 모듈이라고 한다. 모듈을 하나의 파일로 볼 수도 있는데 거기에는 특정한 목적을 가진 함수들 또는 클래스 하나로 구성되어있다. 모듈의 장점은 다음과 같다. 유지보수: 프로그램의 기능들이 모듈로 되어있다면, 각 기능들을 손쉽게 수정하고 개선할 수가 있다. 네임스페이스: 함수 또는 블록 스코프 외에 다른 곳에 변수를 선언하면 모두 전역 변수가 되는데, 그러면 해당 변수가 필요하지 않은 곳에서도 접근이 가능해지게 된다. 이런 점을 프로그래밍할 때 지양하기 때문에 모듈을 통해서 해..