어서와, 개발은 처음이지?

자바스크립트는 웹페이지를 동적으로 변화시키기 위해 태어났고, 이러한 태생 덕분에 필연적으로 비동기처리 형태를 갖게됐습니다. dom 조작을 위해 javascript 코드가 동작하는 와중에도 웹 페이지가 멈추지 않도록 해야했기 때문이죠. 이번 글에서는 자바스크립트에서 비동기를 처리하는 방식인 callback과 callback의 문제점, ES6에 포함된 promise가 이를 어떻게 해결하는지에 대해서 알아보겠습니다. (비동기가 어떻게 동작하는지에 대한 내용은 추후에 따로 다루겠습니다. 이번 글에서는 callback과 promise에 대한 부분만 살펴보겠습니다.) 1. 비동기와 callback 자바스크립트는 싱글 스레드로 동작합니다. 그럼에도 javascript가 병렬적으로 비동기 코드를 실행하는 것처럼 보이는..

간만에 기획 카테고리에서 일반 자바스크립트 글로 돌아왔습니다. 당분간 프로토타입(Prototype), 비동기 : 콜백(Callback)/프로미스(Promise), 제네레이터(Generator), async await에 대한 내용을 작성할 예정인데, 이들에 대해서 일반적으로 다루지 않는 지식들을 좀 더 깨우치면 기획 카테고리에 추가로 작성하겠습니다. 1. 프로토타입 명세에 따르면 자바스크립트 객체에는 [[Prototype]] 이라는 내부 프로퍼티(프로토타입 링크)가 있고, 다른 객체를 참조하는 레퍼런스로 사용합니다. 객체에서 프로퍼티를 탐색할 때 객체 내에 프로퍼티가 존재하지 않으면 undefined를 출력하고 끝나는게 아니라 [[Prototype]] 참조를 따라가면서 프로퍼티가 존재하는지 탐색합니다.(프..

이번 글에서는 자바스크립트 Array(배열) 객체의 메서드인 map에 대해 작성하겠습니다. map은 forEach와 마찬가지로 Array의 각 요소를 순회하며 callback 함수를 실행합니다. 다만, callback에서 return 되는 값을 배열로 만들어냅니다. 1. [].map(callback, thisArg) 기본적인 map의 사용법은 아래와 같습니다. const arr = [0,1,2,3]; let squaredArr = arr.map(function(element){ return element * element; }); // 혹은 arrow 함수 가능 squaredArr = arr.map(element => element * element); console.log(squaredArr); // ..

이번 글에서는 자바스크립트 Array(배열) 객체의 메서드인 forEach에 대해 작성하겠습니다. forEach는 for문과 마찬가지로 반복적인 기능을 수행할 때 사용합니다. 하지만 for문처럼 index와 조건식, increase를 정의하지 않아도 callback 함수를 통해 기능을 수행할 수 있습니다. 1. [].forEach(callback, thisArg) 기본적인 forEach의 사용법은 아래와 같습니다. const arr = [0,1,2,3,4,5,6,7,8,9,10]; arr.forEach(function(element){ console.log(element); // 0 1 2 3 4 5 6 7 8 9 10 }); // 혹은 arrow 함수 가능 arr.forEach(element => co..

자바스크립트의 문법에 대한 글을 검색하면 대부분 let, const 혹은 화살 함수(arrow function)에 대한 이야기가 주를 이룹니다. 이번 시간에는 흔히 알려지지 않았지만 유용한 비구조화 할당 문법을 소개하고자 합니다. 정의 모질라 형님들의 문서에 의하면 '비구조화 할당(destructuring assignment) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식(expression)'입니다. 간단하게 정리하면 배열 [], 혹은 객체 {} 안의 값을 편하게 꺼내 쓸 수 있는 문법입니다. 기본 문법(배열) 배열에서의 적용은 아래와 같습니다. [a1, a2, ...rest_a] = [1, 2, 3, 4, 5, 6, 7, 8, 9]; console..

(2020.01.29) 스코프 관점에서 볼 수 있도록 새로 작성했습니다. 자바스크립트에는 클로저(Closure)라는 개념이 존재합니다. 프로토타입 기반의 언어인 자바스크립트는 클로저를 통해서 클래스 기반 언어처럼 캡슐화, 모듈화 작업을 수행할 수 있습니다. 또한, let과 const가 없던 시절부터 변수의 제어를 도왔습니다. (var 변수는 함수 범위에서 전역적이기 때문에 종종 문제가 발생합니다.) 클로저 모질라 형님들의 도큐먼트에 의하면 '클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.' 라고 나와있습니다. 그냥 봤을땐 이게 뭔 개소리야? 싶습니다. 간단하게 정리하면 함수 밖에서 선언된 변수를 함수 내부에서 사용할 때 클로저가 생겨난다고 할 수 있습니다. function outer(){ var ..

메모리는 변수나 값이 저장되는 공간입니다. 메모리에 대한 이야기가 낯설다면, 내 코드가 실행될 때 내가 선언한 변수, 함수, 실행문들이 어딘가에 담겨지고, 그곳이 메모리구나 정도로 생각하시면 되겠습니다. 클로저(Closure)에 대한 이해를 돕기위해, 메모리 측면에서 변수나 함수의 파라미터가 함수 안에서 어떻게 동작하는지 알아보는 시간을 갖겠습니다. mutable 객체와 immutable 객체 자바스크립트 자료형 중 String(문자열), Number(숫자), Boolean(참/거짓), undefined, null은 immutable(변경불가능한) 객체 입니다. 반대로 Function(함수), Array(배열), Object(객체)은 mutable(변경가능한) 객체 입니다.(immutable하지 않은 모..

(안내) 호이스팅의 원리에 대한 글을 추가로 포스팅했습니다. (19.10.13) 자바스크립트의 변수는 다른 언어들과 조금 다르게 동작합니다. 이는 때때로 개발자로 하여금 의도하지 않은 결과를 발생시키기도 합니다. es2015 이후로 let이나 const를 사용하여 예방할 수 있지만 Closure같은 문법들의 효용성을 이해하기 위해서 고전 자바스크립트가 가졌던 특징을 다지고 가는것이 좋겠습니다. var 변수의 의도치 않은 현상 잠시 아래 코드를 보겠습니다. if(true){ var name = 'yuddomack'; } console.log(name); for(var i=0; i

(19.07.11.안내)이론적인 내용이 궁금하시다면 자바스크립트 스코프(scope)도 읽어봐주세요 자바스크립트는 var 문법을 통해 변수를 선언할 수 있습니다. 또한 es2015부터 let과 const라는 문법으로도 선언할 수 있게 되었습니다.모질라 형님들의 문서에 따르면 var은 함수 스코프(function-level scoped), let과 const는 블록 스코프(block-level scoped)를 갖는다고 합니다. 몇가지 예제를 통해 var, let, const의 특징과 함수 스코프와 블록 스코프의 차이점을 알아보겠습니다. 블록 스코프 블록 스코프는 중괄호{ }로 감싸진 범위를 말합니다. if(true){ var variable1 = 'I am in a block'; let variable2 =..