본문 바로가기

JavaScript

(6)
[JavaScript] var과 let, const var var은 ES6 이전의 변수 선언 방식으로, 함수단위의 스코프를 가지므로 매우 유연한 방식으로 변수를 선언할 수 있다. var a = 'a' function outter(){ console.log(a) var a = 'b' function inner(){ console.log(a) } inner() console.log(a) } outter() consol.log(a) 위와 같은 코드에서, var 변수 a의 값은 아래와 같이 출력된다. undefined b b a 자바스크립트는 변수의 선언을 위로 끌어올리는 호이스팅 특성을 가지기 때문에, 처음 출력문에서 a는 값이 정의되지 않는 상태가 된다. 또한 마지막 출력문에서 outter 함수에서 지정된 a의 값 b는 유효하지 않게 된다. 때문..
[JavaScript] 콜백함수(Callback Function)와 비동기 처리 콜백 함수(Callback Function) 콜백 함수란, 특정 함수에게 자신의 제어권을 넘겨준 함수로써 제어권을 받은 함수가 콜백 함수의 처리 시기, 처리 방법등을 정의한다. 콜백 함수는 사용자가 함수를 실행하는 것이 아닌, 다른 함수가 함수를 실행한다는 점에 특징적이다. 콜백 함수에 대해 이해하기 위해 콜백함수를 인자로 가지는 setTnterval() 함수를 살펴보자. setInterval(function(){ console.log('1초마다 실행될 겁니다.') }, 1000) setInterval 함수는 주기함수로, 인자로 콜백함수와 주기를 가진다. 이때, 주어진 주기마다 콜백함수를 실행시키는 기능을 한다. 위의 코드에서 '1초마다 실행될 겁니다.'라는 문장은 주어진 주기인 1초마다 출력되게 될 것..
[JavaScript] 스코프와 실행 컨텍스트 Scope(스코프) 스코프란? 변수의 유효범위로 함수가 정의될때 생성된다. var a = 1 function outer(){ console.log(a); function inner(){ console.log(a); var a = 3; } inner(); console.log(a); } outer(a); console.log(a); 위의 함수를 예시로 스코프에 대해 알아보자! 아래는 각 코드 라인별로의 스코프가 변화하는 모습이다. line 0 : 전역 line 2 : 함수 outer이 선언되었으므로, outer로 변경 line 3 : 함수 inner이 선언되었으므로, inner로 변경 이때 프로그램이 실행되면서 변수의 값을 찾아야 할 경우, 스코프를 거슬러 올라가며 변수의 값을 찾아간다. Execution..
[JavaScript] 함수 선언문과 함수 표현식 자바스크립트에서 함수를 선언하는 방식은 3가지가 있다. 1. 함수 선언문 function a(){ return 'a'; } 가장 일반적으로 알고 있는 선언문의 형태이다. 호이스팅의 대상이된다. 2. 기명 함수 표현식 var a = function a(){ return 'a'; } 변수에 선언된 함수를 할당하는 것을 함수 표현식이라 한다. 기명 표현식은 함수명을 지정해 주는 함수 표현식이다. 3. 익명 함수 표현식 var a = function { retunr 'a' } 함수명을 지정하지 않는 함수 표현식이다. 함수 선언문을 사용하게 되면 전체가 호이스팅되지만 함수 표현식은 변수만 호이스팅되어 올라가고, 할당된 함수를 그대로 남아있게 된다. 호이스팅의 여부가 중요한 이유는 바로 실무에서의 차이이다. 실무에..
[JavaScript] Hoisting(호이스팅) 호이스팅의 사전적인 의미는 끌어당기다로, 자바스크립트에서는 변수의 '선언'와 함수의 '선언'을 끌어당기는 행위를 말한다. console.log(a()); console.log(b()); fuction a(){ return 'a'; } var b = function bb(){ return 'bb'; } 위와 같은 프로그램이 있다. 자바스크립트를 자주 사용하지 않은 사람이라면 이는 첫줄에서 오류가 날 것이라고 생각할 것이다. 하지만 자바스크립는 내부 시스템에서 각 함수의 선언을 가장 상단으로 뜰어 올려주기 때문에, 오류가 발생하지 않는다. 이것이 바로 Hoisting 기능인 것이다. 하지만 호이스팅은 철저히 '선언'에 해당하는 기능이다. 만약 아래와 같은 프로그램이 있다면, 선언과 할당이 분리되어 있으므로 ..
[JavaScript] 기본형과 참조형 JS에서의 자료형은 크게 기본형과 참조형으로 구분할 수 있다. 기본형(Primitive Type) 값을 그대로 할당하는 자료형으로, Number, Strignm Boolean, null, undefined가 이에 해당한다. 기본형의 변수는 특정 메모리의 주소를 가지고 해당 메모리에 값을 저장한다. 변수에 새로운 값을 대입하는 것은 값을 변경하는 것이 아닌 새로 덮어쓰는 행위이다. 참조형(Reference Type) 값이 저장된 주소값을 할당하는 자료형으로, 주로 객체가 이에 해당하며 대표적으로 Array, Function, RegExp가 이에 해당한다. 제일 기본적인 객체를 이용하여 참조형에서 데이터를 저장하는 과정을 살펴보자 var obj = { a = 'a', b = 1 } 위와 같은 객체를 아래와 ..