Bin's Blog

ES6부터 새롭게 추가된 타입인 Symbol에 대해서 알아보자. 고유성이라는 단어가 Symbol의 핵심 단어이다. 예를 들어, 학교에서 학생들이 같은 유니폼을 입어도 그들 자신만의 고유한 이름을 가지고 있어서 선생님은 이름을 통해 학생을 구별할 수 있다. Symbol은 자바스크립트에서 고유하고 변경할 수 없는(immutable)한 데이터 타입이다. 즉, 한 번 생성된 Symbol은 다른 어떤 Symbol과도 완전히 다른 고유한 값을 가지게 된다. Symbol 함수를 호출할 때마다 새로운, 고유한 Symbol 값을 생성한다. 그래서 Symbol은 주로 객체의 키(key)로 사용되며, 이를 통해 객체 내에서 고유한 속성을 보장한다. 객체는 무엇일까? 여러 가지 정보를 담을 수 있는 일종의 상자이며, 이 정보..

Promise는 자바스크립트에서 비동기를 처리하기 위한 객체이다. Promise는 어떤 작업이 완료되었을 때 그 결과를 처리하는 방법을 제공한다. Promise는 3가지 상태를 가질 수 있다. 1. Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 상태 2. Fulfilled(이행): 비동기 처리가 성공적으로 완료된 상태 3. Rejected(거부): 비동기 처리가 실패하거나 오류가 발생한 상태 예를 들어서, pending이라는 것은 친구의 생일이 오지 않아서 선물을 주지 않은 상태를 의미하고, Fulfilled는 친구의 생일날 선물을 준다. 이것이 약속을 지킨 것이다. Rejected는 어떤 이유로든 선물을 줄 수 없다. 이것이 약속을 어긴 것이다. let promise = new Prom..

비동기란, "동시에 일어나지 않는다"는 의미이다. 자바스크립트는 본래 싱글 스레드 언어이다. 싱글 스레드는 쉽게 말해 실을 생각해보자. 실은 다 풀려야 끝이 난다. 한 번에 하나의 작업만 처리할 수 있다. 예를 들어, 서버에서 데이터를 가져오는 작업을 하는데. 작업 시간이 오래 걸린다고 하는데 이 작업이 동기적으로 처리된다면, 데이터를 가져올 때까지 아무것도 할 수가 없어 사용자는 웹 페이지에서 아무런 반응을 볼 수 없게 된다. 하지만 비동기적으로 처리되면, 서버에서 데이터를 가져오는 동안에도 다른 작업들을 처리할 수 있다. 즉, 데이터를 요청하고 그 결과를 기다리는 동안에 다른 작업들을 계속 진행할 수 있다. 이렇게 함으로써, 싱글 스레드인 자바스크립트에서도 사용자가 웹 페이지와 상호작용하는 동안에도 ..

this는 함수와 객체의 구분의 느슨한 자바스크립트에서 실질적으로 이 둘을 구분하는 유일한 기능이다. 어떤 객체 내부에서 사용될 때 그 객체를 가리키는 역할을 한다. 만약 어떤 객체의 함수에서 this를 사용한다면, 그 this는 그 함수가 속한 객체를 가리킨다. 자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. this는 함수를 호출할 때 결정된다. 1.1.1 전역 공간에서의 this 전역 공간에서 this는 전역 객체를 가리킨다. 자바스크립트 런타임 환경에 따른 다른 이름과 정보를 가지고 있다. 브라우저 환경에서 전역객체는 window이고 Node.js환경에서는 global이다. * 전역 공간에서의 this(브라우저 환경) // { alert: f(), atob: f()..

스코프란 변수나 함수가 존재하는 유효범위 또는 영역이다. 예를 들어) 내가 만약 플레이스테이션 컨트롤러를 찾고 있다고 생각해보자. 이때 내 방이 "스코프"가 된다. 왜냐면 컨트롤러는 내 방에서만 사용 가능하니까. 만약 컨트롤러를 찾지 못한다면 아마 거실이나 다른 방으로 가서 찾아볼 것이다. 이렇게 내 방에서 거실로, 거실에서 다른 방으로 가는 것이 바로 "스코프 체인"이다. 프로그래밍에서도 이와 비슷하게 변수나 함수를 찾을 때, 현재의 스코프, 즉 현재 위치에서 찾아보고, 만약 그곳에서 찾지 못한다면 상위 스코프로 가서 찾아보는 과정을 반복한다. ES5까지는 전역공간을 제외하면 오직 함수에 의해서만 스코프가 생성됐는데, ES6부터 let, const의 등장으로 블록 레벨 스코프를 지원하기 시작하면서 함수..

호이스팅을 쉽게 먼저 알아보자. 내가 시간여행이 가능한 사람이라고 생각해보자. 미래에서 일어날 일을 미리 알 수 있다. 그리고 내가 그 정보를 가지고 현재로 돌아와서 그것을 사용하려고 한다. 자바스크립트도 비슷하다. 자바스크립트는 코드를 두 번 읽는다. 첫 번째로 읽을 때, 자바스크립트는 미래에 어떤 변수나 함수가 선언되는지 미리 보고 그 정보를 현재로 가져온다. 이것이 바로 호이스팅이다. 호이스팅은 미래의 변수나 함수를 미리 현재로 가져온다. 그런데 변수나 함수의 선언만 가져오고 할당은 가져오지 않는다. 할당은 실제 코드가 그 위치에 도달했을 때 발생한다. 변수 선언, 함수 선언, 변수 할당일 때 어떻게 되는지 직접 보자. 1. 변수 선언 // undefined console.log(x); var x ..

* JSON이란? Javscript Object Notation의 약자로, 데이터를 표현하기 위한 간단하고 일관된 형식이다. 텍스트 기반 형식으로, 사람과 컴퓨터가 모두가 이해하기 쉽고 다른 프로그래밍 언어와 호환되는 데이터 교환 형식 일종의 구조화된 리스트라고 생각할 수 있다. 리스트 안에는 중괄호('{}')로 둘러싸인 키-값 쌍으로 이루어진 항목들이 들어간다. 이 항목들은 쉼표로 구분된다. 예를 들어, "이름"과 "나이"라는 두 가지 정보를 담은 JSON을 보자. { "이름": "예시", "나이": 10 } 이름은 key이고, 예시는 그에 대응하는 값(value)이다. JSON에서 문자열은 큰따옴표로 둘러싸여 있으며, 숫자, 불리언, 배열, 다른 JSON 객체 등 다양한 데이터 유형을 표현할 수 있다..

1. let let은 블록 레벨 스코프를 갖는다. 즉 let으로 선언된 변수는 블록 "{}" 내에서만 접근 할 수 있다. let으로 선언된 변수는 호이스팅이 발생하지만 변수가 선언되기 전에 접근하려고 하면 ReferenceError가 뜨게 된다. 이를 임시적 사각 지대(Temporal Dead Zone, TDZ)라고 부른다. (변수 선언과 초기화가 분리되어 있다.) let으로 선언된 변수는 재할당이 가능하지만, 재선언은 불가능하다. 예시 코드 console.log(name); // ReferenceError: name is not defined { console.log(name); // ReferenceError: Cannot access 'name' before initialization let nam..

1. 실행 컨텍스트란? 실행 컨텍스트는 컴퓨터 프로그램이 실행되는 동안 필요한 정보를 저장하고 관리하는 공간(실행할 코드에 제공할 환경 정보를 모아놓은 객체) 컨텍스트는 프로그램이나 시스템이 작동하는 특정 조건이나 상황. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 콜 스택에 쌓아올렸다가 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다. 우리가 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 것뿐이다. 실행 컨텍스트와 콜 스택 var a = 1; function outer() { function inner() { // undefined console.log(a); var a = 3; } inner(); // ..

1. undefined undefined는 자바스크립트에서 "없음"을 나타내는 값 중에 하나이다. 사용자가 명시적으로 지정할 수도 있지만 값이 존재하지 않을 때 다음 세 경우에 undefined를 반환하다. 값을 대입하지 않은 변수, 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때 return 문이 없거나 호출되지 않는 함수의 실행 결과 자동으로 undefined를 부여하는 경우 // 자동으로 undefined가 할당되는 것이 아니라 // 아무것도 할당하지 안혹 끝난다. 접근할 때 undefined을 반환한다. let a; // 값을 대입하지 않은 변수에 접근: undefined; console.log(a); let obj = { ..