비전공 개발자

비동기 함수의 결과에따라 서로 다른 코드를 작성하고 싶으면 콜백 함수를 이용해야한다. 하지만 이는 가독성을 해치게되고 이 문제를 해결하기 위해 프로미스 (Promise)가 등장한다. 하지만 프로미스를 사용하더라도 좀 더 코드를 간결하게 작성하고 싶은 요구가 있었고 이를 개선하기 위해 async, await가 등장한다. async 를 function 앞에 두어 선언하고 그 함수 내부에 비동기 함수 앞에 await를 두고 호출하면 .then이나 .catch를 쓰지 않더라도 코드를 간결하게 작성할 수 있다. 물론 이때 가정은 await를 두고 호출할 비동기 함수는 프로미스를 반환하는 함수여야한다. 일단 비동기 함수를 사용할 때 발생하는 가독성 문제와 이를 프로미스로 해결하는 방법을 이해하지 못하면 async,..

비동기 함수를 사용할 때 성공한 경우와 실패한 경우에 따라 코드를 작성해야 하는 경우가 많다. 이때 가독성이 매우 떨어지는 코드를 작성하게 된다. 예를 들어 다음과 같은 testLuck이라는 이름의 비동기 함수가 존재한다고 생각해보자. 이 함수는 비동기적으로 1초후에 각각 1/2의 확률로 isErr을 true로 저장하거나 false로 저장하여 callbackFunc 함수를 호출한다. 운이 좋으면 isErr가 false가 되고 운이 나쁘면 isErr가 true가 된다는 의미를 담아 예시로 함수를 작성하였다. 이제 이 비동기 함수를 사용하는 코드를 작성하겠다. 이때 콜백 함수를 여러 번 호출하면 위에서 언급한 가독성이 떨어지는 코드를 작성하게 된다. 이 코드는 testLuck이라는 함수를 첫 번째로 호출하고..

자바스크립트 런타임 환경 Call stack과 event loop는 자바스크립트의 동작 원리를 이해하기 위해 꼭 숙지해야하는 개념이다. 자바스크립트가 실행되는 환경을 의미하는 자바스크립트 런타임 환경은 다음과 같이 구성되어 있다. 크게 Memory heap, call stack, web apis, callback queue, event loop가 있다. Call Stack Call stack은 함수의 호출을 저장하는 자료구조이다. 어떤 함수를 호출하면 스택에 쌓고 또 다른 함수를 호출하면 그 다음 스택에 쌓으면서 가장 위에 쌓인 함수를 가장 먼저 처리한다. 대표적인 예제는 다음과 같다. 가장먼저 func1을 호출하므로 call stack에 func1이 쌓인다. 그리고 func1에서 func2를 호출하므로..

Closure 자바스크립트에서 closure는 함수의 scope에 존재하지 않는 변수에 접근이 가능한 함수를 의미한다. 대표적인 클로저는 다음과 같다. func라는 함수 내부에는 str이라는 변수와 funcClosure이라는 함수가 존재한다. funcClosure는 함수 scope에 존재하지 않는 str이라는 변수를 출력하는 함수이다. 이때 lexical scoping에 의해 funcClousre 함수는 'Hi'라는 문자열 출력하도록 선언할 때 결정된다. 이때 funcClousre 함수는 함수이면서 함수 scope에 존재하지 않는 변수에 접근이 가능하므로 closure가 된다. Closure을 이해하기 위해서는 scope와 lexcial scoping을 완전히 이해하고 있어야한다. https://jong..

Spread syntax Spread syntax (전개 구문)은 특정 상황에서 특정 객체 앞에 ...를 붙여 사용하는 syntax이다. Spread syntax크게 세 가지 상황에서 사용한다. 함수 호출에서 iterable 객체를 인자로 사용하고 싶을 때 배열 literal로 배열을 정의하는데 iterable 객체의 요소를 요소로 사용하고 싶을 때 객체 literal로 key-value 쌍으로 구성된 객체를 정의하는데 특정 객체의 요소를 객체의 요소로 사용하고 싶을 때 이렇게 세 가지 상황에서 어떻게 spread syntax를 사용하는지 설명하겠다. 참고 여기서 iterable 객체란 배열이나 문자열과 같이 [Symbol.iterator]라는 키로 함수를 가진 객체를 의미한다. 예제는 다음과 같다. 함..

Scope 자바스크립트에서 scope란 변수에 접근할 수 있는 범위를 의미한다. 자바스크립트에서 두 가지 종류의 scope가 존재한다. Local scope와 gloabal scope이다. 함수 내에서 선언된 변수는 Local scope로 함수 내에서만 접근 가능하고, 함수 밖에서 선언된 변수는 global scope로 모든 곳에서 접근 가능하다. 대표적인 예시는 다음과 같다. 변수 a는 global scope로 선언하였고 변수 b는 func라는 함수 내에서 local scope로 선언하였다. a를 global scope로 선언하였기 때문에 func 함수 내에서 변수 a에 접근이 가능하다. 이때 다른 곳에서 변수 a와 변수 b에 접근이 가능할지 살펴보자. 결과는 다음과 같다. a는 gloabl scope..

console.dir() log 함수 다음으로 가장 많이 사용하는 함수가 dir 함수이다. dir 함수는 객체의 속성을 계층구조로 출력한다. 대표적인 예제는 다음과 같다. 예제는 크롬 개발자도구의 콘솔창을 이용하여 구현하였다. log 함수로 document.body 객체를 출력하면 태그내용이 나오고 dir 함수로 document.body 객체를 출력하면 객체의 속성이 출력된다. 함수인 객체를 log 함수와 dir 함수로 출력하면 결과는 다음과 같다. 다음과 같이 log 함수로 func 함수를 출력하면 함수의 코드가 출력되고 dir 함수로 출력하면 함수의 속성이 출력된다. console.count(), console.countReset() count 함수는 얼마나 많이 count 함수를 호출했는지 출력한다..

Console 자바스크립트에는 console이라는 객체가 존재한다. Console은 디버깅을 위해 존재하는 객체로, console의 함수를 이용하면 크롬 개발자도구의 콘솔창에 여러 정보를 출력할 수 있다. Console 객체 내부에 존재하는 함수들에 대해서 설명하도록 하겠다. 우선 가장 많이 사용하는 log 함수부터 설명하겠다. console.log() log 함수는 가장 일반적으로 사용하는 함수로 자바스크립트 객체를 콘솔창에 출력하는 함수이다. 주로 문자열을 출력하는데 자주 사용되며 예제는 다음과 같다. 예제는 크롬 개발자도구의 콘솔창을 이용하여 구현하였다. 다음과 같이 console.log 함수에 전달한 문자열이 콘솔창에 출력된다. 마지막에 < undefined이 뜨는 이유는 콘솔창에서 특정 함수를 ..