Written by Jieun

👩🏻‍💻 내 마음대로 Today I Learned

JavaScript, TypeScript

자바스크립트에서 콜백함수를 이용하면 비동기 처리를 할 수 있다. 하지만 위처럼 콜백함수 안에 함수 호출이 반복되어 다른 비동기 작업을 실행해야하는 경우, 콜백함수를 계속 중첩해서 사용하면 코드가 길어지고 복잡해지는 콜백지옥에 빠질 수 있다. 이러한 문제를 해결하기 위해 Promise가 도입되었다. 1. Promise Promise는 콜백함수의 단점을 보완하여 역시 비동기 처리에 사용되는 자바스크립트 객체. promise는 작업을 수행하는 함수가 해당 작업의 결과를 알려주기로 '약속'을 한다. 대기(pending), 이행(fulfilled), 거부(rejected)와 같은 3가지 상태를 가지는데 작업이 완료되지 않은 상태에서는 대기 상태를 유지하고, 작업이 완료되었을 때 해당 결과에 따라 이행 또는 거부 ..

2023. 3. 21.

JavaScript, TypeScript

1. 동기(Synchronous)와 비동기(Asynchronous) 동기적인 작업은 한 번에 하나의 작업만 처리하기 때문에 현재 실행 중인 코드가 종료되기 전까지 다음줄의 코드를 실행하지 않는 것. 비동적인 작업은 한 번에 여러 작업을 처리할 수 있기 때문에 현재 실행중인 코드가 종료되기 전에 다음 라인의 코드를 실행하는 것. 비동기로 처리하는 방식은 효율성을 상승시켜 처리 속도를 높여준다. 자바스크립트는 한 번에 한 가지 일만 처리가 가능한 싱글 스레드로 동기식 언어이지만, 비동기 동작을 처리할 수 있다. 어떻게 비동기 처리를 할 수 있을까? 2. 콜백함수 함수의 파라미터로 들어가는 함수 (함수 안에서 실행하는 또 다른 함수) '호출하다' + '되돌아오다' = '되돌아 호출해 달라'는 명령으로 비동기..

2023. 3. 20.

JavaScript, TypeScript

클로저(Closure)란? 클로저는 자바스크립트의 모든 함수가 갖고 있는 특성 중 하나다. 이 클로저를 이해하려면 변수의 스코프(Scope)개념을 알고있어야한다. 스코프(Scope)란? 자바스크립트에서 변수는 선언된 위치에 따라 해당 변수에 접근할 수 있는 범위가 결정된다. 1. 전역 스코프(Global Scope): 전역 스코프에 선언된 변수는 어디에서나 접근 할 수 있다. 2. 지역 스코프(Local Scope): 함수 내에서 선언된 변수는 해당 함수 내에서만 접근할 수 있으며, 함수 내부에서 선언된 변수는 외부에서 접근할 수 없다. 클로저를 간단히 말하자면, 함수가 다른 함수 내에서 정의되고, 외부 함수의 변수를 참조할 때 클로저가 생성된다. 이때 외부 함수의 변수는 클로저에 의해 기억되며 함수가..

2023. 3. 19.

JavaScript, TypeScript

실행 컨텍스트 함수가 실행되는 환경. 즉, 실행할 코드에 제공할 환경 정보(변수, 함수, this, Scope)들을 모아놓은 객체 실행 컨텍스트는 함수 호출 시 생성된다. 외에도 실행 컨텍스트를 구성하는 방법으로는 아래와 같다. 전역공간 (this, window 포함 / 자동 생성) eval()함수 (보안의 문제로 사용 x) 블록 {} (ES6추가) 실행 컨텍스트 스택 실행컨텍스트는 전역에서 시작해, 함수가 호출될 때 스택에 쌓인다. let a = 10; function f1() { let b = 20; function print(v) { console.log(v) } function f2() { let c = 30; print(a + b + c) } f2(); } f1(); 1. 전역 컨텍스트가 콜 스..

2023. 3. 17.

JavaScript, TypeScript

1. 변수 선언 방식 var 전역 변수 (재선언 O, 재할당 O) var name = 'javascript' console.log(name) //javascript var name = 'html' console.log(name) //html 변수를 한번 선언하고 다시 중복선언했지만 에러가 나지 않고 값 출력 코드가 길어지면 어디서 에러가 났는지 알 수 없고 어디서 값이 변경되었는지 알기 힘들다. 이를 보완하기 위해 ES6에서 나온 let, const가 있다. let 지역 변수 (재선언 X, 재할당 O) let name = 'javascript' console.log(name) //javascript let name = 'html' console.log(name) // Uncaught SyntaxError..

2023. 3. 16.

JavaScript, TypeScript

this? 보통 자바스크립트에서 가장 사용하기 어렵거나 이해하기 어려운 걸 뽑자고 하면 this라고 할 것이다. this를 말로 설명하면 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수. 함수를 호출할 때 결정되어 어떤 방식으로 호출하느냐에 따라 값이 달라진다. 이해가 안된다면 아래 예시를 보자! 먼저 this라는 걸 그냥 전역 공간에 콘솔을 찍어보면 window 객체를 가리킨다. 이 window는 그냥 현재 열려있는 브라우저 창이라고 생각하면 된다. 그렇다면 함수를 호출할 때 this는 어떤값을 반환할까? 함수 호출 myFunc() 함수는 전역 공간에서 호출되고 있다. 맨위에서 말했듯이 함수를 호출할 때 호출 방식에 따라 this 값이 결정이 되기 때문에 this는 전역객체인 ..

2023. 3. 15.