Web/JavaScript

Javascript 콜백 함수와 콜백 지옥, Promise와 Async/Await

Callback 함수 아래와 같은 setTimeout 예제에서 최상위 레벨의 실행이 끝나면 타임아웃 이후 실행된다. 그러나 분명하게 실행 순서를 정하고 싶은 경우(thrid함수를 정해진 시간 이후 실행시키고싶은 경우)라면 비동기 코딩 방법을 사용해야 한다. function first() { console.log(1) } function second() { setTimeout(() => { console.log(2) }, 0) } function third() { console.log(3) } // Execute the functions first() second() third() Output 1 3 2 여기서 타임아웃은 데이터를 갖고 있는 비동기 API 콜을 말한다. API 콜로부터 얻은 데이터를 활용하..

Javascript 이벤트 루프

Blocking 자바스크립트는 동기적으로 실행되는 싱글 스레드 프로그래밍 언어이다. 한 타임에 한 문장을 순차적으로 실행한다. 그러나 API 호출처럼 요청받는 데이터 크기에 의존한 시간, 네트워크 연결 속도 등등과 같이 많은 이유를 통해서 불확실한 실행 시간을 가진다. 만약 API 호출이 동기적으로 실해 된다면 브라우저는 API동작이 완료되기 전까지 스크롤링이나 버튼 클릭과 같은 유저의 동작을 받아들일 수 없게 된다. 이것이 Blocking(블록킹) 이다. 블록킹 이슈를 해결하기 위해서 브라우저 환경은 자바스크립트가 비동기적으로 접근 가능한 많은 Web API를 갖고 있다. 비동기적이란 병렬적으로 다른 연산들을 실행하는 것을 말하며, 순차적으로 실행하는 동기적과 반대되는 행위이다. 비동기적인 실행은 사용..

클로저

생소했던 개념인 클로저, 드디어 이해해서 매우 기쁘다 😆 클로저 클로저는 js의 고유한 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. 클로저는 함수와 함수가 선언되었을 때의 렉시컬 환경과의 조합이다. 렉시컬 스코프 function outerFunc() { var x = 10; var innerFunc = function () { console.log(x); }; innerFunc(); } outerFunc(); // 10 함수 outerFunc내에서 함수 innterFunc가 선언되고 호출되었다. 내부함수인 innterFunc는 자신을 포함하고 있는 외부함수 outerFunc의 변수 x에 접근이 가능하다. 스코프는 함수를 호출할 때가 아니라 함수를 어디에..

자바스크립트 자주 쓰는 Array 내장 함수들

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Indexed_collections#배열_객체의_메서드 Array 내장 함수들 forEach (callback ) 배열의 모든 요소에 대해 반복적으로 주어진 callback을 실행. var a = ['a', 'b', 'c']; a.forEach(function(element) { console.log(element);} ); // logs each item in turn arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Gl..

자바스크립트의 this, 함수 this 바인딩

모던 JavaScript 튜토리얼(https://ko.javascript.info/)을 읽고 정리한 내용입니다. 자바스크립트의 this, 함수 this 바인딩 자바스크립트의 this는 다른 프로그래밍 언어의 this와는 동작 방식이 다르다. 자바스크립트에서는 모든 함수에 this를 사용 가능하다. this는 런타임에 의해 결정되고 컨텍스트에 따라 달라진다. 같은 함수라도 다른 객체에서 호출했다면 this가 참조하는 값이 달라진다. let user = { name: "John" }; let admin = { name: "Admin" }; function sayHi() { alert( this.name ); } // 별개의 객체에서 동일한 함수를 사용함 user.f = sayHi; admin.f = sayH..

자바스크립트의 함수

서적 모던 자바스크립드 Deep Dive 을 읽고 정리한 글입니다. 12장 함수 일급 객체인 자바스크립트 함수 일급 객체란 ? 다음 조건을 만족하는 객체를 일급 객체라고 한다. 무명의 리터럴로 생성 가능 ( 런타임에 생성이 가능 ) 변수나 자료구조(객체,배열 등)에 저장할 수 있다. 함수의 매개 변수에 전달 가능. 함수의 반환값으로 사용 가능. 자바스크립트의 함수는 위 4개의 조건을 만족하므로 일급 객체이다. 함수가 일급 객체라는 말은 결국 함수 또한 객체라는 의미가 된다. 함수도 객체 처럼 값을 사용할 수 있는 곳( 변수 할당문, 객체 프로퍼트의 값, 배열 요소, 함수 호출의 인수, 반환문)이라면 어디서든지 리터럴로 정의 가능하며 런타임에 함수 객체로 평가 된다. 함수 리터럴 자바스크립트의 함수는 객체..