01. 심벌이란? 💡 문자열, 숫자, 불리언, undefineds, null, 객체 타입의 6개의 타입을 잇는 ES6에 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 💡 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다. 02. 심벌 값의 생성 1. Symbol 함수 🔹 다른 타입과 다르게, Symbol 함수를 호출하여 생성해야 한다. 🔹 다른 값과 절대 중복되지 않으며, 암묵적으로 문자열이나 숫자 타입으로 변환되지 않는다. // Symbol 값에 대한 설명이 같더라도 유일무이한 값을 생성한다. const mySymbol1 = Symbol('mySymbol'); const mySymbol2 = Symbol('mySymbol'); console.log(mySymbol1..
01. String 생성자 함수 🔹 String 객체는 생성자 함수이므로, new 연산자와 함께 호출하여 String 인스턴스를 생성할 수 있음 🔹 String 생성자 함수에 인수를 전달하지 않고, new 연산자와 함께 호출하면 -> [[StringData]] 내부 슬롯에 빈 문자열을 할당한 String 래퍼 객체를 생성 🔹String 생성자 함수의 인수로 문자열 전달하면서 new 연산자와 함께 호출하면 -> [[StringData]] 내부 슬롯에 인수로 전달받은 문자열을 할당한 String 래퍼 객체를 생성 🔹 String 래퍼 객체는 배열과 유사하게 인덱스를 사용하여 각 문자에 접근할 수 있다. 🔹 단, 문자열은 원시 값이므로 변경할 수 없다.(배열과의 차이점) 🔹 String 생성자 함수의 인수로 ..
01. 정규 표현식이란? 🔹 일정한 패턴을 가진 문자열의 집한을 표현하기 위해 사용하는 형식 언어 🔹 문자열을 대상으로 패턴 매칭 기능 제공(특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능) 🔹 반복분과 조건문 없이 패턴을 정의하고 테스트하는 것으로 체크할 수 있음 ⚠️ 주석이나 공백 허용하지 않고 여러가지 기호 혼합 -> 가독성 좋지 않음 02. 정규 표현식의 생성 정규 표현식 객체를 생성하기 위해서는 정규 표현식 리터럴과 RegExp 생성자 함수를 사용할 수 있다. ➡️ 정규 표현식 리터럴은 패턴과 플래그로 구성된다. 🖥️ 예제 const target = 'Is this all there is?' // 패턴: is // 플래그: i => 대소분자 구별하지 않고 검색한다. co..
표준 빌트인 객체로, 날짜와 시간을 위한 메서드를 제공한다. 01. Date 생성자 함수 💡 Date 객체는 내부적으로 정수값을 갖는데, 1970년 1월 1일 00:00:00(UTC)을 기점으로 Date 객체가 나타내는 날짜와 시간까지의 밀리초를 나타낸다. 💡 다음은 Date 생성자 함수로 객체를 생성하는 방법 4가지 1. new Date() 🔹 인수 없이 new 연산자와 함께 호출 -> 현재 날짜와 시간을 가지는 Date 객체 반환 🔹 new 연산자 없이 호출 -> Date 객체를 반환하지 않고, 날짜와 시간 정보를 나타내는 문자열 반환 2. new Date(milliseconds) 🔹 밀리초를 인수로 전달 -> 기준 시점(1970년 1월 1일 00:00:00)으로부터 전달된 밀리초만큼 경과한 날짜와 ..
💡 수학적인 상수와 함수를 위한 프로퍼티와 메서드를 제공하는 표준 빌트인 객체 💡 생성자 함수가 아니며, 정적 프로퍼티 및 정적 메서드만 제공 01. Math 프로퍼티 1. Math.PI 🔹 원주율 PI 값 반환 02. Math 메서드 1. Math.abs 🔹 인수로 전달된 숫자의 절대값 반환 2. Math.round 🔹 인수로 전달된 숫자의 소수점 이하를 반올림한 정수 반환 3. Math.ceil 🔹 인수로 전달된 숫자의 소수점 이하를 올림한 정수 반환 4. Math.floor 🔹 인수로 전달된 숫자의 소수점 이하를 내림한 정수 반환 5. Math.sqrt 🔹 인수로 전달된 숫자의 제곱근 반환 6. Math.random 🔹 임의의 난수 반환 (0에서 1 미만의 실수) 7. Math.pow 🔹 첫 번째 ..
01. Number 생성자 함수 🔹 Number 객체는 표준 빌트인 객체로, 생성자 함수 객체다. ➡️ new 연산자와 함께 호출하여 Number 인스턴스를 생성할 수 있다. 1. Number 생성자 함수에 인수 전달 X, new 연산자와 함께 호출 ➡️ [[NumberData]] 내부 슬롯에 0 할당한 Number 래퍼 객체 생성 const numObj = new Number(); console.log(numObj); // Number {[[PrimitiveValue]]: 0} 2. Number 생성자 함수의 인수로 숫자 전달, new 연산자와 함께 호출 ➡️ [[NumberData]] 내부 슬롯에 인수로 전달받은 숫자 할당한 Number 래퍼 객체 생성 const numObj = new Number(..
📖 모던 자바스크립트 교재 27장. 배열 01. 배열이란? 여러 개의 값을 순차적으로 나열한 자료구조 사용 빈도가 매우 높은 가장 기본적인 자료구조이므로 잘 알아두기로 하자. const arr = ['apple', 'banana', 'orange']; 🔹 요소 (Element) : 배열이 가지고 있는 값 🔹 인덱스 (Index) : 배열에서 배열의 요소의 위치 (0 이상의 정수) 🔹 대괄호 표기법을 통해 요소에 접근한다. arr[0] // -> 'apple' arr[1] // -> 'banana' arr[2] // -> 'orange' 🔹 length 프로퍼티 : 배열의 길이(요소의 개수)를 나타내는 프로퍼티 arr.length // -> 3 🔹배열은 객체 타입이다. ❓배열을 생성하려면 🔹배열 리터럴, ..
📖 모던 자바스크립트 교재 26장. ES6 함수의 추가 기능 01. 함수의 구분 🔹 ES6 이전의 모든 함수는 일반 함수 및 생성자 함수로서 호출이 가능하다. // foo 함수를 일반적인 함수, 생성자 함수, 메서드로 호출 가능 var foo = function () { return 1; }; // 일반적인 함수로서 호출 foo(); // -> 1 // 생성자 함수로서 호출 new foo(); // -> foo {} // 메서드로서 호출 var obj = { foo: foo }; obj.foo(); // -> 1 ➡️ 즉, callable (호출할 수 있는 함수 객체)이면서 동시에 constructor (인스턴스를 생성할 수 있는 함수 객체) 이다. ➡️ 메서드(객체에 바인딩된 함수)도 callable ..
📖 모던 자바스크립트 교재 25장. 클래스 01. 클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 프로토타입 기반 객체지향 언어다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는(class free)객체지향 프로그래밍 언어다. ES5에서는 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다. 💡 ES6에서 클래스 추가됨 ➡️ 클래스는 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하여, 문법적 설탕(syntactic sugar)이라고 표현한다. 💡 클래스와 생성자 함수의 차이점 클래스를 new연산자 없이 호출하면 에러가 발생한다.(생성자 함수를 new연산자 없이 호출하면 일반 함수로 호출된다.) 클래스는 상속을 지원하는 exten..
📖 모던 자바스크립트 교재 24장. 클로저 MDN에서 정의하는 클로저는 다음과 같다. 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 01. 렉시컬 스코프 클로저를 이해하려면 먼저 렉시컬 환경, 즉 렉시컬 스코프를 이해해야 한다. 자바스크립트 엔진은 함수가 정의된 위치에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라고 한다. 그리고 객체가 생성되는 시점에 상위 스코프가 결정된다. ➡️ [[Envirnment]] 내부 슬롯에 저장 이후 함수가 호출되고 함수 몸체 코드가 평가되는 시점에 외부 렉시컬 환경에 대한 참조에 객체가 생성될때 저장한 상위 스코프에 대한 참조값을 저장한다. 02. 함수 객체의 내부 슬롯 [[Environment]] 렉시컬 스코프가 가능하려면 함수는 상위..
