JudithHopps JudithHopps

async 함수 프로미스를 기반으로 동작 마치 동기 코드처럼 직관적으로 코딩을 할 수 있음 👉 MDN 문서 보기 function getMult10Promise (number) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(number * 10); }, 1000); }); } async function doAsyncWorks () { const result1 = await getMult10Promise(1); console.log(result1); ​ const result2 = await getMult10Promise(2); console.log(result2); ​ const result3 = await getMult10P..

콜백 지옥 callback hell setTimeout(() => { console.log(1); setTimeout(() => { console.log(2); setTimeout(() => { console.log(3); setTimeout(() => { console.log(4); setTimeout(() => { console.log(5); }, 500); }, 500); }, 500); }, 500); }, 500); 💡 연속적으로 비동기 코드를 써야 하는 경우 위와 같이 콜백 함수 안에 또 다른 콜백 함수를 넣어야 하는 상황 발생 - 콜백 지옥 횟수가 많을수록 가독성도 낮아지고 직관성이 떨어짐 실전에서는 더더욱 복잡하고 난해해짐 🏃🏃🏃 릴레이 예제 철수, 영희, 돌준, 정아, 길돈이 치례로 이어..

⏲️ setTimeout 함수 첫 번째 인자로 넣은 콜백 함수를 두 번째 인자로 넣은 수 만큼의 밀리초 후 실행 Web API, Node.js 등 자바스크립트 환경의 기능 - 언어의 기능이 아님 👉 MDN 문서 보기 setTimeout(() => { console.log('타임아웃!'); }, 1000); ⭐ 비동기 asynchronous 코드 동기 synchronous 코드와 달리, 코드가 순서대로 실행되지 않음 console.log('하나'); ​ setTimeout(() => { console.log('둘'); }, 1000); // 💡 0으로 바꿔 다시 실행해 볼 것 ​ console.log('셋'); 일반적으로 타임아웃, 네트워크 요청 등 시간이 걸리는 작업에 사용 당장 할 수 있는 것들을 먼저..

I. 프로토타입 prototype 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원하는 언어 오늘날에는 클래스가 더 널리 사용되지만, 사용하기에 따라 보다 강력하고 효율적 ⭐ 자바스크립트의 모든 객체는 Prototype을 가짐 const obj = {}; ​ console.log(obj); [[Prototype]] 펼쳐서 살펴볼 것 console.log( obj.toString() ); console.log( obj.valueOf() ); 빈 객체임에도 위의 메서드들이 사용 가능한 것은 프로토타입 때문 II. Object - 모든 것의 조상 아래 각 객체의 [[Prototype]]의 [[Prototype]]이 Object임 확인 각 [[Prototype]]의 메서드들 확인 console.log(..

I. ⭐️ this - "이곳의~" 기본적으로 자신이 속한 곳을 가리킴 - 문맥 context 💡 함수의 호출 방식에 따라 가리키는 바가 달라짐 - 자바스크립트 특성 1. 전역에서의 this console.log(this); 💡 아래의 환경들에서 각각 실행해 볼 것 브라우저의 콘솔창: Window 객체 - globalThis와 같음 Node.js의 REPL: global 객체 - globalThis와 같음 .js문서로 작성 후 실행 - 빈 객체 Node.js에서 각 .js 문서들은 이후 배울 모듈로서 실행되기 때문 2. 함수 안에서의 this 느슨한 모드와 엄격 모드에서 다르게 동작 function func () { console.log(this); // globalThis } ​ func(); 'use..

I. 렉시컬(정적) 스코프 lexical(static) scope 변수나 상수가 코드상 어디에서 지정되었는가에 따라 그 사용 범위를 결정 함수가 코드상 어디에서 정의되었는가에 따라 그 상위 스코프를 결정 호출한 곳을 기준으로 하는 동적 스포크 dynamic scope 와 상반되는 개념 👉 MDN 문서 보기 const x = 1; const y = 1; const z = 1; ​ function func1 () { const y = 2; const z = 2; ​ console.log('2', x, y, z); func2(); } ​ function func2 () { const z = 3; ​ console.log('3', x, y, z); } ​ ​ console.log('1', x, y, z) fun..

유효하지 않을 수 있는 참조에 의한 문제들 🌐 네트워크 요청 등, 어떤 값이 들어올지 모르는 상황에서 ⚠️ 에러가 발생하는 상황들 // undefined로부터 값에 접근할 때 let undefObj; console.log(undefObj.x); // null부터 값에 접근할 때 let nullObj = null; console.log(nullObj.x); // 무효한 배열에 접근할 때 let undefArry; console.log(undefArry[1]); // 존재하지 않는 함수를 호출할 때 let noFunc = {} noFunc.func(); 다음과 같은 상황에서 에러를 피하려면? 결과에 prop3이 있다면 가져와야 하는 상황 // 최소 undefined // 최대 {prop1:{prop2:{pr..

엄격 모드 strict mode 기존의 느슨한 모드에서 허용되던, 문제를 유발할 수 있는 코드들에 오류를 발생시킴 "지금부터 대충 넘어가지 않겠다." 🪖 엄격 모드의 적용방법과 그 효과들 예시 1. 선언되지 않은 변수 사용시 오류 발생 + 범위별 적용 방법 notDeclared = 1; // 💡 암묵적으로 전역 var 변수로 선언 // ⚠️ 새로고침 후 실행해볼 것 // 선언되지 않은 변수 사용 금지 'use strict'; // 쌍따옴표도 가능 ​ notDeclared = 1; // 오류 발생! 위와 같이 자바스크립트 문서 최상단에 작성 - 문서 전체에 적용 문서, script 태그별로만 적용 - 여러 .js파일이 페이지에 사용될 시 각각 작성해야 함 // 1.js 'use strict'; x = 1;..