Javascript

[JavaScript] 자바스크립트를 멀티 스레드처럼 사용하는 방법

자바스크립트는 싱글 스레드를 가지고 있는 언어이다. 옛날에 CPU 밈에서 나온 짤인데 포켓몬의 수 = 코어의 수, 팔의 수 = 쓰레드의 수이다. 스레드는 한번에 작업할 수 있는 수를 의미하는데, 자바 스크립트는 팔이 한개인 싱글 스레드이다. 싱글 스레드인 자바 스크립트는 한번에 하나의 작업밖에 하지 못하는데 이는 곧 속도 측면에서 느리다는 것을 의미한다. 자바스크립트는 비동기 방식을 통해 여러개의 작업을 동시에 하는 것 처럼 보이는 멀티 태스킹을 사용한다. Web API, Callback Queue, Event Loop 등을 통해 멀티스레드 처럼 보이게 하는 방식을 사용한다. 마치 게임 큐를 돌려놓고 다른 짓을 해도 큐는 계속 돌아가는것과 비슷한 원리라고 할 수 있다.

[JavaScript] 실행 컨텍스트 그리고 클로저

실행 컨텍스트클로저 ( execution context ) 실행 컨텍스트(execution context)는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 실행 컨텍스트는 자바스크립트 코드가 실행되는 환경으로, 모든 코드는 실행 컨텍스트 내부에서 작동된다. 함수가 실행되면 함수 실행에 해당하는 실행 컨텍스트가 생성되고, 콜스택에 쌓인다 그리고 스택이기에 LIFO 방식으로 실행하면서 전체 코드의 환경과 순서가 정해진다. 클로저 ( Closure ) 클로저는 함수와 함수가 선언된 렉시컬 환경의 조합이다. 보통 스칼라, 하스켈 등 함수형 프로그래밍 언어 에서 사용되는 특성으로, 자바스크립트 고유의 개념이 아니다.

[JavaScript] 스코프, 스코프 체인 , 렉시컬 스코프

스코프 ( Scope ) 스코프란 유효 범위로, 정의되어 있는 변수를 사용할수 있는 영역을 의미한다. 자바스크립트에는 크게 2가지 타입의 스코프가 있는데 전역 ( Global ) 과 지역 ( Local ) 로 나뉜다. 전역 상태란 함수의 외부에서 선언된 변수로, Local 상태는 함수안에 선언된 변수로, 그 함수에 대해 지역 변수를 갖는다. 지역 변수는 지역 범위 ( Local Scope ) 를 갖는다. let a = 1; function foo() { let b = 2; function bar() { let c = 3; console.log(a + b + c); // 6 } bar(); } 위 코드에서 a, b, c 는 모두 변수이다. a, b, c 는 모두 foo() 함수 내부에서 선언되었기 때문에 ..

[JS] var, let, const 의 차이점 ( Feat. 호이스팅 )

정리 var, let, const 는 모두 변수 선언자로 let, const 는 ES6에서 추가 되었다. 차이점은 변수 재선언과 재할당, 스코프 가 있다 var let const 스코프 Function Scope Block Scope Block Scope 재할당 / 재선언 재할당, 재선언 가능 재할당 가능 불가능 각 선언자의 특징 var console.log(a); // undefined var a = 1; console.log(a); // 1 var a = 2; console.log(a); // 2 if (true) { var a = 3; } console.log(a); // 3​ 변수의 중복 선언이 가능하다. 그래서 변수 a 는 2로 그리고 3으로 재할당된다. 함수 스코프를 가진다. 그래서 함수를 벗..

[JS] Virtual DOM 과 Real Dom 의 차이점

DOM ( Document Object Model ) : HTML 문서를 객체로 표현한 것. Virtual DOM vs Real DOM 현재 DOM 은 SPA 프레임 워크들의 대세로 인해 Virtual DOM 을 많이 쓰는 추세고, 최근에 뜨는 Svelte 는 Real Dom 을 사용한다고 해서 한번 정리해보았다. Virtual DOM Virtual DOM 은 Vue, React 에서 주로 사용된다. 실제 DOM을 건드리지 않고 가상으로 또 하나의 DOM 을 만들어, 현재의 DOM 과 비교 후 차이점 있는 DOM 만 업데이트 하는 방식으로, 이로 인해 Virtual DOM 을 쓰는 언어들의 불변성이 중요하다. Real DOM Real DOM 은 옛날 HTML 에서 쓰이다가 현재 Svelte 라는 프레임워..

[JS] Callback, Promise 그리고 Async/Await

비동기 처리를 동기 처리 하는 방법 동기와 비동기란? 동기적 처리와 비동기적 처리의 차이는 데이터의 요청과 결과가 동시적인지 아닌지에 대한 것이다. 동기적 처리는 서버에 요청을 하면, 얼마가 걸리던 기다려야한다. 예를 들어 치킨을 먹기 위해 치킨을 시켰는데 동기적 처리로 치킨을 시켰으면 치킨이 올때까지 아무것도 못하고 대기 해야한다는 뜻이다. 비동기적 처리는 그 동안 기다리면서 게임을 할 수도 있고, TV를 볼 수도 있고 아니면 둘 다 할 수도 있다는 것이다. 자바 스크립트는 싱글 스레드 언어기에 한번에 한가지 일만 가능하다. 그래서 이를 빨라 보이게 해결하려면 비동기적 처리가 필요한데 예를 들면 라면 끓일때 물을 끓이면서, 쪽파를 좀 썰어놓는다던가 하는 식으로 말이다. 콜백 함수 콜백함수는 특정 시점에..

[ JavaScript ] 자바스크립트 ES6, 그 이후 시리즈 02. ES8 (JS2017)

이전 글 2022.10.02 - [Javascript] - [JavaScript] ES5 vs ES6 차이 2022.12.22 - [Javascript] - [ JavaScript ] 자바스크립트 ES6, 그 이후 시리즈 01. ES7 (JS2016) 오늘은 ES8에 대해 알아보자. 참고로 정보는 https://www.w3schools.com/js/js_2017.asp 여기를 가장 많이 참고하고 있다. JavaScript ECMAScript 2017 W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS..

[ JavaScript ] 자바스크립트 ES6, 그 이후 시리즈 01. ES7 (JS2016)

2022.10.02 - [Javascript] - [JavaScript] ES5 vs ES6 차이 자바스크립트 버전은 ES6 이후로 매년 새로운 문법이 추가되어 왔다. 오늘은 그 첫 번째 버전인 ES7을 소개해볼까 한다. Exponentiation Operator (제곱 연산자) 원래는 Math.pow 를 써서 표현하였으나 Math.pow(2, 3); // 8 ES7에서는 이렇게 간단하게 표현이 가능해졌다. 이 식은 첫번째 연산자에 두 번째 연산자를 제곱하는 방식이다. 2 ** 3; // 8 Exponentiation Assignment Operator (제곱 할당 연산자) let a = 2; a **= 3; // 8 // a = a ** 3 Array.prototype.includes() 배열의 요소가..

[JavaScript] ES5 vs ES6 차이

ES5 vs ES6 의 차이 ECMAScripts 의 버전중 하나로 ES5 는 2009 년에 출시했고, ES6 는 2015년에 출시한 버전이다. 1. 데이터 타입의 변경 ( Data-types ) ES5 supports primitive data types that are string, number, boolean, null, and undefined. In ES6, there are some additions to JavaScript data types. It introduced a new primitive data type 'symbol' for supporting unique values. ES5 는 string , number , boolean , null , undefined 의 원시타입 데이터..