[JS] 콜백지옥 해결방안 (기명함수, promise, generator, async/await)

동기와 비동기동기적 (synchronous)하나의 일이 끝날 때까지 다음 일이 기다리고 있음비동기적 (asynchronous)실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식ex. setTimeout, addEventListener 등별도의 요청, 실행대기, 보류 등과 관련된 코드 콜백지옥 예시와 해결방안예시setTimeout( function (name) { var coffeeList = name; console.log(coffeeList); setTimeout( function (name) { coffeeList += ", " + name; console.log(coffeeList); setTimeout( ..

• format_list_bulleted JavaScript
• · 2024. 7. 24.
• textsms

[JS] 콜백함수의 제어권

호출 시점에 대한 제어권// setInterval: 반복해서 매개변수로 받은 콜백함수의 로직을 수행let count = 0;let cdFunc = function() { console.log(count); if(++count > 4) clearInterval(timer) };// setInterval의 콜백함수로 전달let timer = setInterval(cbFunc, 300);// 직접 호출cbFunc();마지막처럼 cbFunc()를 직접 호출하는 경우 함수의 호출 시점은 프로그래머가 제어할 수 있다. 하지만 setInterval의 콜백함수로 전달하는 경우, 300ms 간격으로 setInterval이 호출 시점을 제어하게 된다.  인자에 대한 제어권let newArr = [10, 2..

• format_list_bulleted JavaScript
• · 2024. 7. 24.
• textsms

[JavaScript] this (정의, 활용, 바인딩, call, apply, bind)

this가 가리키는 것JS의 this는 런타임 상황에서 고려해야한다. 따라서 두가지 상황을 고려할 수 있다. node, 브라우저! 1) 브라우저: window 객체2) 노드: global 객체  메서드 내부에서의 this메서드와 함수함수는 그 자체로서 독립적인 기능을 수행하지만, 메서드는 자신을 호출한 대상 객체에 대한 동작을 수행한다.1) 함수의 this: 전역 객체2) 메서드의 this: 호출의 주체 this의 할당function exFunc() { console.log("this: ", this);}exFunc(); // this: Object [global]const obj = { method: exFunc,}obj.method(); // this: { method: [Func..

• format_list_bulleted JavaScript
• · 2024. 7. 23.
• textsms

[JavaScript] 실행 컨텍스트 및 콜스택

실행 컨텍스트실행할 코드에 제공할 환경정보들을 모아둔 객체JS는 특정 실행 컨텍스트가 활성화되기 전 다음을 수행한다.선언된 변수 호이스팅외부 화경 정보를 구성this값 설정 콜스택 (Call stack)동일한 환경에 있는 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이를 콜스택에 쌓아올린다.가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장하는 것. 실행 컨텍스트의 구성 정보VariableEnvironment (VE)1) 현재 컨텍스트 내의 식별자 정보(record)를 갖고 있다.ex. var a = 3 에서 var a 2) 외부 환경 정보 (outer)를 갖고있다. 3) 선언 시점 LexicalEnvironment의 snapshot-> 즉, 변..

• format_list_bulleted JavaScript
• · 2024. 7. 23.
• textsms

[JavaScript] 깊은 복사와 얕은 복사

원시타입의 깊은 복사let num = 1;let num2 = num;num = 3;console.log(num); // 3console.log(num2); // 1  1이라는 데이터가 주소값이 3001인 메모리에 있다고 가정할 때, num은 1이 저장된 주소값(3001)을 갖고있다.num2에 num의 값을 복사하기위해 num2 = num을 실행한 경우 num2은 마찬가지로 1이 저장된 주소값(3001)을 갖게된다.각 식별자가 독립적으로 데이터 1의 위치를 알고있으므로, 둘중 하나가 다른 데이터를 할당받더라도 나머지 하나는 그대로 1에 접근할 수 있다. 위 예시처럼 num = 3을 새로 대입해준 경우 num은 3이라는 데이터가 위치한 주소(ex. 3002)를 갖게되고, 이 변화는 num2가 갖고있는 정..

• format_list_bulleted JavaScript
• · 2024. 7. 23.
• textsms

[JavaScript] Map과 Set

Map, Set이란?데이터의 구성, 검색, 사용을 효율적으로 처리하기 위해 등장한 자료구조 Mapkey-value 쌍을 저장한다.set(), get()Map에 자료를 추가하고, 검색할 수 있는 메서드const myMap = new Map();myMap.set('key', 'value');myMap.get('key'); keys(), values(), entries()Map의 데이터들은 반복하며 동작을 처리하기 위해 사용할 수 있음const myMap = new Map();myMap.set("one", 1);myMap.set("two", 2);myMap.set("three", 3);console.log(myMap.keys()); // { 'one', 'two', 'three' }for (const key..

• format_list_bulleted JavaScript
• · 2024. 7. 22.
• textsms