본문 바로가기

전체 글

 (381)
실행 컨택스트 참조: https://www.youtube.com/watch?v=EWfujNzSUmw (복습. Closure함수: 자신이 선언 되었을 때 렉시컬 환경(렉시컬 스코프)을 기억하는 함수) (내생각)실행컨텍스트(환경), 스코프가 같은 의미로 쓰일수 있다. (내생각)실행컨텍스트: 코드 실행에 필요한 환경(조건이나 상태)을 모아둔 객체(즉 스코프역시 코드 실행에 필요한 조건이나 상태를 모아둔 영역이므로 스코프가 실행컨텍스트와 같은 의미일 수 있는것이다) 요약: 실행 컨텍스트이란? 코드를 실행하는데 필요한 환경을 제공하는 객체. 여기서 환경이란 코드 실행에 영향을 주는 조건이나 상태를 의미함. 식별자 결정을 더욱 효율적으로 하기 위한 수단으로써 필요한 정보를 한곳에 모아 제공하는 객체. 스코프 체인이란?: 스코프들..
클로저(closure) 출처: https://poiemaweb.com/js-closure 요약. 클로저란? 자신(함수)이 선언되었을때의 렉시컬 환경(렉시컬 스코프,정적 스코프)을 기억하는 함수 자유변수: 클로저함수에 의해 참조되는 외부함수의 변수 1. 클로저(closure)의 개념 클로저(closure)는 자바스크립트에서 중요한 개념 중 하나로 자바스크립트에 관심을 가지고 있다면 한번쯤은 들어보았을 내용이다. execution context에 대한 사전 지식이 있으면 이해하기 어렵지 않은 개념이다. 클로저는 자바스크립트 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(Functional Programming language: 얼랭(Erlnag), 스칼라(Scala), 하스켈(Haskell), 리스프(L..
함수 호이스팅 ing 출처: https://www.youtube.com/watch?v=fETYLCU2YYc
생성자 함수, 객체 메서드(Object method), 계산된 프라퍼티(computed property)에 대하여 https://www.youtube.com/watch?v=8hrSkOihmBI&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=2 생성자 함수의 내부 실행절차 new함수명(); ==>> 빈객체를 만들고 this에 할당함. ==> this객체 안에 property들을 추가 ==>>this를 반환(실제로 위와 같은 코드는 당연히 없음) 단 어떠한 함수라도 위와 같이 new를 붙여서 생성하면 위와 같은 알고리즘이 동일하게 적용됨. 따라서 생성자 함수는 첫 앞글자를 대문자로 해주는 것이 관례임. 객체 메서드에 대하여 //앞서 배운 내용 몽땅 적용해 보기 let n="name"; let a="age"; const user={ [n]:"Han", [a]:29, [5]:6,//키가 ..
프로토타입을 이용한 객체의 상속 JS에서 상속을 할수 있는 방법은 2가지가 있다. 프로토타입을 이용한 상속과 extends를 이용한 클래스 상속. 여기서는 프로토타입을 이용한 상속을 알아본다. 프로토타입을 이용한 상속은 xxx.__proto__=yyy 를 통하여 계속하여 이루어질수 있다. //최고조상이 될 car객체 const car={ wheels:4, drive(){//이름지어보기. 지어짐. 하지만 이렇한 형식으로 객체안의 함수를 정의할 수 있음. console.log("Driving..."); } } //car객체를 상속할 bmw, audi, Lamborghini const bmw={ color:"red", navigation:1, }; const audi={ color:"blue", } const Lamborghini={ col..
Class, Class에서의 상속과 생성자 호출 참고: https://www.youtube.com/watch?v=OpvtD7ELMQo&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=15 //생성자 함수에 의한 객체 생성 예 // 예1. const User=function(name, age){ this.age=age; this.name=name; this.showName=function(){ console.log(this.name); } } let joe=new User("Joe", 30); console.dir(joe); // 예2 function User2(name,age) { this.name = name; this.age=age; this.showName=function(){ console.log(this.na..
async, await 2 참고: https://www.youtube.com/watch?v=Uh8u20MD978&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=17 const f1=()=>{ return new Promise((resolve, reject)=>{ setTimeout(() => { resolve("1st order is completed"); }, 1000); }); } const f2=(message)=>{ console.log(message); return new Promise((resolve, reject)=>{ setTimeout(() => { resolve("2nd order is completed"); // reject(new Error("Error occurred ba..
async, await 참고: https://www.youtube.com/watch?v=Uh8u20MD978&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=17 async, await 를 사용하면 promise의 then메서드를 체인형식으로 사용하는 것보다 가독성이 좋아짐. 기본적으로 함수선언문 앞에 async를 붙여주면 promise를 반환함(단, 물론 반환값이 없으면 아무것도 반환하지 않음). await 키워드는 반드시 async 함수 안에서만 사용할 수 있음. 일반함수에서 사용하면 에러 발생함. await키워드 다음에는 Promise객체가 옴. 그 Promise가 처리 될때까지 기다림(기다린다는 것은 setTimeout과 같은 딜레이 함수가 종료될때까지 기다린다는 것을 의미). asyn..

티스토리툴바