JEEGOO의 개발 노트

리터럴(Literal) 컴퓨터 과학 분야에서 리터럴(literal)이란 소스 코드의 고정된 값을 대표하는 용어다 (위키백과) javascript뿐 아니라 프로그래밍을 공부하다보면 리터럴이란 용어를 자주 접하게 됩니다. 리터럴은 소스 코드의 고정된 값을 대표하는 용어라고 합니다. 이게 무슨 뜻일까요? 사실 위 설명 그대로의 의미지만 다르게 표현해보자면 문자 그대로의 값입니다. 여기서 상수와 헷갈리수도 있습니다만 이해하기 쉽게 javascript 코드를 예로 들어보겠습니다. const num = 1; // num은 상수이고 1은 10진수 정수 리터럴입니다. let str = '이름'; // str은 변수이고 '이름'은 문자열 리터럴입니다. const array = []; // [] = 배열 리터럴. cons..

목차 이벤트 루프? 호출 스택 이벤트 루프! (feat. 이벤트 큐) JavaScript는 싱글 스레드 언어입니다. 즉, 한번에 하나의 작업만을 처리할 수 있습니다. 하지만 개발하다보면 비동기 코드를 작성하게 되는데 이 코드는 동시적으로 여러 개의 작업이 수행됩니다. 싱글 스레드 언어인 JavaScript에서 이런 동시성을 어떻게 처리하는걸까요. 이벤트 루프 JavaScript 동시성에 대해 검색을 하다보면 이벤트 루프라는 용어가 항상 등장합니다. MDN에서도 이벤트 루프를 JavaScript의 동시성 모델의 기반이라고 설명하고 있습니다. 반면 ECMAScript의 공식 스펙 문서에 이벤트 루프라는 용어는 등장하지 않습니다. 도대체 이벤트 루프가 무엇일까요? 이벤트 루프를 이해하려면 먼저 호출 스택을 알..

목차 클로저란? 이해하기 클로저의 특징 클로저(Closure)란? Javascript로 개발을 하다보면 알든 모르든 자주 쓰게 되는 기법입니다. 클로저(Closure)의 사전적 정의는 폐쇄입니다. MDN 에서는 `함수와 함수가 선언된 어휘적 환경(Lexical Environment)의 조합`이라고 말합니다. 생활 코딩에서는 클로저(Closure)가 `내부 함수가 외부 함수의실행 문맥에 접근할 수 있는 것`이라고 합니다. ※실행 문맥(Execution Context)이란? JS가 실행되는 환경을 말하며 각 실행 문맥은 식별자(변수, 객체, ...) 및 this, outer 등JS 코드가 실행되는데 필요한 모든 상태들을 가지고 있습니다.함수가 실행되면 해당 함수의 실행 문맥이 생성되며 종료될 때 소멸합니다...

목차 실행 문맥(Execution Context)이란? Execution Context Stack this 실행 문맥(Execution Context)이란? 말 그대로 JavaScript가 실행되는 환경을 일컫는 개념입니다. 모든 실행 문맥은 다음과 같이 구성되어 있습니다. code evaluation state(해당 실행 문맥의 실행, 중단 등에 필요한 모든 상태를 가지는 컴포넌트) Relam(활성 객체를 가진 컴포넌트) Function(함수 실행 문맥일 때 해당 함수 객체를 가지는 컴포넌트) ScriptOrModule(해당 실행 문맥의 스크립트 요약 정보와 연관된 모듈 정보를 가지는 컴포넌트) 그리고 ECMAScript Code의 실행 문맥은 추가적으로 아래의 컴포넌트를 가지며 해당 포스팅에서 중점적..

※이 글은 Rhino(Mozilla, Java)엔진을 기준으로 작성하였습니다. # 호이스팅(Hoisting)이란? 호이스팅이란 코드가 실행되기 전(컴파일 시점), 선언을 실행 문맥(컨텍스트)에 저장하고 이후 코드가 실행되는 것을 말합니다. 즉, 선언 코드보다 초기화 등의 코드가 먼저 작성되어도 정상적으로 동작하는 것이죠. 선언이란 함수 선언(function, function*, class) , 변수 선언(var, const, let)을 말하며 이 중에서 const, let은 호이스팅의 대상이지만 TDZ(Temporal Dead Zone)의 제한으로 초기화 전까지 해당 변수에 접근할 수 없으며 class은 호이스팅의 대상이 아닙니다. 종종 끌어올리다라는 표현 때문에 선언 코드가 물리적으로 상단으로 옮겨진 ..

# 스코프(Scope)란? JavaScript에서 변수, 객체, 함수가 접근할 수 있는 유효 범위이며 현재 실행되는 실행 문맥의 어휘적 환경(Lexical Environment)을 말합니다. 어휘적 환경은 어휘 중첩 구조(Logical nesting of Lexical Environment values)를 기반으로 특정 변수 및 함수에 식별자를 연결하는 사양입니다. Scope는 전역 스코프와 지역 스코프가 있습니다. 또한 함수나 객체, 변수가 선언(function, function*, class, var, const, let)될 때 결정이 되며 이러한 특성을 Lexical Scope라고 합니다. # 알아보기 전역 스코프 함수의 안이든 밖이든, 어느 위치에서나 접근할 수 있는 스코프를 말합니다. ES5 문..

◎Call by value & Call by reference ●Path by Value (값에 의한 전달) 아래 예제에서 primitive type 변수 value를 인자로 넘기면 해당 값은 복사되어 매개변수로 전달된다. 즉, 복사된 값이 전달 된 것이므로 param의 값이 변경되어도 value에는 영향을 끼치지 않는다. const value = 1; function example( param ){ param = 0; console.log(param); // 0 console.log(value); // 1 }; example( value ); ●Path by Reference (참조에 의한 전달) 아래 예제에서 참조타입 변수 originObject를 인자로 넘기게 되면 해당 객체의 주소 값을 가진 참조..

Ajax(Asynchronous JavaScript and XML) 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식이며 XMLHttpRequest객체를 이용하여 Web에서 화면을 갱신하지 않고 Server로부터 Data를 가져올 수 있다. ※동기와 비동기 -요청 후 응답을 받고나서 다음 동작이 이루어지면 동기 -요청 후 응답여부에 상관없이 동작하면 비동기 ※XHR -XHR(XML Http Request). 즉 HTTP request를 서버에 보낸다는 의미다. ●AjaxAJAX는 XHR객체를 형성하고 이 객체의 콜백을 만들고, 그리고 html메소드와 url을 결정한 뒤 XHR객체의 메소드로 정보를 보내는 방식이다. 먼저 Ajax 통신의 순서는1)XHR Object 생성2)콜백..