Web

[JS] 모던 자바스크립트 Deep Dive - 22. this

this 키워드자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. 함수 내부에서 arguments 객체를 지역 변수처럼 사용할 수 있는 것처럼 this도 지역 변수처럼 사용할 수 있다. 단, this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. ?..

[JS] 모던 자바스크립트 Deep Dive - 21. 빌트인 객체

자바스크립트 객체의 분류1️⃣ 표준 빌트인 객체 (Standard built-in objects / Native Objects / Global Objects)ECMAScript 사양에 정의된 객체를 말하며 어플리케이션 전역의 공통 기능을 제공한다.2️⃣ 호스트 객체 (Host Objects)ECMAScript 사양에 정의되어있지 않지만 자바스크립트 실행 환경에서 추가로 제공하는 객체를 말한다.3️⃣ 사용자 정의 객체 (User-defined Objects)표준 빌트인 객체와 호스트 객체처럼 기본 제공되는 객체가 아닌 사용자가 직접 정의한 객체를 말한다.표준 빌트인 객체자바스크립트는 Object, String, Number, Boolean, Symbol, Date, Math, RegExp, Array, M..

[JS] 모던 자바스크립트 Deep Dive - 20. Strict Mode

strict mode (엄격 모드)자바스크립트 언어의 문법을 조금 더 엄격하게 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. strict mode의 적용전역의 선두 또는 함수 몸체의 선두에 'use strict';를 추가전역의 선두에 추가할 경우 스크립트 전체에 strict mode가 적용된다. 함수의 몸체의 선두에 추가하면 해당 함수와 중첩 함수에 strict mode가 적용된다. 코드의 선두에 'use strict';를 위치시키지 않으면 strict mode가 제대로 동작하지 않는다. 전역에 strict mode를 적용하는 것은 피하자전역에 적용한 strict mode는 스크립트 단위로 적용된다. 스크립트 단..

[JS] 모던 자바스크립트 Deep Dive - 19. 프로토타입

자바스크립트는 명령형, 함수형, 프로토타입 기반 객체 지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다. 즉, 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 "모든 것"이 객체이다. 원시 타입의 값을 제외한 나머지 값들 (함수, 배열, 정규 표현식 등)은 모두 객체이다. 객체 지향 프로그래밍(OOP, Object Oriented Programming)절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임추상화 : 다양한 속성 중에서 프로그램에 필요한 속성만 간추려내어 표현하는 것객체 : 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조즉, 객체지향 프로그래밍은 독립적인 객체의 집합으로 프로그램을 표현하..

[JS] 모던 자바스크립트 Deep Dive - 18. 함수와 일급 객체

일급 객체1️⃣ 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 2️⃣ 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.3️⃣ 함수의 매개변수에 전달할 수 있다.4️⃣ 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 위의 모든 조건을 만족하므로 일급 객체이다. 함수 객체의 프로퍼티함수는 객체이므로 프로퍼티를 가질 수 있다. console.dir 메서드를 사용하면 다음과 같이 함수 객체의 내부를 들여다볼 수 있다. function square(number) { return number * number;}console.dir(square);arguments, caller, length, name, prototype 프로퍼티는 모두 함수 객체의 데이터 프로퍼티이다. 하지만 __p..

[JS] 모던 자바스크립트 Deep Dive - 17. 생성자 함수에 의한 객체 생성

Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다.빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다. Object 생성자 함수 이외에도 String, Number, Boolean, Function, Array, Date, RegExp.Promise 등의 빌트인 생성자 함수를 제공한다. 객체를 생성하는 방법은 객체 리터럴을 사용하는 것이 더 간편하다. 특별한 이유가 없는 한 Object 생성자 함수를 사용하여 객체를 생성하는 방식은 유용하지 않다. 생성자 함수 (Constructor)new 연산자와 함께 호출하여 객체 (인스턴스)를 생성하는 함수인스턴스 (Instance)생성자 함수에 의해 생성된 객체✅객체 리터럴에 ..

[JS] 모던 자바스크립트 Deep Dive - 16. 프로퍼티 어트리뷰트

내부 슬롯과 내부 메서드이중 대괄호로 감싼 이름들자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티(Pseudo Property)와 의사 메서드(Pseudo Method)이다. ECMAScript 사양에 등장하는 이중 대괄호로 감싼 이름들이 내부 슬롯과 내부 메서드이다. 내부 슬롯 & 내부 메서드 는 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다.즉, 자바스크립트 엔진의 내부 로직이므로 원칙적으로 자바스크립트는 내부 슬롯과 내부 메서드에 직접 접근하거나 호출할 수 있는 방법을 제공하지 않는다.단, 일부 내부 슬롯 & 메서드에 한하여 접근할 수 있는 수단을 제공한다.[[Prototype]] 내..

[JS] 모던 자바스크립트 Deep Dive - 15. let const와 블록 레벨 스코프

var 키워드로 선언한 변수의 문제점✅ 변수 중복 선언 허용var 키워드로 선언한 변수는 중복 선언이 가능하다.동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 변수를 중복 선언하면서 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생한다. var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다.// 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다.var x = 100; // 초기화문이 없는 변수 선언문은 무시된다.var y; console.log(x); // 100console.log(y); // 1✅함수 레벨 스코프함수 외부에서 var 키워드로 선언한 변수는 코드 블록..

[JS] 모던 자바스크립트 Deep Dive - 14. 전역 변수의 문제점

변수의 생명 주기변수는 선언에 의해 생성되고 할당을 통해 값을 가지며 언젠가 소멸한다.변수는 생물과 유사하게 생성되고 소멸되는 생명 주기 (Life Cycle)가 있다.변수에 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다.  ✅ 지역 변수의 생명 주기함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다. 변수 호이스팅은 전역 변수에 한정하여 발생한다.cf) 변수 호이스팅: 변수 선언은 선언문이 어디에 있든 상관 없이 가장 먼저 실행된다. 함수 내부에서 선언한 변수는 함수가 호출된 직후에 함수 몸체의 코드가 한 줄씩 순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 먼저 실행된다. 그렇게 선언된 변수는 undefine..

[JS] 모던 자바스크립트 Deep Dive - 13. 스코프

스코프 (Scope)식별자가 유효한 범위. 유효 범위라고도 한다. 식별자를 검색하는 규칙모든 식별자 (변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. function add(x, y){ // 매개 변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개 변수의 스코프는 함수 몸체 내부이다. console.log(x, y); // 2 5 return x + y;}add(2, 5);console.log(x, y); // ReferenceError: x is not definedvar var1 = 1; // 코드의 가장 바깥 영역에서 선언한 변수if (true) { var var2 = 2; // ..