DEV/JavaScript

Promise 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한 번에 처리하는 데도 한계가 있다. ES6에서 비동기 처리를 위한 또 다른 패턴으로 Promise를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. Promise 생성자 함수를 new 연산자와 함꼐 호출하면 프로미스(Promise 객체)를 생성한다. ES6에서 도입된 Promise는 호스트 객체가 아닌 ECMAScript 사양에 정의된 표준 빌트인 객체다. Promise 생성자 함수는 비동기 처리를 수행할 콜백..

Ajax Ajax 란? Ajax(Asynchronous JavaScript and XML)란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. Ajax의 등장으로 서버로부터 웹페이지의 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹페이지를 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 변경할 필요가 있는 부분만 한정적으로 렌더링하는 방식이 가능해졌다. 이를 통해 브라우저에서도 데스크톱 애플리케이션..

비동기 프로그래밍 동기 처리와 비동기 처리 함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜 스택)에 푸시되고 함수 코드가 실행된다. 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거된다. 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문이다. 이처럼 함수의 실행 순서는 실행 컨텍스트 스택으로 관리한다. 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 동시에 2개 이상의 함수를 동시에 실행할 수 없다는 것을 의미한다. 실행 중인 실행 컨텍스트를 제외한 모든 실행 컨텍스트는 모두 실행 대기 중인 태스크 ..

정규표현식(regular expression)은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식언어(formal language)다. 정규표현식은 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 제공한다. 정규식 객체를 만들 땐 두 가지 문법이 사용된다. 정규 표현식 리터럴과 RegExp 생성자 함수를 사용할 수 있다. 일반적으로는 정규 표현식 리터럴을 사용한다. const target = 'Is this all there is?; // pattern : is // flag: i // 대소문자 구분없이 검색한다. const regexp = /is/i; // test 메서드는 target 문자열에 대해 정규 표현식 regexp의 패턴을 검색하여 // 매칭 결과를 ..

논리 연산자를 사용한 단축 평가는 "논리 합 또는 논리 곱 연산자 표현식 의 평가 결과는 불리언 값이 아닐 수도 있다. 논리 합 또는 논리 곱 연산자 표현식 은 언제나 2개의 피 연산자 중 어느 한쪽으로 평가된다." 라는 것이다. 예제를 보면 "Apple" && "Banana" // -> "Banana" 논리 곱 연산자는 좌 항에서 우 항으로 평가가 진행되고 두개의 피 연산자가 모두 true 로 평가될때만 true 가 반환된다. 첫번째 피 연산자인 "Apple"이 문자열 이기 때문에 Truthy 한 값 이기 때문에 true 로 평가된다. 거기서 끝나지 않고 두번째 피 연산자도 평가해 보아야 하기 때문에 두번째 피 연산자가 논리 곱 연산자 표현식 의 평가 결과를 결정하게 된다. 이때 논리 곱 연산자는 논리..

Map 객체는 키와 값의 쌍으로 이루어진 컬렉션이다. Map 객체는 객체와 유사하지만 차이가 있다. 구분 객체 Map 객체 키로 사용할 수 있는 값 문자열 또는 심벌 값 객체를 포함한 모든 값 이터러블 X O 요소 개수 확인 Object.keys(obj).length map.size Map 객체는 Map 생성자 함수로 생성한다. Map 생성자 함수에 인수를 전달하지 않으면 빈 Map 객체가 생성된다. const map = new Map(); console.log(map);// Map(0) {} Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성한다. 이때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요소로 구성되어야 한다. const map1 = new Map([['key1', ..