자바스크립트의 동기와 비동기자바스크립트는 싱글 스레드 언어이기 땜누에 한 번에 하나의 작업만 수행할 수 있다. 즉 이전 작업이 완료되어야 다음 작업을 수행할 수 있게 된다는 얘기다. 우리가 프로그래밍을 하면서 일반적으로 각 함수와 코드들이 위에서 아래로 차례대로 동작하는 방식이라고 할 수 있다. 이러한 코드의 순차 실행을 동기(Synchronous)라고 부른다. 동기 방식은 간단하고 직관적이지만 작업이 오래 걸리거나 응답이 늦어지는 경우 전체적인 성능과 사용자 경험에 영향을 줄 수 있다. 예를 들어 서버에 데이터를 요청하고 응답을 받아야 하는 작업이 있다면 응답이 올 때까지 다른 작업을 하지 못하고 대기해야 하기 때문이다. 이렇게 되면 프로그램의 흐름이 멈추거나 지연될 수 있다.따라서 자바스크립트는 여러..

자바스크립트는 싱글 스레드 언어라는 말을 들어본 적이 있는가? 싱글 스레드는 스레드가 하나뿐이라는 것으로 한 번에 하나의 작업만 처리할 수 있다는 것을 의미한다. 반면 Java나 Python는 멀티 스레드를 지원하여 원하는 코드 로직을 동시에 수행시키는 멀티 작업이 가능하다. 그런데 웹 애플리케이션에서는 네트워크 요청이나 이벤트 처리, 타이머와 같은 작업을 멀티로 처리해야 하는 경우가 많다. 만약 싱글 스레드로 브라우저 동작이 한 번에 하나씩 수행하게 되면 우리가 파일을 다운로드 받을 동안 브라우저는 파일을 다 받을 때까지 아무것도 못하고 멈춰서 대기해야 할 것이다. 따라서 파일 다운로드, 네트워크 요청, 타이머, 애니메이션 같은 오래 걸리고 반복적인 작업들은 자바스크립트 엔진이 아닌 브라우저 내부의 멀..

동기식 처리 모델(Synchronous processing model)은 직렬적으로 태스크(task)를 수행한다. 즉 로직이 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기하게 된다. 예를 들어 서버에서 데이터를 가져와 화면에 표시하는 작업을 수행할 때 서버에 데이터를 요청하고 데이터가 응답될 때까지 이후 태스크들은 블로킹(blocking, 작업 중단)된다. 아래는 동기식으로 동작하는 코드의 예시. 순차적으로 실행된다.function func1() { console.log('func1'); func2();}function func2() { console.log('func2'); func3();}function func3() { console.log('func3');}func1(..

Symbol이란?1997년 자바스크립트가 ECMAScript로 처음 표준화된 이래로 자바스크립트는 6개의 타입을 가지고 있었다.[원시 타입(primitive data type)]BooleannullundefinedNumberString[객체 타입(Object type)]Object심볼(symbol)은 ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다. 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다. Symbol의 생성심볼은 아래의 3가지 방법으로 생성할 수 있다.Symbol()Symbol.for()Symbor.iteratorSymbol()Symbol은 Symbol() 함수로 생성할 수 있다. 이때 생성된 심볼은 객체가 아..

전개 연산자(...)는 ES6에서 새로 도입된 문법이다. 이 전개 연산자를 사용하는 spread와 rest는 서로 완전히 다르지만 한편으로는 은근히 비슷하다. spreadspread라는 단어는 펼치다, 퍼뜨리다라는 의미를 가지고 있다. 이 문법을 사용하면 객체 또는 배열을 펼칠 수 있다. 예를 들어 다음과 같은 객체들이 있다고 가정해 보자.const slime = { name: '슬라임'};const cuteSlime = { name: '슬라임', attribute: 'cute'};const purpleCuteSlime = { name: '슬라임', attribute: 'cute', color: 'purple'};console.log(slime);console.log(cuteSlime);c..

비구조화 할당(destructuring assignment) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있도록 하는 자바스크립트의 표현식이다. 쉽게 말하면 배열 혹은 객체 안의 값을 편하게 꺼내 쓸 수 있도록 해 주는 문법이라는 것이다. 객체의 비구조화 할당 우선 아래의 예시에서부터 시작해 보자.const ironMan = { name: '토니 스타크', actor: '로버트 다우니 주니어', alias: '아이언맨'};const captainAmerica = { name: '스티븐 로저스', actor: '크리스 에반스', alias: '캡틴 아메리카'};function print(hero) { const text = `${hero.alias}(${hero...