ECMAScript2015에서 let과 const가 등장한 이후로 개발자들이 var 대신 let, const를 주로 활용하고 있습니다. 자바스크립트의 장점이자 어찌보면 단점이라고도 생각되는 유연성을 let과 const가 그 단점을 보안해주는 역할을 합니다. 이제 var와의 차이점을 하나씩 알아보겠습니다. var : function-scoped let, const : block-scoped var는 함수를 기준으로 스코프가 생성이 되며, let과 const는 블록을 기준으로 스코프가 생성됩니다. if(true){ var a = 2; } console.log(a) if(true){ let a = 2; } console.log(a) 위에 var로 선언한 a변수는 정상적으로 콘솔에 나타나는 반면, let으로 선..
클로저(closure) 자바스크립트에서 클로저의 정의는 정확히 내려지지 않았습니다. 그래서 사람들마다 책마다 블로그마다 클로저의 정의를 말하는게 조금씩 다릅니다. 제가 공부하면서 생각한 정의는 이런 느낌입니다. '이미 생명주기가 끝난 함수의 변수를 참조할 수 있도록 해주는 현상' function outer () { let a = 0; function inner () { return ++a } return inner; } const func = outer(); console.log(func()); console.log(func()); console.log(func()); 위 코드를 실행하면 결과는 1 2 3 이 나오게 됩니다. 이걸 이해하려면 일단 '실행 컨텍스트'를 이해하셔야 합니다. func에서 out..
스코프는 우리 말로 번역을 하면 '범위'라는 뜻이다. 자바스크립트에서 스코프는 '접근할 수 있는 범위'라고 생각하면 된다. 아래 예제들을 보면서 이해하는게 가장 쉬울 거라 생각한다. const a = "Hello"; function b() { console.log(a); } b() 위처럼 b함수를 실행하게 되면 b함수에 a라는 변수가 없지만 전역에 있는 a라는 변수를 가져와 "Hello"를 출력 할 수 있게된다. 아래 코드는 어떨까? const a = "Hello"; function b() { console.log(a); const a = "bye"; } b() 여기서의 콘솔에는 어떤게 찍힐까? 바로 'undefined'가 출력되게 된다. 위 코드를 이해하지 못했다면 호이스팅 에 대한 포스팅을 읽고오는 ..
실행 컨텍스트(Execution Context) ECMAScript에서 실행컨텍스트의 정의를 이렇게 말한다. '실행 가능한 코드를 형상화하고 구분하는 추상적인 개념' 좀 더 쉽게 설명을 하자면 이렇다. '함수가 실행될 때 그 함수의 대한 환경 정보들을 모아 메모리에 저장' 실행 컨텍스트는 호이스팅, 스코프, this, 클로저, 함수 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 그러므로 실행 컨텍스트는 확실하게 이해하고 넘어가는 것이 좋다. 콜스택(Call Stack) 자바스크립트 엔진은 실행되는 코드들을 순차적으로 스택에 쌓아 위에서부터 하나씩 처리를 하는 LIFO(Laast In First Out)방식으로 함수들을 실행하게 된다. 실행 컨텍스트의 종류 Global Execution Conte..
Hoist - 들어올리다. 호이스트(Hist)는 건축/건설에서 사물을 끌어올릴 때 쓰이는 도구를 부르는 말이기도 하다. javascript에서의 호이스팅은 선언된 모든 변수와 함수들을 그 스코프 안에서 최상단으로 끌어올리는 것을 의미한다. 간단한 예를 들어서 보여주는게 이해하기 가장 쉬울 것 같다. var a = 2; consol.log(a); 결과 : 2 consol.log(a); var a = 2; 결과 : undefined 위처럼 변수선언은 최상단으로 올리기 때문에 a가 아래에서 선언이 되었어도 위콘솔에서는 undefined를 가지게 된다. '함수 선언식' 함수 또한 통째로 위로 호이스팅을 시키기 때문에 아래에서 선언을 해도 위로 끌어올리게 된다. a(); function a() { console...
최근 js를 기초부터 바닐라js부터 다지자는 생각으로 공부 중이었다. 그러던 와중 예전부터 궁금했지만 지나치던 것들을 하나하나 이해하면서 블로그에 올리면서 정리하잔 생각이 들었다. 그런 생각을 하던 중에 발견한 한 사진을 보고 찾아보기 시작했다. 대학교나 그 전부터 C, C++, JAVA 등 다른 언어들도 기초(?)정도를 공부했던 난 JavaScript에서 '==='란 등호를 보고 저게뭐지..?란 생각을 했었고, 사람들에게 물어보면 "그냥 '=='보다 '==='가 더 정확하니까 '==='를 쓰는게 좋아"라고 막연하게 알려주곤 했다. 물론 나도 그렇게만 받아드렸다. 그래서 한 번 오늘 찾아보고 이해하게 되어 정리를 해본다. MDN에서는 이렇게 설명해주었다. JavaScript는 엄격한 비교와 형변환 비교 ..
최근 인프런 강의 중 하나인 '__따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 를 연습하고 있다. 그러던 와중 map()과 forEach()이 자주 등장하는데 눈으로 보기엔 기능이 거의 비슷한데 어떤 상황에서 어떤걸 써야 더 맞는건지? 반대로 써도 되는지? 왜 굳이 비슷한 기능이 두개가 있는가? 에 대해서 궁금해지기 시작했다. 그래서 알아봤고, 정리를 해야겠다고 생각했다. --------------------------------------- 간략 설명하자면, forEach()과 map()에 가장 큰 차이점은 리턴값의 유무인 것 같다. map()은 리턴값이 있으며 forEach()은 리턴값이 존재하지 않는다. 가볍게 소스코드를 한번 보면서 위에 간략 설명을 풀어서 정리를 해보겠다. 아..
인프런 강좌를 통해 쇼핑몰사이트 제작을 해보려 한다. 사실 졸업작품 때 도움이 될까 싶어 강좌를 사두었지만.. 졸작에 필요한 것만 구글링으로 만들다 보니 이제 시작하게 되었다. 오늘 시작하려고 하는데 갖가지 오류가 뜨는 바람에 문제가 많이 생겨서 보일러플레이트를 다운 받아 git에 올리는 것 까지밖에 하지 못했다.. 이 오류때문에 몇 시간을 날려먹었는지 모르겠다... 오류는 당연히 'bcrypt'가 제대로 설치돼지 않아 발생하는 거라는데 몇 번을 재설치하고 파일을 다시 다운받아도 'npm install'에서 막혔다... 한시간이 지났나 꾸준히 구글링해보니 비쥬얼스튜디오 c++인가 관련된 걸 다운받으라는 주소가 있길래 이왕 까는 김에 비쥬얼스튜디오 정보를 거의 다 다운받았다.. (이거 다운 받는 데 거의 ..
