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

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

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

이번 글에서는 자바스크립트 this가 어떻게 동작하는지 알아보겠습니다. 프로토타입을 먼저 쓸지, this를 먼저 쓸지 고민했는데 아무래도 this가 좀 더 쉬울 것 같네요 1. 오해 흔히(java에서) 클래스 내에서 사용하는 this 문법은 클래스(자세히는 인스턴스화 된 객체) 자기 자신을 뜻합니다. javascript에서도 this문법이 존재하는데, 하필 'java' script라는 비슷한 이름에, this가 존재하니 클래스 내 this처럼 동작을 할 것 같은 오해를 불러일으킵니다. (자바 안쓴지 너무 오래되서 용어 혼란이 있을 수 있습니다. 잘못된 부분은 댓글로 남겨주세요!) 물론 javascript에서 function과 this 문법, new 키워드를 사용해서 '클래스와 객체 생성' 형태를 묘사(다..

이번 글에서는 자바스크립트의 클로저(Closure) 현상에 대해서 알아보겠습니다. 일전에도 클로저에 대한 글을 작성한 적 있는데, 할머니가 이해할 수 있도록 리팩토링 하는 차원에서 새로 작성해보겠습니다. 1. 지극히 통상적인 설명 통상 클로저에 대한 예를 대표하는 코드는 아래와 같습니다. var name = "홀롤롤롤롤"; function outer() { /* 아우터 */ var name = "yuddomack"; function inner() { /* 이너 */ return name; } return inner; } var innerFunc = outer(); var myName = innerFunc(); console.log(`name : ${myName}`); // name : yuddomack ..

이번 글에서는 자바스크립트의 호이스팅(hoisting) 현상을 스코프 관점에서 이해해보도록 하겠습니다. 호이스팅 현상에 대해 좀 더 깊게 이해하기 위해, 본 글을 읽기 전에 자바스크립트 스코프 를 읽고 오시길 권장드립니다. 1. var 변수의 의도치 않은 현상 이전에 작성한 스코프(scope) 글을 보고 눈치 채셨거나, 이미 아시는분들도 계시겠지만 javascript에서 var 선언문을 사용하여 변수를 선언하면 아래와 같은 상황이 발생할 수 있습니다. if(true){ var name = 'yuddomack'; } console.log(name); // yuddomack for(var i=0; i

이번 글에서는 스코프에 대해 알아보겠습니다. 이 글을 보러 오셨다면 이미 스코프에 대해 알고 계시겠지만, 다른 분들을 위해 간단히 짚고 넘어가겠습니다. 아래 내용을 읽기 전에 자바스크립트 컴파일레이션에 관한 내용을 읽고 오시기를 권장합니다. 1. 스코프 스코프를 한마디로 정의하자면 '변수가 영향을 미치는 범위' 혹은 '변수의 유효 범위'라고 할 수 있습니다. (포괄적으로 말하면 '코드가 유효한 범위'라고 할 수 있겠습니다.) 거두절미하고 코드를 보겠습니다. var a = 10; function scope1(){ a = 20; console.log(a); // 20 } scope1(); console.log(a); // 20 var b = 10; function scope2(){ var b = 20; co..

이전 글에서 자바스크립트의 컴파일레이션 과정에 대해 알아보았습니다. 컴파일레이션은 스코프를 좀 더 쉽게 이해할 수 있는 초석으로, 이어서 스코프에 대한 글을 작성하는게 순서상 맞지만, 스코프를 나가면 호이스팅을, 호이스팅을 나가면 클로저로 계속 이어지기 때문에 js의 내장타입과 네이티브를 간단하게 소개하고 넘어가도록 하겠습니다. 1. 내장타입 우선 자바스크립트에는 내장타입라고 불리는 7가지 자료형이 존재합니다. 1. null 2. undefined 3. boolean 4. number 5. string 6. symbol (es6부터 추가됨) 7. object 이들 중 object를 제외한 모든 값은 변경 불가능한 값(불변값, immutable - 참조와 값의 개념에서의 불변으로, 현 토픽에서는 이해하지 ..

지금부터 다룰 내용들은 개인적으로 고급 개념이라고 생각합니다. 다만 저의 클라스가 아직 그 영역에 미치지 못하기에 초/중급자의 눈으로 뇌피셜을 섞어서 풀어내보겠습니다. 1. 개요 자바스크립트는 일반적으로 스크립트 언어로써, 인터프리터 언어로 분류되곤 하는데 실은 컴파일러 언어라고 합니다. 자바스크립트의 컴파일레이션은 코드가 실행되기 직전에 순식간에 일어나고, just in time 이라고 표현합니다. 컴파일레이션 과정을 이해하면 호이스팅, this 바인딩, let const 선언 등에서 일어나는 현상을 이해하는데 도움이 됩니다. 2. 컴파일레이션 3단계 자바스크립트 코드는 크게 3단계를 통해 해석(컴파일)됩니다. 1. 토크나이징 / 렉싱 : 코드를 의미있는 조각(token)으로 만드는 과정. (예) va..

이번 글에서는 자바스크립트 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..