JavaScript (22) 썸네일형 리스트형 [JavaScript] 제너레이터와 async/await 제너레이터와 async / await ES2015(ES6)에 도입된 제너레이터와 ES2017(ES8)에 도입된 async await에 대해 공부한 것을 정리해 보고자 한다. Generator(제너레이터) 제너레이터란? ES6에 도입되었으며 함수의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수. 제너레이터와 일반 함수의 차이 1. 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다. 일반 함수를 호출하면 제어권이 함수에게 넘어가고 함수 코드를 일괄 실행한다. 즉, 함수 호출자는 함수를 호출한 이후 함수 실행을 제어할 수 없다. 제너레이터 함수는 함수 실행을 함수 호출자가 제어할 수 있다. 다시 말해, 함수 호출자가 함수 실행을 일시 중지시키거나 재개시킬 수 있다. .. [JavaScript] Event Flow ooO 이번주 탐구할 주제는 Event Flow 🏊♀️ 이벤트 플로우가 뭔지 알아보고, 이벤트 버블링과 캡쳐링에 대해 알아보자! 간단한 HTML코드이다. html안에 body가 있고 그 안에 div가 있다. 왼쪽 코드를 간단하게 그림으로 나타내 보았고, 사용자가 div를 클릭하면 어떻게 될까? 당연히 div를 클릭했으니 div에서는 이벤트가 실행이 될 것이다. 근데 div뿐만 아니라 div의 부모태그인 body, html 태그들도 이벤트가 실행된다. 하지만 이벤트 실행 시에 각 요소에서 이벤트가 한 번에 빡! 하고 실행되는 게 아니라 나름의 순서가 있는데 이것을 Event Flow라고 한다. 이벤트 플로우에 대해 설명하기 전 하나 알고 가자! currentTarget vs target currentTarget.. [JavaScript] 브라우저에서 일어나는 일 (feat. Event Loop) 오늘 정리하고자 하는 주제는 브라우저의 동작원리이다. 내가 작성한 코드들이 어떻게 돌아가는지 알아야 코드도 잘 짤 수 있다고 생각이 들었기에 브라우저의 동작원리를 살펴볼 것이다. 🚀 V8 엔진 브라우저마다 쓰이는 엔진의 종류는 다르지만 내가 쓰는 크롬의 v8엔진의 구조이다. 이 구조는 인터넷에서도 많이 봤을 거라 생각이 들지만 설명을 해보자면, ✔️ Memory Heap : 메모리 할당이 일어나는 곳 ✔️ Heap : 구조화되지 않은 넓은 메모리 영역 => 객체(변수, 함수 등)들이 담김 ✔️ Call Stack: 실행될 코드의 한 줄 단위로 할당되는 곳 ✔️ Web APIs: 비동기 처리를 담당하는 곳 ✔️ Callback Queue: 비동기 처리가 끝난 후 실행되어야 할 콜백 함수가 차례로 할당되는.. [JavaScript] this에 관한 탐구 🥲 내가 알고 있던 this는? this는 일반 함수 내에서 사용 시 전역 객체를 가리키고, 화살표 함수에선 함수가 포함된 상위 환경의 this를 가리킨다. 라는 게 내가 알고 있는 this의 정의다. 자바스크립트를 공부하면서 어려웠던 개념 중 하나가 this 였고, 이번에 공부하면서 익힌 개념을 글로 정리해본다. 🐝 실행 컨텍스트 먼저 this에 대해 시작하기 전에 this는 실행컨텍스트와 연관되어 있어서 실행컨텍스트에 관해 간단히 설명하고자 한다. 실행 컨텍스트 안에 ThisBinding이 있는데 이 ThisBinding은 실행 컨텍스트가 활성화될 때 한다! 하는 걸 알고 있기만 하면 된다. 그렇다면 실행 컨텍스트는 언제 생성될까? => 해당하는 함수가 호출되는 순간 생성된다! => this는 함.. [JavaScript] 클로저를 이해하기 위한 여정 🤔 클로저가 뭘까? 자바스크립트를 공부하며 몇 번 고비가 왔는데 여러 개의 고비 중 하나인 클로저에 대해 정리하고자 한다. 💡 클로저의 정의 클로저는 영어사전에는 폐쇄, 닫힘 이란 뜻이며 MDN에서는 함수와 그 함수가 선언됐을 때의 어휘적/사전적 환경(Lexical environment)과의 조합 이라고 설명한다. 문장만 보고 나서는 무슨 의미인지 잘 와닿지 않는다. 내가 참고한 코어 자바스크립트에서는 어떤 함수 A에서 선언한 변수a를 참조하는 내부함수B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수a 가 사라지지 않는 현상 라고 정의했다. 엥...? 뭐라는거지 싶었지만 마음을 가다듬고 코드를보면서 느껴보자.. var outer = function (){ var a = 1; var i.. [JavaScript] 프로토타입 (prototype) 프로토타입 자바스크립트는 프로토타입 기반 언어이다. 클래스 기반 언어에서는 '상속'을 사용하지만 프로토타입 기반 언어에서는 '어떤 객체를 원형으로 삼고 이를 복제함'으로써 상속과 비슷한 효과를 얻는다. let instance = new Constructor 어떤 생성자 함수를 new연산자와 함께 호출하면 constructor에 정의된 내용을 바탕으로 새로운 인스턴스가 생성된다. 이때 instance에는 __proto__ 라는 프로퍼티가 자동으로 부여되는데 이 프로퍼티는 constructor의 prototype 이라는 프로퍼티는 참조한다. 어려운 말 말고 조금 더 쉬운 말로 바꿔보자.. function 기계(){ this.name = 'Kim'; this.age = 15; } let 학생1 = new 기계.. [JavaScript] defer, async 스크립트 보통 웹 브라우저에서 돌아가는 스크립트들은 HTML 보다 무겁기 때문에 다운로드 받는 데 오랜 시간이 걸린다. 브라우저는 HTML을 읽다가 // 스크립트 다운로드 및 실행이 끝나기 전까지 아래 내용이 보이지 않는다. hello 이런식의 코드를 짜게 되면 두가지 이슈가 생기는데 1. 스크립트에서는 스크립트 아래에 있는 DOM요소에 접근할 수 없다. 따라서 DOM 요소에 핸들러를 추가하는 것과 같은 여러행위가 불가능해진다. 2. 페이지 위쪽에 용량이 큰 스크립트가 있는 경우 스크립트가 페이지를 막아버린다. 페이지에 접속하는 사용자들은 스크립트를 다운받고 실행할 때까지 스크립트 아래쪽 페이지를 볼 수 없게 된다. 이런 부작용들을 피할 수 있는 방법으로 스크립트를 페이지 맨 아래 놓는 방법이 있다. 하지만 이 .. [JavaScript] 메서드와 this 객체는 사용자(user), 주문(order), 등과 같이 실제 존재하는 개체(entity)를 표현하고자 할 때 생성된다. let user = { name: "John", age: 30 }; 사용자는 현실에서 장바구니에서 물건 선택하기, 로그인하기, 로그아웃하기 등의 행동을 한다. 이와 마찬가지로 사용자를 나타내는 객체user도 특정한 행동을 할 수 있다. 자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해준다. - 메서드 만들기 : 객체 user에게 인사할 수 있는 능력을 부여해보자. let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sayHi(); // 안녕하.. 이전 1 2 3 다음
