본문 바로가기

Javascript

 (47)
[모던 자바스크립트 Deep Dive] 31. 이터러블 이터레이션 프로토콜 순회 가능한 데이터 컬렉션 (자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙 이터러블 프로토콜 Symbol.iterator 를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로타입 체인을 통해 상속받은 메서드 이터러블 프로토콜을 준수한 객체 이터러블은 for ... of 문으로 순회할 수 있으며 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용 가능 이터레이터 프로토콜 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터 반환 이터레이터 프로토콜을 준수한 객체 이터러블 이터러블 프로토콜을 준수한 객체로 Symbol.iterator 를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토 타입 체인을 통해 상속받은 객..
[모던 자바스크립트 Deep Dive] 30. 7번째 데이터 타입 Symbol 심벌이란? ES6에서 도입된 7번째 데이터 타입으로 변경 불간으한 원시 타입의 값 다른 값과 중복되지 않는 유일무이한 값 → 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용 심벌 값의 생성 1. Symbol 함수 함수를 호출하여 생성 생성된 심벌 값은 외부로 노출되지 않아 확인 불가 다른 값과 절대 중복되지 않는 유일무이한 값 new 생성자와 함께 호출하지 않음 Symbol 함수에 선택적으로 문자열을 인수로 전달할 수 있는데 이 문자열은 생성된 심벌 값에 대한 설명일 뿐 설명이 같더라도 생성된 심벌 값은 유일무이 심벌 값도 객체처럼 접근하면 래퍼 객체 생성 심벌값은 암묵적으로 문자열이나 숫자 타입으로 변환 X (불리언은 타입 변환) // 심벌 값에 대한 설명이 같더라도 유일무이한 심벌 값 생성 ..
[모던 자바스크립트 Deep Dive] 29. String String 생성자 함수 String 객체는 생성자 함수 객체로 new 연산자와 함께 호출하여 String 인스턴스 생성 가능 String 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 [[StringData]] 내부 슬롯에 빈 문자열을 할당한 String 래퍼 객체 생성 String 생성자 함수에 인수를 전달하고 new 연산자와 함께 호출하면 [[StringData]] 내부 슬롯에 인수로 전달받은 문자열을 할당한 String 래퍼 객체 생성 const strObj = new String(); console.log(strObj); // String {''} length: 0 [[Prototype]]: String[[PrimitiveValue]]: "" String 래퍼 객체는 배열과 ..
[모던 자바스크립트 Deep Dive] 28. RegExp 정규 표현식이란? 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어 문자열을 대상으로 패턴 매칭 기능을 제공 패턴 매칭 기능 : 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능 정규 표현식의 생성 그림 정규 표현식 리터럴과 RegExp 생성자 함수 사용 가능 정규 표현식 리터럴은 패턴과 플래그로 구성 RegExp 메서드 1. RegExp.prototype.exec 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검사하여 매칭 결과를 배열로 반환 매칭 결과가 없는 경우 null 반환 const target = 'Is this all there is?'; const regExp = /is/; regExp.exec(target); // ['is', index: ..
[모던 자바스크립트 Deep Dive] 27. Date 표준 빌트인 객체인 Date는 날짜와 시간을 위한 메서드를 제공하는 빌트인 객체이면서 생성자 함수 현재 날짜와 시간은 자바스크립트 코드가 실행된 시스템의 시계에 의해 결정 Date 생성자 함수 Date 생성자 함수로 생성한 Date 객체는 내부적으로 날짜와 시간을 나타내는 정수값을 가짐 Date 객체는 1970년 1월 1일 0시를 기준으로 계산 Date 생성자 함수로 생성한 Date 객체는 기본적으로 현재 날짜와 시간을 나타내는 정수값을 가짐 1. new Date() 인수 없이 new 연산자와 함께 호출하면 현재 날짜와 시간을 갖는 Date 객체 반환 인수와 new 연산자 없이 호출하면 객체가 아닌 문자열 반환 new Date(); // Thu Nov 23 2023 21:35:43 GMT+0900 (한국..
[모던 자바스크립트 Deep Dive] 26. Math Math 프로퍼티 1. Math.PI 원주율 PI 값을 반환 Math.PI; // 3.141592653589793 Math 메서드 1. Math.abs 인수로 전달된 숫자의 절대값을 반환 (절대값은 반드시 0 또는 양수여야 함) 인수로 숫자가 아닌 값을 전달하면 인수로 숫자를 강제 변환한 후 절대값 반환 Math.abs(""); // 0 Math.abs("-23"); // 23 Math.abs('string'); // NaN 2. Math.round 인수로 전달된 숫자의 소수점 이하를 반올림한 정수 반환 인수로 숫자가 아닌 값을 전달하면 인수로 숫자를 강제 변환한 후 숫자의 소수점 이하를 반올림한 정수 반환 Math.round(1.5);//2 Math.round(-1.6);// -2 Math.round(..
[모던 자바스크립트 Deep Dive] 25. Number Number 생성자 함수 표준 빌트인 객체인 Number 객체는 생성자 함수 객체 → new 연산자와 함께 호출하여 Number 인스턴스 생성 가능 Number 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 [[NumberData]] 내부 슬롯에 0을 할당한 Number 래퍼 객체 생성 Number 생성자 함수에 인수를 전달하고 new 연산자와 함께 호출하면 [[NumberData]] 내부 슬롯에 인수로 전달받은 숫자를 할당한 Number 래퍼 객체 생성 Number 생성자 함수에 숫자가 아닌 값을 전달하면 인수를 숫자로 강제 변환 후 [[NumberData]] 내부 슬롯에 변환된 숫자를 할당한 Number 래퍼 객체 생성 (숫자로 변환할 수 없다면 NaN) new 연산자를 사용하지 ..
[모던 자바스크립트 Deep Dive] 24. 배열 배열이란 배열 : 여러 개의 값을 순차적으로 나열한 자료구조 요소 : 배열이 가지고 있는 값 (원시값, 함수, 객체 모두 배열의 요소가 될 수 있음) 인덱스 : 배열의 요소에서 자시의 위치를 나타내는 0이상의 정수 (배열의 요소에 접근할 때 사용하며 0부터 시작) length 프로퍼티 : 요소의 개수, 배열의 길이를 나타냄 배열은 객체 타입 반복문을 통해 순차적으로 값에 접근하기 적합한 자료구조 일반 객체와 배열 객체의 차이 구분 객체 배열 구조 프로퍼티 키와 프로퍼티 값 인덱스와 요소 값의 참조 프로퍼티 키 인덱스 값의 순서 X O length 프로퍼티 X O 자바스크립트 배열은 배열이 아니다 자료구에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조 밀집 배열 하나의 데..

티스토리툴바