JavaScript의 변수를 선언할 수 있는 방법으로 var, let, const가 있습니다. 각 키워드로 선언한 변수들은 어떤 차이가 있는지 알아보겠습니다. var ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었습니다. var 키워드로 선언된 변수에는 어떤 특징이 있을까요? 중복 선언이 가능하다 var 키워드로 선언한 변수는 중복 선언이 가능합니다. 어떤 말인지 코드로 살펴보겠습니다. 예제와 같이 var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 가능합니다. 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작합니다. 반면, 초기화문이 없는 변수 선언문은 무시됩니다. 따라서 만약 동일한 이름의 변수가 이미 선언된 것을 모르..

지난 포스트에서 잠깐 다루었던 콜 스택(call stack)에 대해 알아보고, 조금 더 나아가 자바스크립트는 한 순간 하나의 작업만 처리할 수 있는 단일 스레드 기반의 언어임에도 불구하고 동시에 많은 작업을 수행할 수 있는지 알아보겠습니다. 스택과 큐 콜 스택에 알아보기 전 스택과 큐 자료구조에 대해 간단히 알아보고 넘어가겠습니다. 스택은 출입구가 하나인 데이터 구조입니다. 순서대로 a, b, c 데이터를 넣었다면 꺼낼때는 반대로 c, b, a순서로 꺼내게 됩니다. (FILO, First In Last Out) 큐는 양쪽이 열려있는 파이프를 떠올리면 됩니다. 종류에 따라 양쪽 모두 입/출력이 가능한 큐도 있으나 일반적으로 큐에 순서대로 a, b, c 데이터를 넣었다면 꺼낼때는 a, b, c 순서대로 꺼내..

this와 execution context 자바스크립트의 혼란스러운 개념 중 하나로 this키워드에 대해 알아보도록 하겠습니다. 더불어 실행 컨텍스트(execution context)도 간단히 알아보겠습니다. 실행 컨텍스트 또한 중요한 개념이기에, 다른 글에서 더욱 자세히 알아보겠습니다. this와 실행 컨텍스트, 이 두가지 개념을 함께 이해하면 더이상 this가 혼란스럽지 않을 것 입니다! 들어가기 앞서 실행 컨텍스트에 대해 먼저 간단히 알아보겠습니다. 실행 컨텍스트(execution context)란? 자바스크립트 엔진은 코드를 실행하기 위해서 실행에 필요한 여러가지 정보(변수, 함수, 스코프, this)들을 알고 있어야 합니다. 실행에 필요한 정보를 형상화하고, 구분하기 위해 자바스크립트 엔진은 이..

strict mode란? ECMAScript5(ES5)에서 소개된 strict mode(엄격 모드)에 대해 알아보겠습니다. 자바스크립트의 엄격 모드는 일반 코드와는 다른 시멘틱을 가지고 있기 때문에, 이를 지원하지 않는 브라우저에서는 엄격모드와 비-엄격 모드의 코드가 다른 방식으로 동작할 것입니다. 엄격 모드와 비-엄격 모드의 코드는 공존할 수 있습니다. 따라서 선택적으로 사용하는 것이 가능합니다. 엄격 모드에서는 평범한 자바스크립트의 시멘틱에 몇 가지 변경을 일으킵니다. 1. 기존에 조용히 무시되던 에러들을 throwing 합니다. 2. Javascript 엔진의 최적화 작업을 어렵게 하는 실수들을 바로잡습니다. 가끔씩 엄격 모드의 코드는 비-엄격 모드의 동일 코드보다 더 빨리 작동할 수 있습니다. 3..

스코프(Scope, 유효 범위)란, 간단히 말하면 특정 장소에 변수를 저장하고 나중에 그 변수를 찾기 위해 정의된 규칙입니다. var foo = 0; function myFunction() { var foo = 100; console.log(foo); } myFunction(); // (1) console.log(foo); // (2) (1)의 결과와 (2)의 결과는 각각 어떻게 될까요? 결과는 (1)은 100이 되고, (2)는 0이 됩니다. 예시에서 전역에 선언된 변수 foo는 어디에서든 참조할 수 있는 반면에 함수 myFunction 내에서 선언된 변수 foo는 함수 내부에서만 참조할 수 있고 외부에서는 참조할 수 없습니다. 이러한 규칙을 스코프라고 합니다. 만약 스코프가 없다면 같은 식별자로 쓰인 ..

함수란 어떤 작업을 수행하기 위한 로직을 정의 한 코드블록 입니다. 일반적으로 반복 되는 작업을 함수로 정의하고 재사용하여 효율적인 프로그래밍을 가능하게 합니다. 이외에 객체의 메소드, 정보 은닉, 클로저 등의 기능을 수행 할 수 있습니다. 1. 함수 정의 자바스크립트에서 함수를 정의하는 방법은 3가지가 있습니다. 1. 함수 선언문 2. 함수 표현식 3. Function 생성자 함수 1-1 함수 선언문 함수 선언문은 일반적으로 함수를 정의 할 때 사용되는 방법입니다. function 키워드와 함께 함수명, 매개변수(parameter), 함수 몸체로 이루어져 있습니다. // 함수 선언문 // // 함수명은 해당 함수를 구분할 수 있는 식별자(Identifier)로 // 함수 선언문에서 함수명은 반드시 필요..

자바스크립트의 모든 값은 타입이 존재합니다. 그리고 값의 타입은 개발자에 의해 변환(명시적 강제변환, Type Casting)되거나, 자바스크립트 엔진에 의해 암묵적으로 변환(암시적 강제변환, Type Coercion) 될 수 있습니다. 차이는 명확하게 구분되어집니다. 명시적 강제변환은 의도적으로 타입변환을 하였기에 코드만 봐도 알 수 있으며, 암시적 강제변환은 다른 작업 도중 부수효과(Side Effect)로부터 발생하는 변환 입니다. 아래 코드에서 명시적 강제변환과 암시적 강제변환의 차이를 볼 수 있습니다. var x = 10; var str = x + ''; var str2 = String(x); console.log(typeof str, str); // 'string', '10' console.l..

데이터 타입의 종류 자바스크립트의 데이터 타입은 크게 기본형과 참조형으로 나눌 수 있습니다. 기본형 데이터 타입(원시형, primitive type) 숫자(Number), 문자(String), 불리언(Boolean), null, undefined, Symbol 참조형 데이터 타입(reference type) 객체(Object), 배열(Array), 함수(Function), 날짜(Date), 정규표현식(RegExp), Map, WeekMap, Set, WeekSet 기본형 데이터 타입 1. Number 자바스크립트는 다른 언어와 달리 하나의 정수와 실수 구분 없이 하나의 숫자 타입만 존재합니다. var integer = 10; // 정수 var f = 7.716; // 실수 var negative = -5..

Javascript 자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 언어이며, 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어(Interpreter Language)입니다. 인터프리터는 소스코드를 즉시 실행하고 컴파일러는 빠르게 동작하는 머신 코드를 생성하고 최적화하는데, 대부분의 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합하여 비교적 처리 속도가 느린 인터프리터의 단점을 해결했습니다. 이를 통해 컴파일 단계의 추가적인 시간이 필요함에도 빠른 코드의 실행이 가능케 합니다. ECMAScript는 자바스크립트의 표준 명세를 말하며, 언어의 타입, 값, 함수 등 핵심 문법을 규정한 것입니다. 각 브라우저 제조사는 ECMAScri..

개발자가 해야 할 일은 문제를 해결하기 위한 방안을 고민하고, 문법에 맞게 코드로 구현해내는 일이다. 다시 말해 구현된 코드는 개발자가 의도한 대로 정확히 동작하여 문제를 해결해야 한다. 자신이 구현 한 코드가 어떻게 동작하고, 예측 가능하며 이것을 동료에게 설명할 수 있어야 한다. 이를 위해서는 기본 개념과 동작 원리에 대한 이해가 바탕이 되어야한다. 기본 개념과 동작 원리를 이해하지 못한 상태에서 구현하는 것은 신뢰할 수 없고 유지 보수하기 까다로운 코드가 될 것이다. 그리고, 어느 순간 성장을 멈추고 말 것이다. 기본 개념을 알고 있다는 것은, 정확한 용어를 사용할 수 있도록 한다. 정확한 용어의 사용은 명확한 의사소통을 가능케하며, 이는 협업의 기본이며 필수 요소이다. 동작 원리를 알고 있다는 것..