this 🔥 ① this 키워드 객체지향 프로그래밍에서 살펴보았듯이 객체 는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다. > 객체 리터럴 방식 * 리터럴(=literal)은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법(=notation) 을 말한다.* circle 객체 내부에서 상태 (radius)를 동작시키는 메서드 getDiameter는 메서드 내에서

빌트인 객체 ① 자바스크립트 객체의 분류 자바스크립트 객체는 다음과 같이 크게 3개의 객체로 분류할 수 있다. ⑴ 표준 빌트인 객체 표준 빌트인 객체는 ECMAScript 사양에 정의된 객체를 말하며, 애플리케이션 전역의 공통 기능을 제공한다. 표준 빌트인 객체는 ECMAScript 사양에 정의된 객체이므로 자바스크립트 실행 환경(브라우저 또는 Node.js 환경)과 관계없이 언제나 사용할 수 있다. 표준 빌트인 객체는 전역 객체의 프로퍼티로서 제공된다. 따라서 별도의 선언 없이 전역 변수처럼 언제나 참조할 수 있다. ⑵ 호스트 객체 호스트 객체는 ECMAScript 사양에 정의되어 있지 않지만 자바스크립트 실행 환경(브라우저 또는 Node.js 환경)에서 추가로 제공하는 객체 를 말한다. 브라우저 환경에서는 _**DOM, BOM, CANVAS, XMLHttpRequest, fetch, Web Storage

생성자 함수에 의한 객체 생성 앞서 '객체 리터럴'에서 객체 리터럴에 의한 객체 생성 방식을 살펴보았다. 객체 리터럴에 의한 객체 생성 방식은 가장 일반적이고 간단한 객체 생성 방식이다. 객체는 객체 리터럴 이외에도 다양한 방법으로 생성할 수 있다. '객체 리터럴' 이외의 객체 생성 방법에 대해 알아본다. ① Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다.<

let, const 키워드와 블록 레벨 스코프 ① var 키워드로 선언한 변수의 문제점 ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. var 키워드로 선언된 변수는 다음과 같은 특징이 있다.다른 언어와는 구별되는 독특한 특징으로, 주의를 기울이지 않으면 문제를 발생시킬 수 있다. > 변수 중복 선언 허용 함수 레벨 스코프 변수 호이스팅 ② let 키워드 앞에서 살펴본 var 키워드의 단점을 보완하기 위해 ES6에서는 새로운 변수 선언 키워드인 let과 const를 도입했다. var 키워드와의 차이점을 중심으로 let 키워드를 살펴보자. ⑴ 변수 중복 선언 금지 var 키워드로 이름이 동일한 변수를 중복 선언하면 아무런 에러가 발생하지 않는다. 이때 변수를 중복 선언하면서 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이 재할당되어 변경되는 부작용이 발생한다. **하지만 let 키

전역 변수의 문제점 전역 변수의 무분별한 사용은 위험하다. 전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야 한다. 이번 장에서는 전역 변수의 문제점과 전역 변수의 사용을 억제할 수 있는 방법을 알아본다. 변수의 생명 주기 > 지역 변수의 생명 주기 변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다. 그리고 언젠가 소멸한다. 즉, 변수는 생물과 유사하게 생성되고 소멸되는 생명 주기(life cycle)이 있다. 변수에 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다. 지역 변수 x는 foo 함수가 호출되기 이전까지는 생성되지 않는다. foo 함수를 호출하지 않으면 함수 내부의 변수 선언문이 실행되지 않기 때문이다. '변수 호이스팅'에서 공부했듯이, 변수 선언은 선언문이 어디에 있든 상관없이 런타임 이전에 실행된다. 그런데 엄밀히 말하면 위 설명은 전역 변수에

스코프 스코프란 스코프(scope, 유효범위) 는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이며, 스코프의 이해가 부족하면 다른 개념을 이해하기 어려울 수 있다. 더욱이 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징(렉시컬 스코프, 정적 스코프)이 있으므로 주의가 필요하다. ① var 키워드로 선언한 변수와 ② let, const로 선언한 변수의 스코프도 다르게 동작한다. 스코프는 변수 그리고 함수와 깊은 관련이 있다. 우리는 DEEP DIVE 한 장 요약 - 함수에서 스코프를 이미 경험했다. 함수의 매개변수는 함수 몸체 내부에서만 참조할 수 있고 함수 몸체 외부에서는 참조할 수 없다고 했다. 이것은 매개변수를 참조할 수

에러처리 에러 처리의 필요성 에러가 발생하지 않는 코드를 작성하는 것은 불가능하다고 볼 수 있다. 발생한 에러에 대해 대처하지 않고 방치한다면 프로그램을 강제 종료될 것이다. try catch 문을 사용해 발생한 에러를 적절하게 대응하면 프로그래밍이 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있다. 직접적으로 에러를 발생하지 않는 예외적인 상황이 발생할 수도 있다. 예외적인 상황에 적절하게 대응하지 않으면 에러로 이어질 가능성이 크다. 단축 평가 또는 옵셔널 체이닝 연산자 (?.)를 사용하지 않으면 다음 처리에서 에러로 이어질 가능성이 크다. 따라서 우리가 작성한 코드에서는 언제나 에러나 예외적인 상황이 발생할 수 있다는 것을 전제하고 이에 대응하는 코드를 작성하는 것이 중요하다. try catch finally 기본적으로 에러 처리를 구현하는 방법은 크게 두 가지가 있다. **① 예외적인 상황이 발생하면 반환하는 값(null

제너레이터와 async/await 왜 배워야 하는지 ? 사실 async await가 제너레이터에서 비롯되었다는 것 조차 몰랐다. 기존 한 장 요약 (프로미스) 에서도 말했지만, async await에 대해 조금 더 아는 이유는 단지 Promise 문법이 어려워서였다 >.then() >.catch() >.finally() 와 같은 프로미스의 프로토타입 메서드 들을 '어디서는 쓸 수 있고, 어디서는 쓸 수 있는지' 도 몰랐고, 뒤에 다루는 내용이지만 에러처리를 위해 try로 catch 비동기 함수를 감싸더라도 제대로 된 에러 캐치가 되지 않는 다는 것 또한 이번에 처음 알았다. 따라서 이번 장을 통해 프로미스를 기반으로 동작하는 asyn

프로미스 왜 배워야 하는지? > new Promise ? new는 뭐고 Promise는 뭐야 ... return은 또 왜 붙여... > ... > async/await(?) 이거 쉽네..! 이걸로 그냥 써야지 필자는 이런식으로 비동기 프로그래밍에 대한 이해를 덜 된 상태에서 ES6의 프로미스 문법을 사용하는 것이 아닌, ES8 의 async await로 바로 넘어가 작업을 시작했었다. > async await를 기반으로 axios를 사용했을 때 너무 찰떡이라 오히려 필요성을 못느꼈을 지도 모른다... 하지만 콘솔창에서 [[object Object]], Promise 등의 로그가 찍힌 것을 보고 해석을 할 수 없어 그냥 구글링으로 때려 맞추는 식의 코딩을 진행하였다. 프로미스에 대한 이해가 없거나, 부족하다면 fulfilled, rejected가 나올 때 매우 난감할 뿐만 아니라 Promise에서 제공하는 then, catch,

REST API 배워야 하는 이유를 찾자면? > '저는 REST API를 바탕으로 백엔드 서버와 ... 어쩌구' 위와 같은 말들을 나의 자기 소개서에 많이 적어냈다. 대충 무슨 느낌인지는 알 것 같았다. HTTP 요청을 보낼 때, 백엔드와 합의하에 HTTP 요청을 맞춰 HTTP REQUEST를 보내는 느낌으로 얼추 이해하고 있었다. 이번 장을 통해 REST API가 뭔지, RESTful한 API는 뭔지에 대해 정확히 알고 갈 수 있을 것이다. REST란? REST(REpressentational State Transfer)는 HTTP/1.0과 1.1의 스펙 작성에 참혀했고 아파치 HTTP 서버 프로젝트의 공동 설립자인 로이 필딩의 2000년 논문에서 처음 소개되었다. 발표 당시의 웹이 HTTP를 제대로 사용하지 못하고 있는 상황을 보고 HTTP의 장점을 최대한 활용할 수

43장 Ajax 배워야 하는 이유를 찾자면? JS에 대한 깊은 이해를 하지 않은 상태에서 리액트로 들어가게 되다보니 어쩌다 보면, Ajax에 대한 개념을 모른 채로 많은 프로젝트들을 진행을 했었다. 리액트에서 HTTP 요청을 보낼 때는 주로 axios를 통해 작성하다보니, 실질적으로 빌트인 객체 인 XMLHttpRequest의 주요 기능들을 모른 채 작업한 것이 있었던 것 같다. 하지만 기본적으로 Ajax 에 대한 개념을 제대로 갖추지 않은 채로 사용을 하다보니, ① data를 보낼 때 라던지 ② header를 설정할 때 등 '이 부분에는 무엇을 써야하는 지' 와 같은 궁금증들이 생겨 이번 계기로 axios의 전신인 XMLHttpRequest에 대해 깊이 빠져 보고자 한다

비동기 프로그래밍 동기 처리와 비동기 처리 자바스크립트 엔진은 기본적으로 함수를 호출하면 ① 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜 스택이라고도 부름)에 푸시되고 ② 함수 코드가 실행된다. 함수 코드의 실행이 종료되면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거된다 함수가 실행되려면 ① 함수 코드 평가 과정에서 생성된 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되어야 한다. 다시 말해, **실행 컨텍스트 스택에 함수

타이머 호출 스케쥴링 함수를 명시적으로 호출하면 함수가 즉시 실행된다. 만약 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 이를 호출 스케줄링(scheduling a call)이라 한다. 자바스크립트는 **① 타이머를 생성할 수 있는 타이머 함수 setTimeout / setInterval ② 타이머를 제거할 수 있는 타이머 함수 clearTimeout / clearInterval** 를 제공한다. 타이머 함수는 ECMAScript 사양에 정의된 빌트인 함수가 아니다. 브라우저 환경과 Node.js 환경에서 모두 전역 객체의 메서드로서 타이머 함수를 제공한다. 즉, 타이머 함수는 호스트 객체이다. setTimeout 함수가 생성한 타이머는 단 한 번 동작하고, setInterval 함수가 생성한 타이머는 반복 동작한다. **자바스크립트 엔진은 단 하나의

함수 함수란? 함수는 자바스크립트에서 가장 중요한 핵심 개념이다. 또 다른 자바스크립트의 핵심 개념인 스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성, 메서드, this, 프로토타입, 모듈화 등이 모두 함수와 깊은 관련이 있다. 따라서 함수는 자바스크립트를 정확히 이해하고 사용하기 위해 피해갈 수 없는 핵심 중의 핵심이라고 할 수 있다. 수학의 함수 수학의 함수는 입력을 받아 출력을 내보내는 일련의 과정을 정의한 것이다. 자바스크립트의 함수 프로그래밍 언어의 함수도 수학의 함수와 같은 개념이다. 함수 f(x,y) = x + y를 자바스크립트의 함수로 표현해 보자 ![](https://images.velog.io/images/junh0328/p

① 원시 값과 객체 비교 자바스크립트가 제공하는 7가지 데이터 타입(숫자, 문자열, 불리언, null, undefined, 심벌, 객체 타입) 은 크게 ① 윈시 타입과 ② 객체 타입으로 구분할 수 있다. 데이터 타입을 ① 원시 타입과 ② 객체 타입으로 구분하는 이유는 무엇일까? 원시 타입과 객체 타입을 크게 세 가지 측면에서 나눌 수 있다. > 원시 값 (값에 의한 전달) / 참조 값 (참조에 의한 전달) 원시 타입의 값, 즉 원시 값은 변경 불가능한값(immutable value) 이다. 이에 비해 객체(참조)타입의 값, 즉 객체는 변경 가능한 값(mutable value)이다. 원시 값 (100) 을 변수에 할당(assign) 하면 변수(확보된 메모리 공간)에는 실제 값(100)이 저장된다. 이에 비해 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 **참조 값(메모리 주소, 0x000