모던 자바스크립트 deep dive

자바스크립트 데이터 타입

데이터 타입 ✅ 자바스크립트 데이터 타입 구분 데이터 타입 설명 원시타입 숫자number 타입 숫자. 정수와 실수 구분 없이 하나의 숫자 타입만 존재 문자열string 타입 텍스트 데이터를 나타내는데 사용 작은따옴표(''), 큰따옴표(""), 백틱(``)으로 텍스트를 감싼다. 불리언boolean 타입 논리적 참(true)와 거짓(false) undefined 타입 자바스크립트 엔진이 변수를 초기화 할 때 사용하는 값 변수를 참조했을 때 undefined가 반환된다면 참조한 변수가 선언 이후 값이 할당된 적이 없는, 즉 초기화되지 않은 변수이다. null 타입 null은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다..

[자바스크립트] 변수

변수 컴퓨터에 저장되는 데이터는 데이터 종류에 관계없이 모두 2진수로 저장된다. 변수 - 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 식별자 - 어떤 값을 구별해서 식별할 수 있는 고유한 이름(값이 저장돼 있는 메모리 주소와 매핑 관계) / 식별자는 값이 아니라 메모리 주소를 기억하고 있음 ✅ 변수 선언 변수 선언 - 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해 값을 저장할 수 있게 준비하는 것 자바스크립트 엔진은 변수 선언을 2단계에 거쳐 수행함 1. 선언 단계 - 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알림 2. 초기화 단계 - 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 u..

[자바스크립트] 자바스크립트 변수 선언 방법

자바스크립트의 변수 선언 방법 과거에는 var를 사용하는 것밖에 없었지만 이제는 const, let, var 같이 여러가지가 있으며 사용 방법도 다르다. var one = 1; console.log(prev); // undefined -> 자바스크립트 호이스팅 특성 function change() { console.log(one); let two = 2; const three = 3; console.log(two); console.log(three); one = 11; two = 22; // three=33; Uncaught TypeError: Assignment to constant variable. } var prev = 3; change(); console.log(one); // 11 var one..

[자바스크립트] this

this 1. this 키워드 객체 - 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조 가능하며, 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. this가 가리키는 값, 즉 this 바인딩(식별자와 값을 연결하는 과정)은 함수 호출 방식에 의해 동적으로 결정된다. // 객체 리터럴의 메서드 내부에서는의 th..

[자바스크립트] 빌트인 객체

빌트인 객체 1. 자바스크립트 객체의 분류 표준 빌트인 객체 - ECMAScript 사양에 정의된 객체, 애플리케잉션 전역의 공통 기능을 제공 호스트 객체 - ECMAScript 사양에 정의되어 있지 않지만 자바스크립트 실행환경에서 추가로 제공하는 객체 사용자 정의 객체 - 사용자가 직접 정의한 객체 2. 표준 빌트인 객체 자바스크립트는 Object, String, Number, Boolean, Symbol, Math, Reflect, JSON, Proxy 등 40여 개의 표준 빌트인 객체를 제공한다. Math, Reflect, JSON을 제외한 표준 빌트인 객체는 모두 인스턴스를 생성할 수 있는 생성자 함수 객체다. 생성자 함수 객체인 표준 빌트인 객체는 프로토타입 메서드와 정적 메서드를 제공, 생성자..

[자바스크립트] strict mode

strict mode 1. strict mode란? strict mode는 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. 'use strict'; // 하지 않으면 자바스크립트는 x 변수를 암묵적으로 전역 변수처럼 사용할 수 있기 때문에 콘솔에 10이 찍힌다 function foo(){ x = 10; } foo(); console.log(x); // x is not defined 2. strict mode의 적용 strict mode를 적용하려면 전역의 선두 또는 함수 몸체의 선두에 'use strict';를 추가한다. 'use stri..

[자바스크립트] 프로토타입

프로토타입 자바스크립트는 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 "모든 것"이 객체다. 1. 객체지향 프로그래밍 객체지향 프로그래밍 - 여러 개의 독립적인 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임 // 이름과 주소 속성을 갖는 객체 const person = { name : 'Lee', address : 'seoul' } 프로그래머(subject, 주체)는 이름과 주소 속성으로 표현된 객체(obejct)인 person을 다른 객체와 구별하여 인식할 수 있다. 객체 - 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조 객체지향 프로그래밍은 독립적인 객체의 집합으로 프로그램을 표현하려는 프로그램이 패러다임이다...

[자바스크립트] 함수와 일급 객체

함수와 일급 객체 일급 객체 일급 객체 - 다음과 같은 조건을 만족하는 객체 무명의 리터럴로 생성(런터임에 생성 가능) 변수나 자료구조(객체, 배열 등)에 저장 가능 함수의 매개변수에 전달 가능 함수의 반환값으로 사용 가능 // 1. 함수는 무명의 리터럴로 생성 // 2. 함수는 변수에 저장 가능 // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당 const increase = function(num){ return ++num; } const decrease = function(num){ return --num; } // 3. 함수는 객체에 저장 가능 const predicates = {increase, decrease}; predicates // {increase: ƒ,..

[자바스크립트] 생성자 함수에 의한 객체 생성

생성자 함수에 의한 객체 생성 1. Object 생성자 함수 생성자 함수(constructor) - new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수 생성자 함수에 의해 생성된 객체를 인스턴스(instance)라 한다. 자바스크립트는 String, Number, Boolean, Fucntion, Array, Date, RegExp, Promise 등의 생성자 함수 제공 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다. // 빈 객체 생성 const person = new Object(); // 프로퍼티 추가 person.name = 'Lee'; person.sayHe..