Javascript

디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. 1) 배열 디스트럭처링 할당 // ES5 var arr = [1, 2, 3]; var one = arr[0]; var two = arr[1]; var three = arr[2]; console.log(one, two, three); // 1 2 3 ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다. 이때 배열 디스트럭처링 할당의 대상은 이터러블이어야 하며, 할당 기준은 배열의 인덱..

ES6에서 도입된 스프레드 문법(spread syntax, 전개 문법) … 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments와 같이 for … of 문으로 순회할 수 있는 이터러블에 한정된다. 스프레드 문법의 결과는 값이 아니다. 따라서 스프레드 문법의 결과는 변수에 할당할 수 없다. → 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다. 함수 호출문의 인수 목록 배열 리터럴의 요소 목록 객체 리터럴의 프로퍼티 목록 1) 함수 호출문의 인수 목록에서 사용하는 경우 요소들의 집합인 배열을 펼쳐서 개별..

https://github.com/denysdovhan/wtfjs?tab=readme-ov-file#banana GitHub - denysdovhan/wtfjs: 🤪 A list of funny and tricky JavaScript examples 🤪 A list of funny and tricky JavaScript examples. Contribute to denysdovhan/wtfjs development by creating an account on GitHub. github.com 바나나나나나나나나나나나ㅏ..... 딱 보고 느낀 점은 자바스크립트 진짜 신기한(황당한) 언어다. 하지만 해석을 해보면 또 이해가 되고 납득이 가는게 또 신기하군... 좌항, 우항의 피연산자 중의 하나 이상이 문자열..

1) 이터레이션 프로토콜 ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for … of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화했다. ◾ 이터러블 프로토콜 Well-known Symbol인 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속 받은 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이러한 규약을 이터러블 프로토콜이라 하며, 이터러블 프로토콜을 준수한 객체를 이..

1) 심벌이란? 심벌은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다. 2) 심벌 값의 생성 Symbol 함수 심벌 값은 Symbol 함수를 호출하여 생성한다. (리터럴 X) 이때 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과 절대 중복되지 않는 유일무이한 값이다. new 연산자와 함께 호출하지 않는다. const mySymbol = Symbol(); console.log(typeof mySymbol); // symbol console.log(mySymbol); // Symbol() Symbol 함수에는 선택적으로 문..

1) String 생성자 함수 String 객체는 생성자 함수 객체다. 따라서 new 연산자와 함께 호출하여 String 인스턴스를 생성할 수 있다. String 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 [[StringData]] 내부 슬롯에 0을 할당한 String 래퍼 객체를 생성한다. const strObj = new String(); console.log(strObj); // String {length: 0, [[PrimitiveValue]]: ""} String 생성자 함수의 인수로 문자열을 전달하면서 new 연산자와 함께 호출하면 [[StringData]] 내부 슬롯에 인수로 전달받은 문자열을 할당한 String 래퍼 객체를 생성한다. const strObj = new..

1) 정규 표현식이란? 정규 표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어다. 자바스크립트는 펄(Perl)의 정규 표현식 문법을 ES3부터 도입했다. 정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다. 패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다. 2) 정규 표현식의 생성 정규 표현식 객체를 생성하기 위해서는 정규 표현식 리터럴과 RegExp 생성자 함수를 사용할 수 있다. 정규 표현식 리터럴은 패턴과 플래그로 구성된다. const target = 'Is this all there is?'; const regexp = /is/i; regexp.test(target); // -> true RegExp 생성자 ..

표준 빌트인 객체인 Date는 날짜와 시간을 위한 메서드를 제공하는 빌트인 객체이면서 생성자 함수다. UTC(협정 세계시)는 국제 표준시를 말한다. KST(한국 표준시)는 UTC에 9시간을 더한 시간이다. 1) Date 생성자 함수 Date 생성자 함수로 생성한 Date 객체는 기본적으로 현재 날짜와 시간을 나타내는 정수값을 가진다. new Date() Date 생성자 함수를 인수 없이 new 연산자와 함께 호출하면 현재 날짜와 시간을 가지는 Date 객체를 반환한다. new Date(); // -> Sat Dec 09 2023 17:21:26 GMT+0900 (한국 표준시) Date 생성자 함수를 new 연산자 없이 호출하면 Date 객체를 반환하지 않고 날짜와 시간 정보를 나타내는 문자열을 반환한다...

표준 빌트인 객체인 Math는 수학적인 상수와 함수를 위한 프로퍼티와 메서드를 제공한다. Math는 생성자 함수가 아니다. 따라서 Math는 정적 프로퍼티와 정적 메서드만 제공한다. 1) Math 프로퍼티 Math.PI 원주율 PI 값을 반환한다. Math.PI; // -> 3.141592653589793 2) Math 메서드 Math.abs 인수로 전달된 숫자의 절대값을 반환한다. 절대값은 반드시 0 또는 양수이어야 한다. Math.abs(-1); // -> 1 Math.abs(''); // -> 0 Math.abs(undefined); // -> NaN Math.round 인수로 전달된 숫자의 소수점 이하를 반올림한 정수를 반환한다. Math.ceil 인수로 전달된 숫자의 소수점 이하를 올림한 정수를..

표준 빌트인 객체인 Number는 원시 타입인 숫자를 다룰 때 유용한 프로퍼티와 메서드를 제공한다. 1) Number 생성자 함수 Number 객체는 생성자 함수 객체다. 따라서 new 연산자와 함께 호출하여 Number 인스턴스를 생성할 수 있다. Number 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 [[NumberData]] 내부 슬롯에 0을 할당한 Number 래퍼 객체를 생성한다. const numObj = new Number(); console.log(numObj); // Number {[[PrimitiveValue]]: 0 } [[PrimitiveValue]] ⇒ [[NumberData]] 내부 슬롯 Number 생성자 함수의 인수로 숫자를 전달하면서 new 연산자와 ..