본문 바로가기

Javascript

(6)
JavaScript - this와 호출, bind 자바스크립트에서의 함수의 this 키워드는 다른 언어들과 비교하여 조금 다르게 동작한다. 또한 strict mode 와 non-strict mode 사이에서도 조금 다르다. 호출 장소 대부분의 경우에 this의 값은 함수를 호출하는 방법에 의해 결정된다. 자바스크립트에서는 선언 때 결정되는 것이 있고, 호출할 때 결정되는 것이 있는데, this의 핵심은 호출하는 방법에 따라 결정된다는 것이 핵심이다. ES5는 함수의 this 값이 함수가 어떻게 호출되었는지 개의치 않고 설정할 수 있는 방법이 있는데, 바로 bind 메서드의 사용이다. 먼저 아래와 같은 객체를 만들어 실행해보자. var me = { name: 'beom seok', sayMyName: function() { console.log(this)..
JavaScript - 함수, 화살표 함수와 기존 함수 (Function, Arrow Function and Classic Function) 자바스크립트의 ES6에서 추가된 문법 중 화살표 함수가 있다. 화살표 함수 (arrow function) 란 화살표로 인수를 전달하는 방식으로 함수를 선언하는 것을 말하는데, 기존의 방식의 함수 선언을 대체할 수 있지만, 화살표 함수에 없는 몇 가지가 있다. 이를 다뤄보려고 한다. 함수에 대한 내용은 아래 더보기를 누르면 나온다. 더보기 함수란 인수들을 넣었을 때 (또는 넣지 않았을 때), 어떠한 특정 작업들을 처리하는 코드의 모음이다. 어떠한 값들을 반환할 수도 있고 (return), 또는 반환하지 않을 수도 있으며 (void function), 인수 (arguments) 들을 넣을 수도, 넣지 않을 수도 있다. 함수는 코드의 재사용성을 높인다. 가령 사람이 입장할 때마다 그 사람에게 'Hello ~~..
JavaScript - 호이스팅 (Hoisting) 호이스팅이란 변수의 정의가 그 스코프에 따라 선언과 할당으로 분리되는 것을 의미한다. 쉽게 말하면 아직 선언되지 않은 변수나 함수를 호출하여 사용하는 것을 말한다. 이는 자바스크립트의 동작 방식 때문이다. 자바스크립트 함수는 실행되기 전 함수 안에 필요한 변수값들을 모두 모아서 유효범위의 최상단에 선언한다. 다음 코드를 노드에서 실행시켜보자. 기본적으로 함수를 호출하기 위해선 당연히 함수를 선언해주어야 한다. function myFunc () { console.log('hello world!'); } myFunc(); 결과 PS C:\Users\bumsu\nodejs-projects\노드js교과서> node hello hello world! 그런데 myFunc()을 선언되기 전 앞에다 두어도 실행이 잘 ..
JavaScript - 에어비앤비 자바스크립트 스타일 가이드 (Airbnb JS Style Guide) https://github.com/tipjs/javascript-style-guide#%ED%98%95types tipjs/javascript-style-guide Airbnb JavaScript 스타일 가이드 한국어. Contribute to tipjs/javascript-style-guide development by creating an account on GitHub. github.com 위 문서를 참고하였다. 위 문서 중 몇가지 내가 특히 주의하면 좋을 점들을 정리해 놓았다. 문자열 (string) 에는 싱크쿼트 (' ')를 사용한다. (6.1) 100문자 이상의 문자열은 문자열 연결을 사용하여 복수행에 걸쳐 기술한다. (6.2) 프로그램에서 문자열을 생성하는 경우 문자열 연결이 아닌 templ..
JavaScript - 이벤트 루프 (Event Loop) 비동기와 동기에 대해서 더 깊게 알아보자. 먼저, 자바스크립트의 언어의 특징 중 하나는 자바스크립트의 함수가 실행되는 방식인데, 이를 보통 "Run to Completion" 이라고 한다. 이는, 하나의 함수가 실행되면 이 함수가 실행이 끝나기 전 까진 다른 어떤 작업도 중간에 못 끼어든다는 이야기이다. 자바스크립트 엔진은 하나의 호출 스택만을 사용한다. 따라서, 현재 스택에 쌓여있는 모든 함수들이 실행을 마치고, 스택에서 제거되기 전 까진 다른 어떠한 함수도 실행될 수 없다. 아래 코드를 보자. function delay() { for (let i = 0; i < 1000000000; i++); } function foo() { delay(); bar(); console.log('foo!'); // (..
JavaScript - 비동기와 동기 (Asynchronous and Synchronous) 자바스크립트의 비동기와 동기에 대해서 알아보자. 동기적 실행 (synchronous) 이란 동시에 일어난다는 이야기이다. 요청과 그 결과가 동시에 일어난다는 일종의 약속이다. 요청을 하면 시간이 얼마가 걸리던, 요청한 자리에서 결과가 주어져야 한다. 즉, 요청과 결과가 한 자리에서 동시에 일어난다. A 노드와 B 노드 사이의 작업 처리 단위 (transaction) 를 동시에 맞춘다. 반면 비동기적 실행 (Asynchronous) 은 동시에 일어나지 않는다를 의미한다. 즉 요청과 결과가 동시에 일어나지 않는다는 약속이다. 요청한 그 자리에서 결과가 주어지지 않는다. 노드 사이의 작업 처리 단위를 동시에 맞추지 않아도 된다. 각각에는 장단점이 있으며, 맞는 쓰임새가 있다. 먼저 동기방식은 설계가 간단하고 ..