짹뚜 스튜디오

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 여덟 번째인 IIFE, modules and namespace 항목을 공부하면서 간단하게 작성한 글이다. IIFE란 선언되자마자 호출되는 함수를 말한다. (function func(){ console.log("hello"); })(); ES5에서 자주 사용되던 패턴인데 그 이유는 Function Scope만 존재했기 때문이다. 함수 내에 존재하는 변수들 외에는 모두 전역 스코프에 선언이 되어서 실수로 다른 곳에서 변수를 변경하는 일이 일어나는 것을 방지하기 위해 IIFE를 사용했다. (function func(){ var i = 10; })(); console.log(i); //Reference Error; ES6부터는 Block Sco..

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 일곱 번째인 Expression vs Statement 항목을 공부하면서 간단하게 작성한 글이다. Expression 값을 만들어내는 코드를 Expression (표현식)이라고 한다. 아래 코드들이 Expression의 예시이다. 2 + 3 Math.random() 1 == 2 Statement 어떤 동작을 수행하는 코드를 Statement 라고 한다. Statement는 값이 요구되는 곳에 사용될 수 없다. foo1(if(true){return 5;}); // 에러가 발생한다. 자바스크립트에서 Statement은 다음과 같다. if if-else while do-while for switch for-in debugger varaible..

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 여섯 번째인 Function Scope, Block Scope and Lexical Scope 항목을 공부하면서 간단하게 작성한 글이다. Scope(스코프)란 변수에 접근할 수 있는 범위를 얘기한다. 크게 Global Scope과 Local Scope가 있다. Global and Local Scope Global Scope는 전역 스코프로 변수를 코드 어디에서든 접근을 할 수 있다는 뜻이고 Local Scope는 지역 스코프로 해당 지역에서만 변수를 접근할 수 있다는 뜻이다. let a = 10; function func(){ let b = 20; console.log(b); // 20 } console.log(a); // 10 cons..

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 다섯 번째인 == vs === vs typeof 항목을 공부하면서 간단하게 작성한 글이다. 자바스크립트에서 두 변수가 같은지 확인하기 위해서 사용하는 연산자는 '=='와 '===' 이 있다. 두 연산자 모두 변수가 같으면 true 아니면 false를 반환한다. 두 연산자의 차이점은 '==' 은 피연산자들의 type이 다르더라도 값이 같으면 true를 반환하지만 '==='은 type과 값이 모두 같아야 true를 반환한다. 그래서 '==='은 strict equals 또는 identically equal 이라고도 한다. 그래서 두 변수가 동일한지 확인 할 때 주로 '==='을 사용한다. console.log(1 == '1'); // tru..

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 네 번째인 Implicit, Explicit 항목을 공부하면서 간단하게 작성한 글이다. Type Coercion (타입 변환) 이란 한 데이터 타입에서 다른 데이터 타입으로 변환하는 것을 얘기한다. 타입 변환은 두 가지 방법으로 할 수 있다. Implicit Coercion (암시적 변환) 암시적 변환이란 자바스크립트가 자동적으로 예상되는 타입으로 변환하는 것이다. 주로 서로 다른 타입의 데이터들을 연산 할 때 발생한다. console.log(5 - '2'); // 3 console.log(5 - true); // 4 console.log(5 + '3'); // '53' -> '+' 연산자는 string 타입으로 변환 후 합친다. 산술 ..

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 세 번째인 Value Types and Reference Types 항목을 공부하면서 간단하게 작성한 글이다. 자바스크립트에 존재하는 데이터 타입은 Value(값) 또는 Primitive Type과 Reference(참조) Type으로 나뉜다. Primitive Type에는 총 7가지가 존재한다. boolean number bigint string undefined null Symbol Reference Type은 다음과 같다. Object Function Array 두 Type의 차이점을 다음 예제들을 통해 알아보자. let a = 10; let b = a; 위 코드가 메모리에 어떤 식으로 저장되는지 간단히 그림으로 표현하면 다음과 같..

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 두 번째인 Primitive Data Types 항목을 공부하면서 간단하게 작성한 글이다. 자바스크립트에서 0.1 + 0.2를 해보면 0.3이 아니라 0.30000000000000004 가 나오는 것을 확인할 수 있다. 왜 이런 값이 나오는지 알아보려고 한다. 컴퓨터에서는 모든 값을 이진수로 저장을 한다. 자바스크립트의 number 타입들도 이진수로 저장이 되는데 실수를 이진수로 변환하는 데 사용하는 것이 IEEE 754 Floating Point Standard (부동소수점 방식) 이다. 아래와 같은 형식으로 이진수가 표현된다. Sign bit: 양수 (0) 와 음수 (1)를 1 bit로 표현한다. Exponent (지수): 11 bi..

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 두 번째인 Primitive Data Types 항목을 공부하면서 간단하게 작성한 글이다. let str = "hello"; console.log(str.length); // 5 위에 코드에서 str은 string 타입으로 생성이 되어있고 Primitive Data Type이기 때문에 메서드나 프로퍼티를 가질 수 없다. 그러나 다음 줄을 보면 객체처럼 메서드를 호출했는데도 오류가 발생하지 않은 것을 확인할 수가 있는데, 이것이 가능한 이유는 Wrapper Object 때문이다. Wrapper Object(래퍼 객체) 래퍼 객체란 말 그대로 Primitive Data Type을 감싸는 객체를 얘기한다. Primitive Data Type ..

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 두 번째인 Primitive Data Types 항목을 공부하면서 간단하게 작성한 글이다. Primitive Data Type 은 가장 기본이 되는 데이터 타입이자 변경이 불가능하며(immutability) 객체가 아니면서 메서드도 가지고 있지 않은 데이터이다. 자바스크립트에는 총 7개의 Primitive Data Type이 있다. boolean: true 또는 false 값을 가지고 있다. number: 64 bit로 이루어져 있고 모든 숫자 타입을 포함한다. 64비트 부동소수점 형이어서 -(2^53 - 1) ~ 2^53 - 1 사이의 값을 저장할 수 있다. bigint: number 타입이 가질 수 있는 숫자보다 더 큰 숫자를 나타내..

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 첫 번째인 Call Stack 항목을 공부하면서 간단하게 작성한 글이다. 자바스크립트 런타임 자바스크립트 런타임이란 자바스크립트가 구동되는 환경을 말하는데 주로 웹브라우저나 node.js를 얘기한다. 자바스크립트 런타임 안에 자바스크립트 엔진이 있고, 그중에 크롬과 node.js에서 사용하는 자바스크립트 엔진이 V8 엔진이다. V8은 자바스크립트를 바이트코드로 컴파일하고 실행한다. V8 엔진 안에 하나의 Heap과 하나의 Call Stack이 있다. Heap(힙): 변수와 객체의 메모리 할당이 이루어지는 곳 Call Stack(콜 스택): 코드를 읽고 함수의 실행 순서를 기록하는 곳. 함수가 호출되면 스택의 가장 위에 함수를 넣고 (pu..