분류 전체보기

[JS] 모던 자바스크립트 Deep Dive - 33. Symbol

심벌이란?ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값자바스크립트에는 6개의 타입 즉, 문자열, 숫자, 불리언, undefined, null, 객체 타입이 있었다.심벌 값은 다른 값과 중복되지 않는 유일무이한 값이기 때문에 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다.프로퍼티 키로 사용할 수 있는 값은 빈 문자열을 포함하는 모든 문자열 또는 심벌 값이다.심벌 값의 생성✅Symbol 함수심벌 값은 Symbol 함수를 호출하여 생성한다. 다른 원시값, 즉 문자열, 숫자, 불리언, undefined, null 타입의 값은 리터럴 표기법을 통해 값을 생성할 수 있지만 심벌 값은 Symbol 함수를 호출하여 생성해야 한다.// Symbol 함수를 호출하여 유일..

[JS] 모던 자바스크립트 Deep Dive - 32. String

String 생성자 함수String 객체는 생성자 함수 객체이므로 new 연산자와 함께 호출하여 String 인스턴스를 생성할 수 있다. String 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 [[StringData]] 내부 슬롯에 빈 문자열을 할당한 String 래퍼 객체를 생성한다.String 생성자 함수의 인수로 문자열을 전달하면서 new 연산자와 함께 호출하면 [[StringData]] 내부 슬롯에 전달받은 문자열을 할당한 String 래퍼 객체를 생성한다.문자열은 원시 값이므로 변경할 수 없고, 이때 에러는 발생하지 않는다. String 생성자 함수의 인수로 문자열이 아닌 값을 전달하면 인수를 문자열로 강제 변환한 후 [[StringData]] 내부 슬롯에 변환된 문자열을..

[JS] 모던 자바스크립트 Deep Dive - 31. RegExp

정규 표현식(Regular Expression)이란?일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어(formal language)정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다.패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다. 정규표현식을 사용하면 반복문과 조건문 없이 패턴을 정의하고 테스트하는 것으로 간단히 체크할 수 있다.다만, 정규표현식은 주석이나 공백을 허용하지 않고, 여러가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지않다는 문제가 있다.정규 표현식의 생성정규 표현식 객체(RegExp 객체)를 생성하기 위해서는 정규 표현식 리터럴과 RegExp 생성자 함수를 사용할 수 있다.일반적인 방법은 정규 표현식 리터럴..

[JS] 모던 자바스크립트 Deep Dive - 30. Date

Date 생성자 함수Date 생성자 함수로 생성한 Date 객체는 내부적으로 날짜와 시간을 나타내는 정수값을 갖는다.기본적으로 현재 날짜와 시간을 나타내는 정수값을 가지며 현재 날짜와 시간이 아닌 다른 날짜와 시간을 다루고 싶은 경우 Date 생성자 함수에 명시적으로 해당 날짜와 시간 정보를 인수로 지정한다.Date 생성자 함수로 객쳬를 생성하는 방법은 다음과 같이 4가지가 있다.✅new Date()Date 생성자 함수를 인수 없이 new 연산자와 함께 호출하면 현재 날짜와 시간을 가지는 Date 객체를 반환한다.Date 객체는 내부적으로 날짜와 시간을 나타내는 정수값을 갖지만 Date 객체를 콘솔에 출력하면 기본적으로 날짜와 시간 정보를 출력한다.new Date(); // Sat Aug 24 2024 ..

[JS] 모던 자바스크립트 Deep Dive - 29. Math

Math 프로퍼티✅Math.PI원주율 PI값 (3.141592653589793) 반환Math.PI; // 3.141592653589793Math 메서드✅Math.abs인수로 전달된 숫자의 절대값 반환절대값은 반드시 0 또는 양수여야 한다. Math.abs(-1); // 1Math.abs('-1'); // 1 Math.abs(''); // 0 Math.abs([]); // 0Math.abs(null); // 0Math.abs(undefined); // NaN Math.abs({}); // NaNMath.abs('string'); // NaNMath.abs(); // NaN✅Math.round인수로 전달된 숫자의 소수점 이하를 반올림한 정수를 반환Math.round(1.4); // 1 Math.round(1..

[JS] 모던 자바스크립트 Deep Dive - 28. Number

Number 생성자 함수new 연산자와 함께 호출하여 Number 인스턴스를 생성 가능Number 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 [[NumberData]] 내부 슬롯에 0을 할당한 Number 래퍼 객체를 생성한다.Number 생성자 함수의 인수로 숫자를 전달하면서 new 연산자와 함께 호출하면 [[NumberData]] 내부 슬롯에 인수로 전달받은 숫자를 할당한 Number 래퍼 객체를 생성한다.Number 생성자 함수의 인수로 숫자가 아닌 값을 전달하면 인수를 숫자로 강제 변환한 후, [[NumberData]] 내부 슬롯에 변환된 숫자를 할당한 Number 래퍼 객체를 생성한다.인수를 숫자로 변환할 수 없다면 NaN을 [[NumberData]] 내부 슬롯에 할당한 ..

[JS] 모던 자바스크립트 Deep Dive - 27. 배열

배열이란?여러 개의 값을 순차적으로 나열한 자료구조사용 빈도가 매우 높은 가장 기본적인 자료구조const arr = ['apple', 'banana', 'orange'];요소(element) : 배열이 가지고 있는 값자바스크립트의 모든 값은 배열의 요소가 될 수 있다.즉, 원시값은 물론 객체, 함수, 배열 등 자바스크립트에서 값으로 인정하는 모든 것은 배열의 요소가 될 수 있다.배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스(index)를 갖는다. 인덱스는 배열의 요소에 접근할 때 사용되며 대부분의 프로그래밍 언어에서 인덱스는 0부터 시작한다.배열은 요소의 개수, 즉 배열의 길이를 나타내는 length 프로퍼티를 갖는다. arr.length // -> 3배열은 인덱스와 length..

[JS] 모던 자바스크립트 Deep Dive - 26. ES6 함수의 추가 기능

함수의 구분ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다.즉, 모든 함수는 callable이면서 constructor이었다.이러한 문제를 해결하기 위해 ES6에서는 함수를 사용 목적에 따라 다음 세 가지 종류로 명확하게 구분했다.ES6 함수의 구분constructorprototypesuperarguments일반 함수 (Normal)OOXO메서드 (Method)XXOO화살표 함수 (Arrow)XXXX메서드ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다.ES6 사양에서 정의한 메서드 (이하 ES6 메서드)는 인스턴스를 생성할 수 없는 non-constructor이다.따라서 ES6 메서드는 생성자 함수로서 호출할 수 없다. const..

[JS] 모던 자바스크립트 Deep Dive - 25. 클래스

클래스 정의클래스는 class 키워드를 사용하여 정의클래스 이름은 생성자 함수와 마찬가지로 파스칼 케이스를 사용하는 것이 일반적이다. // 클래스 선언문class Person {}함수와 마찬가지로 표현식으로 클래스를 정의할 수도 있다. 이때 클래스는 함수와 마찬가지로 이름을 가질 수도 있고, 갖지 않을 수도 있다. // 익명 클래스 표현식const Person = class {};// 기명 클래스 표현식const Person = class MyClass {};클래스는 함수이다.따라서 클래스는 값처럼 사용할 수 있는 일급 객체이다. 클래스 몸체에는 0개 이상의 메서드만 정의할 수 있다. 클래스 몸체에서 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드의 세 가지가 있..

[JS] 모던 자바스크립트 Deep Dive - 24. 클로저

클로저함수와 그 함수가 선언된 렉시컬 환경과의 조합 - MDN에서의 정의함수가 선언된 렉시컬 환경렉시컬 스코프자바스크립트 엔진은 함수를 어디에서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 정의한다. 렉시컬 스코프는 정적 스코프라고도 한다. 렉시컬 환경의 "외부 렉시컬 환경에 대한 참조"에 저장할 참조값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정된다. 함수 객체의 내부 슬롯 [[Environment]]함수는 자신의 내부 슬롯 [[Environment]]에 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장한다.함수 객체의 내부 슬롯 [[Environment]]에 저장된 현재 실행 중인 실행 컨텍스트의 렉시컬 환경의 참조가 바로..