Frontend/Javascript (7) 썸네일형 리스트형 [Javascript] Generator 안녕하세요. 오늘은 Generator에 대해서 알아보도록 하겠습니다. 🔸 Generator란? Generator는 함수의 실행을 중간에 멈췄다가 재개할 수 있는 함수입니다. 이때 컨텍스트는 저장된 상태로 남아 있습니다. 예제 Generator 함수는 호출되어도 즉시 실행되지 않고, 함수를 위한 Iterator 객체를 반환합니다. function* idMaker() { let index = 0; while (index < 3) { yield index++; } } let iter = idMaker(); console.log(iter.next()); //{value: 0, done: false} console.log(iter.next()); //{value: 1, done: false} console.log.. [Javascript] Prototype 프로토타입 안녕하세요. 자바스크립트에 대해 공부하다 보면, '자바스크립트는 프로토타입 기반 언어이다.'라는 말을 들어보셨을 겁니다. 오늘은 여기서 말하는 프로토타입이 무엇인지에 대해서 알아보도록 하겠습니다. 자바스크립트에서 사용되는 프로토타입이란 용어는 크게 두 가지로 나뉩니다. 첫 번째는 자기 자신을 만들어낸 객체의 원형을 의미하는 Prototype Link이고, 두 번째는 Prototype Property가 가리키고 있는 Prototype Object입니다. 🔸 Prototype이란? 자바스크립트의 모든 객체는 자신을 생성한 객체 원형에 대해 연결을 갖습니다. 이때 자기 자신을 생성하기 위해 사용된 객체 원형을 프로토타입이라고 합니다. 즉, 위에서 말한 Prototype Link가 가리키고 있는 객체를 말합니다.. [Javascript] Promise 안녕하세요. 오늘은 Promise에 대해서 알아보도록 하겠습니다. 🔸 Promise란? Promise란 현재에는 당장 값을 얻을 수 없지만, 미래에는 얻을 수 있는 데이터에 접근하기 위한 방법을 제공합니다. 현재 값을 얻을 수 없다는 것은 데이터를 얻는데 지연 시간이 존재한다는 것입니다. (대표적으로 network 통신으로 데이터를 얻는 경우가 있습니다.) 지연 시간이 발생하는 작업을 동기로 처리하면, 그 시간 동안 사용자는 브라우저를 사용할 수 없게 됩니다. 따라서 지연 시간이 발생하는 것들은 대부분 비동기로 처리하고 있습니다. Promise는 비동기 처리에 사용되는 객체로, 콜백 지옥 문제를 해결하기 위해 ES2015에 공식적으로 추가되었습니다. Promise가 등장하기 전에는 비동기 처리를 할 때 .. [Javascript] Garbage Collection 안녕하세요. 오늘은 Garbage Collection에 대해 알아보도록 하겠습니다. Javascript에서는 객체, 문자열 등이 생겨날 때 메모리가 할당되며, 이들이 더 이상 사용되지 않을 때 자동으로 메모리가 반환됩니다. 자동으로 메모리를 관리하는 것을 Garbage Collection이라고 합니다. 🔸 Garbage Collection 이란? 메모리 관리 방법 중의 하나로, 프로그램이 동적으로 할당했던 메모리 영역 중에서 필요 없게 된 영역을 해제하는 기능입니다. 필요없는 데이터가 메모리에 계속 쌓인다면, 결국 메모리 사용량을 초과하겠죠? 그럼 로딩 속도가 느려지는 등의 문제를 야기합니다. C언어 같은 저수준 언어에서는 개발자가 수동으로 메모리를 비워줘야 합니다. 하지만 Javascript에서는 필요.. [Javascript] Closure 클로저 안녕하세요. 오늘은 클로저(Closure)라는 개념에 대해 알아보려 합니다. 클로저에 대해 배우기 전에! 혹시 실행 컨텍스트에 대해 알고 계신가요? 실행 컨텍스트라는 개념에 대해 알고 있으면 이해하기도 훨씬 쉬워집니다. (실행 컨텍스트에 대해 학습하고 싶으신 분은 지난 포스팅을 참고해주세요!) 실행 컨텍스트에 대해 아시는 분들도 간단한 예제로 몸 풀기를 해볼까요? var outer = function() { var a = 1; var inner = function(){ console.log(++a); }; inner(); }; outer(); 위 예제에서는 콜 스택에 실행 컨텍스트가 어떤 순서로 쌓일까요? 먼저 코드가 실행되면, 전역 컨텍스트가 생성되어 콜 스택에 들어가게 됩니다. 그 후에 함수가 실행된.. [Javascript] this 안녕하세요 오늘은 this라는 개념에 대해 알아보겠습니다. 🔸 this 란? 실행 컨텍스트의 thisBinding에 저장되는 객체입니다. 주로 객체의 프로퍼티나 메서드를 참조하기 위하여 사용합니다. *실행 컨텍스트에 대한 설명이 필요하신 분은 지난 포스팅을 참고해주세요. 🔸 this 결정 시점 Javascript에서의 this는 실행 컨텍스트가 생성될 때 결정됩니다. 함수가 호출되면 자바스크립트 엔진이 상황에 맞는 this 값을 결정하여 실행 컨텍스트에 저장하게 됩니다. 그럼 지금부터는 상황에 따라 this 값이 어떻게 달라지는지 확인해봅시다. 🔸 상황에 따른 this - 전역 공간에서의 this : 전역 공간에서 this는 전역 객체를 가리킵니다. (브라우저 환경에서 전역 객체 : window, Nod.. [Javascript] 실행 컨텍스트 (Execution Context) 안녕하세요. 오늘은 실행 컨텍스트라는 개념에 대해 알아보겠습니다. 🔸 실행 컨텍스트란? 실행 컨텍스트는 실행할 코드에 대한 모든 정보를 모아 놓은 객체입니다. 자바스크립트 엔진은 실행 가능한 코드를 만나면 그 코드를 평가한 후에 실행 컨텍스트를 생성합니다. * 실행 가능한 코드란? 전역 공간, 함수, eval() 함수. (실행 가능한 코드 별로 실행 컨텍스트가 생성됨) 🔸 프로그램 실행과 실행 컨텍스트 이 실행 컨텍스트는 언제 사용되는 걸까요? 프로그램이 평가된 후에 프로그램이 실행되는데, 이 프로그램이 실행 컨텍스트 안에서 실행됩니다. 실행 컨텍스트는 스택이라는 구조로 관리되어, 전체코드의 환경과 순서를 보장합니다. * 스택이란? 자료 구조의 하나로, 데이터를 아래에서부터 쌓아 올린 후에, 가장 마지막.. 이전 1 다음
