JavaScript (7) 썸네일형 리스트형 자바스크립트의 프로토타입 이해하기 https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67 [Javascript ] 프로토타입 이해하기자바스크립트는 프로토타입 기반 언어라고 불립니다. 자바스크립트 개발을 하면 빠질 수 없는 것이 프로토타입인데요. 프로토타입이 거의 자바스크립트 그 자체이기때문에 이해하는 것이 어렵medium.comhttps://evan-moon.github.io/2019/10/23/js-prototype/ [JS 프로토타입] 클래스보다 깊은 세계, 자바스크립트 프로토타입 완전 정복이번 포스팅에서는 자바스크립트(JavaScript)하면 빠질 수 없는 프로토타입(Prototype)에 대해서 한번 이야기해보.. JavaScript 이벤트 루프 JavaScript는 싱글스레드 여러가지 작업이 동시에 진행되는 게 아니라, 한 번에 한가지 작업만 진행된다. 때문에 브라우저와 node.js환경과 상호작용하지 않고 자바스크립트만 따로 실행한다면 비동기적으로 동작할 수 없다.물론 자바스크립트는 브라우저나 node.js 환경에서만 실행될 수 있기 때문에 위와 같은 상황은 일어나지 않는다. 그러나 fetch로 데이터를 외부로부터 받는다거나, setTimeout과 같은 함수처럼 비동기 작업들이 실행되는 것을 보면자바스크립트는 한번에 여러가지 작업이 가능한 것처럼 보인다. 자바스크립트에서 비동기 함수는 어떻게 동작하길래 비동기로 작동할 수 있는 걸까? - 스레드란?하나의 프로세스 내에서 동시에 진행되는 작업 갈래, 흐름의 단위우리가 크롬 브라우저를 실행하면.. 자바스크립트에서의 this 바인딩 글을 읽기 전 실행 컨텍스트에 관한 포스팅을 먼저 읽어오는 걸 추천한다. https://sysy1127.tistory.com/18 실행 컨텍스트와 호이스팅실행 컨텍스트란? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체현재 실행중인 코드에 대한 세부 정보(제어 흐름의 위치, 선언된 변수와 함수, this, arguments 등)를 담고있는 데이터 구조실sysy1127.tistory.com 실행 컨텍스트는 렉시컬 환경, 변수 환경, this 바인딩의 구성요소로 이뤄져 있는데이번 포스트에서 다룰 주제는 this 바인딩에 관한 것이다. this 바인딩은 식별자가 바라봐야할 대상 객체이다.다르게 말하면, 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이다. Java에서 this는 객체인 자기자신을 가.. 클로저 렉시컬 스코프(Lexical Scope) 스코프의 범위는 코드의 가장 바깥 영역인 전역 스코프와, 함수 안쪽 영역인 지역 스코프로 나뉜다. 그렇다면 다음 코드의 실행 결과를 예측해보자.var x = 1; function foo() { var x = 10; bar();} function bar() { console.log(x);} foo(); // (A)bar(); // (B)출처: https://l1m3kun.tistory.com/entry/JS-렉시컬-스코프Lexical-Scope-란 [☝ 코딩 ☝ 커피:티스토리] 결론부터 말하자면 (A)는 1, (B)도 1이다. 스코프의 결정 기준은 두가지가 있는데,함수를 호출한 곳을 기준으로 스코프를 결정하여 변수를 가져오는 동적 스코프와함수를 선언한 .. 실행 컨텍스트와 호이스팅 실행 컨텍스트란? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체현재 실행중인 코드에 대한 세부 정보(제어 흐름의 위치, 선언된 변수와 함수, this, arguments 등)를 담고있는 데이터 구조실행 컨텍스트는 다음의 세가지 환경으로 구성되어 있다. 전역 컨텍스트코드가 처음 실행될 때 생성되는 기본 컨텍스트함수 컨텍스트함수가 실행될 때마다 각각의 함구에 대해 생성되는 컨텍스트함수가 호출될 때 생성된다.Eval 컨텍스트eval() 함수를 사용할 때 만들어지는 컨텍스트- eval 함수는 보안상 이유로 사용하지 않도록 권고하고 있고, 오래된 레거시에서만 가끔 볼 수 있는 코드이므로 다루지 않는다.이렇게 생성된 전역 컨텍스트와 함수 컨텍스트는 실행 컨텍스트 스택(호출 스택, call stack)이라는 자.. 이벤트 버블링과 캡처링 이벤트 버블링과 캡처링 HTML 문서의 요소들은 태그 안에 태그가 있는 계층적 구조를 이루고 있다. 이러한 구조적 특징 때문에 특정 태그에서 이벤트가 발생하면이벤트가 바깥 상위 태그로부터 시작해 안쪽의 해당 태그로 전파되거나,이벤트가 안쪽의 해당 태그로부터 시작해 바깥 상위 태그로 전파되는,수직적 형태의 이벤트 전파 흐름을 갖는다. 아래 코드를 보자.outer middle inner 가장 안쪽에 위치한 inner를 클릭하면alert('inner') -> alert('middle') -> alert('outer')순서로 실행이 될 것이다. outer 영역 안에 middle이, middle 영역 안에 inner가 있으니inner를 클릭하면 바깥 부모의 영역을 클릭한 거나 마찬가지므로이와 같은 이벤.. 콜백함수와 Promise, 그리고 async/await 1. CallBack 함수콜백(CallBack) 함수란 다른 함수에게 인자로 전달되는 함수이다.보통 비동기 작업을 처리할 때 많이 사용된다.비동기 작업은 언제 처리될 지 모르기 때문에, 콜백함수를 비동기 작업 함수의 인자로 전달해서해당 비동기 작업이 끝나면, 그 결과로 이 작업(콜백함수)을 처리해줘~ 하는 것이다. // 비동기 작업을 수행하는 함수function asyncTask(callback) { setTimeout(() => { console.log('비동기 작업 중~'); callback(); }, 1000);}// 결과를 처리하는 콜백 함수function handleResult() { console.log('비동기 작업 완료');}asyncTask(handleResult); 위의.. 이전 1 다음
