[JavaScript] 클로저 (Closure)

클로저는 스코프(Scope)에 대해 이해하고 있지 않으시다면, 클로저도 이해하시기 힘드실 것입니다. 이 글을 읽기전에 스코프에 대해 공부하시고 오시는 것을 추천 드립니다. : ) 1. 클로저 MDN에서는 "클로저는 함수와 함수가 선언된 어휘적 환경(lexical scope) 의 조합이다."라고 정의하고 있습니다. 조금 풀어서 설명하자면, 클로저는 외부 함수의 실행이 끝나 함수가 소멸되어도 내부 함수가 외부 함수의 변수에 접근할 수 있는 것을 말합니다. 역시 글로만 설명하니 무슨 이야기인지 정확하게 이해하기 힘듭니다. 설명을 위해 아래의 코드를 보겠습니다. function ex() { var id = '01'; function inner() { console.log(id); } return inner; }..

• format_list_bulleted JavaScript
• · 2021. 9. 8.
• textsms

[JavaScript] 스코프 (Scope)

스코프는 번역하면 '범위'라는 뜻을 가지고 있습니다. 이것이 자바스크립트에서 어떠한 것을 의미하는지 알아보겠습니다. : ) 1. 스코프 (Scope) 스코프는 전역(Global) 스코프과 지역(Local) 스코프 두 가지로 나눌 수 있습니다. 전역 스코프는 어느 곳에서든지 참조할 수 있는 것을 말합니다. 지역 스코프는 정의된 지역(함수) 안에서만 참조될 수 있는 것을 말합니다. 코드를 보고 조금 더 설명하겠습니다. var a = 'global'; function test() { var a = 'local'; console.log(a); } test(); // local console.log(a); // global 위 코드에서 함수 밖에 선언된 변수 a는 전역 변수이고, 함수 내부에 선언된 변수 a는 지..

• format_list_bulleted JavaScript
• · 2021. 9. 8.
• textsms

[JavaScript] async/await

비동기 처리의 마지막 부분입니다. async/await을 이해하기 위해서는 앞의 글을 읽고오셔야 이해가 가능할거 같습니다. 어짜피 알아야 하는 내용이니까 한 번씩 읽고 오시는 것을 추천드립니다. \('_')/ [JavaScript] 비동기 처리 아래의 그림을 보면 동기적 처리와 비동기적 처리를 간단하게 확인할 수 있습니다. 대충 이해가 가시나요? 그림만 보고 정확하게 이해하기는 힘드니 어떤 상황에 사용하는지 어떤 의미인지 알 oagree0123.tistory.com [JavaScript] Promise 이전 글에서 비동기 처리를 위해 콜백 함수를 사용했습니다. 그런데 콜백 함수를 사용하면 비동기 처리 작업이 많아질 수록 코드가 복잡해지는 것을 볼 수 있었습니다. 이번에는 이를 해결하는 oagree0123..

• format_list_bulleted JavaScript
• · 2021. 9. 6.
• textsms

[JavaScript] Promise

이전 글에서 비동기 처리를 위해 콜백 함수를 사용했습니다. 그런데 콜백 함수를 사용하면 비동기 처리 작업이 많아질 수록 코드가 복잡해지는 것을 볼 수 있었습니다. 이번에는 이를 해결하는 Promise 사용법에 대해 알아보겠습니다. [JavaScript] 비동기 처리 아래의 그림을 보면 동기적 처리와 비동기적 처리를 간단하게 확인할 수 있습니다. 대충 이해가 가시나요? 그림만 보고 정확하게 이해하기는 힘드니 어떤 상황에 사용하는지 어떤 의미인지 알 oagree0123.tistory.com 1. Promise Promise는 자바스크립트에서 비동기 처리를 위해 사용되는 객체입니다. Promise는 성공을 할 수도 있고, 실패를 할 수도 있습니다. 성공을 하면 resolve를 호출하고, 실패하면 reject를..

• format_list_bulleted JavaScript
• · 2021. 9. 6.
• textsms

[JavaScript] 비동기 처리

아래의 그림을 보면 동기적 처리와 비동기적 처리를 간단하게 확인할 수 있습니다. 대충 이해가 가시나요? 그림만 보고 정확하게 이해하기는 힘드니 어떤 상황에 사용하는지 어떤 의미인지 알아보겠습니다. \\^-^// 1. 비동기 처리 자바스크립트에서 비동기 처리는 특정 코드의 로직이 끝나는 것을 기다리지 않고 다음 코드를 먼저 실행하는 것을 의미합니다. 동기적 처리는 비동기 처리와 반대로 특정 코드의 로직이 끝나면 다음 코드가 실행되는 것을 말합니다. 비동기적 처리는 작업의 흐림이 끊어지지 않기 때문에 동시에 여러 로직을 처리할 수 있고, 다른 함수를 가져와 사용할 수 있습니다. 예를 들어 한번 보겠습니다. console.log('First'); setTimeout(function() { console.log..

• format_list_bulleted JavaScript
• · 2021. 9. 3.
• textsms

[JavaScript] 콜백 함수 (Callback Function)

콜백 함수를 처음 들으면 다시 부르다? 어떠한 의미인지 한 번에 파악하기 힘듭니다. 오늘은 callback 함수가 무엇인지 어떠한 함수인지 알아보겠습니다. :> 1. 콜백 함수 콜백 함수는 다른 함수의 매개변수로 함수를 넘겨주고, 어떠한 이벤트가 발생했거나 특정 시점에 도달했을 때 호출하는 함수를 말합니다. 예시를 들어 설명하겠습니다. 음식점에 주문을 하려고 합니다. 그런데 음식점의 주문이 밀려 지금 당장 해줄 수 없다고 합니다. 그렇다면 음식 준비가 끝나면 음식을 받아갈 테니 전화를 달라고 부탁합니다. 전화가 오기 전까지 자신이 하고 싶은 일을 할 수 있습니다. 이때 음식점에서 전화가 걸려오고 받는 것이 콜백 함수가 호출되는 시점과 같습니다. 2. 콜백 함수 사용법 간단한 콜백 함수의 예로 살펴보겠습니..

• format_list_bulleted JavaScript
• · 2021. 9. 3.
• textsms