두치의 개발공부

렉시컬 스코프(Lexical Scope)란? 함수를 어디서 호출하였는지가 아니라 어디에서 선언하였는지에 따라 함수의 결과가 결정되는 것을 말합니다. => 함수가 어디서 선언되었는지에 따라 상위 스코프를 결정합니다. 렉시컬 스코프 예제 예시 코드를 통해서 알아보도록 하겠습니다! var temp = 1; function a() { var temp = 100; b(); } function b() { console.log(temp); } a(); b(); 위 코드의 결과는 100 , 1 일거라고 예상되지만 결과는 1, 1입니다. b() 함수가 a()함수 안에서 호출된 것과는 무관하게 b()함수가 전역에 선언되어 있으므로 100이 아닌 1을 출력하게 됩니다. ※자바스크립트 엔진은 자신이 속한 스코프에서 식별자를 ..

이번에는 이벤트 루프에 대해서 알아보도록 하겠습니다. 1. 이벤트 루프란 무엇인가? 자바스크립트는 싱글 스레드 언어이기 때문에 코드를 순차적으로 실행합니다. 하지만, 실제로 사용자가 브라우저에서 보이는 작업들은 병렬적으로 처리되는 것처럼 보입니다. 이와 같이 처리하기 위해서 javaScript의 동시성을 띄도록 해주는 것이 이벤트 루프(event loop)입니다. 출처 : https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf 위와 같은 환경에서 javaScript 엔진과 상호 연동하기 위해 사용되는 장치가 event loop이다. event loop는 javaScript 엔진에서 제공되는 것은 아니고, 웹 브라..

함수 아규먼츠에 대해서 알아보도록 합시다. 우선 함수 아규먼츠와 가장 비교가 되는 언어인 함수 파라미터가 있습니다.함 함수 아규먼츠 vs 함수 파라미터 함수 아규먼츠는 전달인자, 함수 파라미터는 매개변수를 의미합니다. 바로 아래의 코드를 보도록 합시다. // parmater(매개변수) // 함수의 정의 부분에서 쓰여지는 변수입니다. a와b가 add 함수의 파라미터입니다. const add(a,b) => { return a+b; } // arguments(전달인자) // 함수를 호출할 때 실제로 전달 되는 값입니다. add 함수를 호출할 때 전달하는 1와2가 아규먼츠입니다. add(1,2);​ 함수 아규먼츠의 특징 함수를 호출할 때 위와 같이 add함수에 2개의 전달인자를 사용하여 합한 값을 구할 수도 있..

이번에는 호이스팅에 대해서 알아보도록 하겠습니다! 호이스팅(Hoisting)이란? 흔히들 호이스팅은 코드를 실행하기 전 변수와 함수의 선언을 최상단으로 올린다고 정의하지만 이런 간단한 정의보다는 좀 더 정확하게 이해할 필요가 있습니다. => 코드를 실행하기 전에 자바스크립트 엔진은 먼저 코드에서 실행 컨텍스트를 위해 메모리를 미리 설정하는 행위가 더 정확한 정의라고 생각합니다. ※실행 컨텍스트란 실행할 코드에 제공할 환경 정보를 담은 객체 크게 변수 선언과 함수 선언으로 나누어 볼 수 있습니다. 변수 선언 var, let, const 모두 호이스팅이 발생한다. 하지만 var / let, const는 내부 동작이 다릅니다. - var : 변수 선언과 초기화가 함께 진행됩니다. 여기서 초기화는 undefin..

클로저를 이해하기 전에 렉시컬 스코프(Lexical Scope)라는 개념을 선행하면 이해가 더욱 쉽습니다! 렉시컬 스코프(Lexical Scope) 렉시컬 스코프(Lexical Scope)란? 함수를 어디서 호출하였는지가 아니라 어디에서 선언하였는지에 따라 함수의 결과가 결정되는 것을 말합니다. => 함수가 어디서 선언되었는지에 따라 상위 스코 flex-developer.tistory.com 클로저란 무엇인가? 클로저(closure)는 내부 함수가 스코프에 묶인 외부 함수의 변수에 접근 할 수 있는 개념을 말합니다. 자바스크립트의 고유 개념은 아니고 함수형 프로그래밍 언어에서 사용되는 특징 중 하나입니다. 클로저 예시 예시를 통해서 알아보도록 하겠습니다. function outer() { // 외부함수 ..

자바스크립트에서 시간과 관련된 대표적인 함수 중 대표적인 setTimeout과 setInterval에 대해서 알아보겠습니다. 1. setTimeOut / setInterval 특징 setTimeout - 일정 시간이 지난 뒤 코드를 실행한다. - 지연시간은 밀리세컨드 단위로 1000 => 1초를 의미한다. - 중지하려면 clearTimeOut() 함수를 사용한다. const timeID = setTimeout(() => { console.log('test'); }, 5000); // 지연시간 5초 console.log(timeID); // 반환받은 값을 출력 위 코드는 5초뒤에 'test'를 출력하는 코드입니다. 아래에는 반환받은 값인 timeID를 출력합니다. 결과는 아래와 같습니다. 'test' 출력..

이번에는 자바스크립트에서 비동기 처리에 대해서 알아보도록 하겠습니다. 동기/비동기 란 무엇인가? 동기식(Synchrononus) 먼저 시작된 작업이 완료될 때까지 다른 작업을 시작하지 않고 기다리는 것을 말합니다. 비동기식(Asynchronous) 먼저 시작된 작업의 완료 여부와 상관 없이 새로운 작업을 시작합니다. 새로운 작업이 먼저 시작한 작업보다 먼저 완료될 수도 있습니다. 자바스크립트는 기본적으로 비동기적으로 동작을 합니다. 하지만, 어떤 일을 하다보면 선행되고 있는 작업이 완료된 후에 진행돼야 하는 일이 있습니다. 예를 들면 바지를 입고 신발을 신어야 하는 상황입니다. 바지를 입으면서 신발을 신을 수는 없으니까요! 이와 같이 자바스크립트에서 비동기 방식의 동작을 동기식으로 바꾸는 것을 비동기 처..

배열은 많이 들어보았지만, 유사배열은 생소한 단어일 수 있습니다. 배열이면 배열이지 유사배열은 무엇일까요? 말 그대로 배열과 유사한 거라고 생각합니다, 말로는 이해하기 힘드니 코드를 직접 봅시다! fake dom을 만들어 접근하는 단순한 코드이다. console로 찍은 결과는 아래와 같다. 1. console.log(fake) 찍힐걸 보면 length도 있고, []로 감싸져 있어 마치 배열처럼 보인다. 2.console.log(typeof fake) type을 찍어보니 object다. 배열도 object니 진짜 배열인가 싶기도 하다. 3.console.log(Array.isArray(fake)) 여기서 fake는 배열이 아닌 것을 알 수 있다. ※ Array.isArray 함수는 배열인지 아닌지 확인하는..

함수 선언식(Function Declaration) 일반적인 프로그래밍 언어에서 사용되는 선언 방법이다. 선(先)이니까 function을 앞에 쓴다... 라고 기억을 해보자 ㅎㅎ function hello(){ return 'hello~'; } hello(); // hello~ 함수 표현식(Function Expression) JavaScript에서 함수를 다른 방법으로 생성하는 방법이다. javaScript는 유연한 친구니까!! const hello = function () { return "hello~"; }; hello(); // hello~ 그렇다면 함수선언식을 써야해 ? 함수 표현식을 써야해? 라는 의문점이 생긴다. 함수선언식과 함수표현식의 차이점에 대해서 알아봅시다. 함수선언식 vs 함수표현식..

데이터 타입(Data Type) 데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터의 형태입니다. JavaScript에서 Data Type은 크게 2가지로 나뉩니다. 원시 타입 (Primitive Data Type) Boolean null Undefined Number String Symbol 객체 타입 원시 값 객체를 제외한 모든 타입은 불변 값(변경할 수 없는 값)을 정의합니다. Boolean 타입 Ture(참)와 False(거짓) 2가지 값만 가지는 타입 null 타입 null 하나의 값을 가지는 타입 null 값은 일반적으로 존재하지 않거나 유효하지 않은 object 또는 주소를 의도적으로 가리 키는 참조를 나타냅니다. null의 동작이 원시적으로 보이기 때문에 원시값이지만, 모든 objec..