-

콜백 지옥 비동기 프로그래밍을 사용하다 보면, 비동기 호출에 따른 후속 처리를 진행하면서 콜백 함수를 중첩해서 사용하게 되는 경우가 있다. get('/step1', a => { get(`/step2/${a}`, b => { get(`/step3/${b}`, c => { get(`/step4/${c}`, d => { // do something } } } } 이렇게 중첩 함수를 호출하면서 복잡도가 높아지는 현상을 콜백 지옥이라고 부른다. 다음과 같은 코드는 가독성을 나쁘게 하며, 개발 경험 면에서도 부정적인 영향을 끼친다. 또한 비동기 프로그래밍을 사용하면 에러를 캐치하지 못한다는 치명적인 단점이 있다. Promise의 등장 Promise는 ES6에서 도입된 ECMAScript 사양의 표준 빌트인 객체이다..

브라우저에서는 특정 사건(버튼 클릭, 마우스 스크롤 등)이 발생하면 이벤트를 발생시킨다. 이 때 브라우저가 이벤트를 감지하면 어떤 함수를 수행하도록 이벤트 핸들러를 등록할 수 있다. 그러면 사용자는 애플리케이션과 상호작용이 가능해진다. 이러한 방식의 프로그래밍을 이벤트 드리븐 프로그래밍 이라고 한다. 이벤트 핸들러 등록 방식 이벤트 핸들러 어트리뷰트 방식 버튼 함수 호출문을 할당하여 이벤트 핸들러로 등록한다. 이 경우에는 HTML과 자바스크립트가 섞여있기 때문에 관심사를 분리하기 어렵다는 단점이 있다. 하지만 React/Vue/Angular와 같은 SPA라이브러리에서 이러한 어트리뷰트 방식으로 이벤트를 처리하는 데, HTML, CSS, 자바스크립트 모두 뷰를 구성하기 위한 구성요소로 보기 때문이다. 이벤..

우리가 자바스크립트, html, css를 사용해서 만든 코드를 크롬에서는 어떻게 해석하여 화면에 보여줄까? 다른 프로그래밍 언어인 자바나 파이썬은 운영체제나 가상 머신 위에서 실행되지만, 자바스크립트는 브라우저에서 html, css과 함께 실행된다는 특징이 있습니다. 즉, 브라우저가 HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력해준다는 뜻입니다. 이 글에서는 이 과정에 대해 좀 더 상세하게 살펴볼 것입니다. 하루만에 제가 간단하게 만든 웹사이트가 있는데요, 다른 기술 없이 오직 html, css, javascript로만 만든 웹사이트입니다. 코드가 궁금하다면 깃헙에서 확인해주세요. 이 페이지를 로딩할 때 개발자 도구의 네트워크 탭을 살펴보면, 순차적으로 필요한 htm..

이전 글에서 자바스크립트는 원시값(primitive values)를 제외하고는 모두 내부적으로 객체처럼 동작한다는 언급을 했었는데요. 자바스크립트에서 배열은 원시값에 해당하지 않습니다. 그렇다면 자바스크립트에서 배열은 어떻게 동작할까요? 객체처럼 동작하는 자바스크립트의 배열 자바스크립트에서는 배열을 만들면, Object를 상속하는 Array 클래스를 사용하여 객체를 만듭니다. 예시 코드를 살펴보겠습니다. let arr = []; arr.push(1); arr.push(2); arr.push("Prince"); arr.push("Aditya"); let keys = Object.keys(arr).join(" "); let values = Object.values(arr).join(" "); console...

이전 글에서 살펴보았듯이, 자바스크립트는 프로토타입을 사용하여 객체 지향 프로그래밍을 할 수 있다. ES6에서 도입된 클래스는 자바나 C 언어의 클래스 문법과 유사하게 객체 생성할 수 있도록 한다. 자바스크립트의 클래스는 실제로는 함수처럼 동작하며, 기존의 프로토타입 생성 방식과 다르지 않다. 따라서 클래스를 문법적 양념(syntactic sugar)일 뿐이라고 말하기도 한다. 클래스가 도입된 이유 function Student(name,age){ this.name = name this.age = age } const student1 = new Student('king',20) // {'name': 'king', 'age': 20} const student2 = Student('king', 20); //..

자바스크립트는 객체지향 프로그래밍 언어이기 때문에, 자신이 속한 프로퍼티나 메서드를 참조할 수 있는 this 식별자를 사용할 수 있어야 한다. // 객체 리터럴 생성 const circle = { radius: 10, getDimeter() { return 2 * this.radius; } } console.log(circle.getDiameter); // 20 // 생성자 생성, new로 객체 생성 시 인스턴스 this를 암묵적으로 반환한다. function Circle(radius) { // this : 생성자 함수가 생성할 인스턴스 this.radius = radius; } Circle.prototype.getDiameter = function () { return 2 * this.radius; }..

자바스크립트는 객체지향 프로그래밍 언어, 프로타입 기반 언어이다. 자바스크립트는 명령형, 함수형, 프로토타입 기반, 객체지향 프로그래밍을 모두 지원하는 멀티 패러다임 프로그래밍 언어이다. 자바스크립트가 객체 지향 언어가 아니라고 오해하기 쉬운데, 자바스크립트는 원시 값을 제외한 함수, 배열, 정규 표현식 등은 모두 내부적으로 객체처럼 동작한다. 자바스크립트 ES6에서 클래스가 도입되었으나, 다른 일반적인 프로그래밍 언어와 다르게 내부적으로 프로토타입 기반으로 동작한다. 모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는다. 접근자 프로퍼티 __proto__를 통해 간접적으로 접근 가능하다. 상속과 인스턴스 생성 const circle1 = new Circle(); const circle2 = n..

들어가며 우리는 자바스크립트에서 코드를 작성할 때 많은 객체를 생성하고 접근하고 변경한다. const person = { name: 'Lee' } person.name = 'Kim'; person.age = 20; 다음은 person이라는 객체를 만들고 name, age라는 프로퍼티를 정의하는 코드이다. 이 때, 자바스크립트는 const 객체를 선언하기 때문에 메모리 공간에 객체 참조 공간을 할당하고, 값을 저장할 것이다. (변수에 대해서 궁금하다면 클릭) 그렇다면 자바스크립트에서는 프로퍼티에 대한 정보를 어떻게 관리할까? 내부 슬롯과 내부 메서드 모든 객체는 내부 슬롯과 내부 메서드를 가진다. (관련 문서) 이는 자바스크립트 엔진의 내부 로직이다. 하나를 예로 들자면 모든 객체는 [[Prototype]..

자바스크립트 ES5까지 변수를 선언할 수 있는 유일한 방법은 var을 사용하는 것이었다. 그러나, 다른 var 키워드는 다른 언어와는 다른 특별한 특징들이 있어, 주의를 기울이지 않으면 몇가지 부작용이 발생할 수 있다. 따라서 이러한 단점을 보완하기 위해서 ES6에서는 새로운 변수 선언 키워드인 let, const를 도입하였고, 이 글에서는 이 세가지 키워드에 따른 작동 방식 및 차이에 대해서 소개하려고 한다. Var 키워드의 특징 1. 중복 선언 허용 var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 허용된다. 따라서 의도치 않게 변수값이 재할당될 수 있다. var x = 1; var y = 2; console.log(x); // 2 2. 함수 스코프 var 키워드로 선언한 변수는 오로지 ..

프로그래밍 언어에서의 함수는 일련의 과정을 statement로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 함수 내부에는 매개변수와 반환값으로 구성되어 있다. 함수를 사용하게 되면 필요할 때 여러번 호출할 수 있어 코드의 재사용 측면에서 유리하다. 코드를 재사용하게 된다면 유지보수가 편하고, 코드의 신뢰성과 가독성 면에서 유리하다. 함수 정의 방법 자바스크립트에서 함수를 정의하는 방법은 크게 4가지가 있다. function add(x, y) { return x + y; } // 1. 함수 선언문 var add = function(x, y) { return x + y; } // 2. 함수 표현식 var add = new Function('x', 'y', 'return x+y'); //..