꿈꾸는 개발자의 블로그

변수를 선언하는 var, let 키워드는 서로 다른 스코프를 가지고 있다는 점에서 차이가 있다. 이 때문에 같은 코드를 실행했더라도 다른 결과를 출력하는 모습을 볼 수 있다. 내가 의도한 것은 1초 후에 0, 1, 2, ... 9 가 출력되는 것이었다. 왜 의도한대로 되지 않는지, 변수에 무슨 차이가 있는지 정리해보았다. var 다음과 같이 코드를 짰을 때, 함수 스코프를 가지는 var 키워드의 경우에는 10을 10번 출력한다. for (var i = 0; i < 10; i++) { setTimeout(function() { console.log(i) }, 1000) } for문이 시작하고 하위 setTimeout 함수도 1초 후에 시작되는데, 이 때 for문은 무척 빠른 속도로 돌기 때문에 setTim..

var, let, const 모두 변수를 선언하는 키워드이다. ES5 까지만 해도 var 변수를 사용했지만, ES6 이후로 let, const가 추가되었다. 그렇다면 차이점에는 어떤 것이 있을까? 간단하게 정리해보면, 아래 표와 같다. var let const 재선언 가능 불가능 재할당 가능 불가능 스코프 함수 스코프 블록 스코프 1. 변수에 재할당 var의 경우에는 변수 재선언과 재할당이 가능하고, let은 변수에 재할당이 가능한 반면 const는 불가능하기 때문에 immtuable하다고 할 수 있다. var number = 10 console.log(number) // 10 var number = 20// 재선언 console.log(number) // 20 number = 30// 재할당 conso..

막연히 사용하던 함수 선언식(Function Declaration)과 함수 표현식(Function Expression)에 대해 알아보고, 차이점을 소개하고자 한다! 호이스팅.. 정말 헷갈렸는데 정리가 좀 된 것 같다 ㅎㅎ 함수 선언형과 함수 표현식 함수 선언형 함수명이 정의되어 있고, 별도의 할당 명령이 없다. function sum(a,b) { return a + b; } 함수 표현식 정의한 함수를 별도의 변수에 할당한다. const sum = function(a,b) { return a + b; } 함수 선언식과 함수 표현식의 차이점 결과부터 말하면, 스코프와 호이스팅에서 차이가 있습니다. 1. Scope 함수 선언식 var와 같이 함수 스코프를 가진다. function func1() { functi..

자바스크립트에서의 비동기적 구현 방식에는 Callback, Promise, async/await의 3가지를 들 수 있다. 또한, 이러한 비동기 처리 방식을 동기 처리처럼 가능하게 해줄 수 있다. Callback 다른 함수가 실행을 끝낸 뒤 실행되는 함수를 말한다. 함수를 등록해놓은 후 어떤 이벤트가 발생하면 호출하는 함수로써, 파라미터로 함수를 전달받아 함수의 내부에서 실행된다. 아래의 예처럼 setTimeout 함수 안에 함수를 전달하여 3초 뒤에 실행되는 모습이다. setTimeout(function() { ... }, 3000); 이를 동기 처리 방식으로 구현하려면, 비동기 함수의 콜백 내부에서 다음 작업(비동기 함수를 호출 등)을 하면 된다. 그런데 이러한 콜백을 이용한 비동기 처리는 아래와 같이..

this this가 가리키는 것은 환경에 따라 변할 수 있지만(dynamic binding(동적 바인딩) : this가 환경에 따라 바뀌는 것), 객체의 메서드인 경우에는 해당 객체를 가리키게 된다. 이 때, 객체의 메서드가 화살표 함수 () => {}로 호출된다면 this는 함수가 생성된 환경을 가리키고, 일반함수 function() {}는 this가 함수를 호출한 환경을 가리키게 된다. 아래 코드를 보면 test1()는 실행될 때 새로운 컨텍스트를 생성하기 때문에 this가 global을 가리킨다. 반면, test2()는 함수 컨텍스트를 생성하며 this는 자신을 호출한 환경인 부모 o를 가리키게 되는 것이다. let o = { name: "An", test1: () => { console.log(t..