Frontend/Modern Javascript Deep Dive

정규식은 다음과 같이 표기한다 const regExp = /is/gi; const str = 'IS this?'; console.log(regExp.test(str)); 플래그 정규식 패턴 뒤에 붙여 옵션을 준다. 플래그 의미 i 대소문자 구별 없이 검사함 g 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색 m 문자열의 행이 바뀌더라도 패턴 검색을 계속함 임의 문자열 검색 .은 임의의 문자열 하나를 말한다 …은 3개의 문자열을 의미한다. 반복검색 {m,n}은 앞의 패턴이 최소 m번, 최대 n번 반복되는 문자열을 의미한다. +는 패턴이 한번 이상 반복되는 문자열을 의미한다. ?는 최대 한번 이상 반복되는 문자열을 말한다 []는 범위를 지정한다 [A-Z]는 A부터 Z까지. 대소문자 구별없이 하려면 [..

JS의 배열은 배열이 아니다 JS의 배열은 일반적인 배열의 동작을 흉내낸 특수한 객체이지, 실제 배열과는다르다. 배열의 요소와 인덱스는 벨류와 키로 작동한다. length 프로퍼티와 희소배열 length 프로퍼티의 길이를 줄이면 배열이 줄어든다. 하지만, 늘린다고 빈 값으로 초기화되지는 않는다. empty가 들어가게 되고, 접근시 undefined가 출력된다. 배열 생성 배열 리터럴 const arr = []; Array 생성자 함수 Array 생성자 함수를 통해 배열을 생성할 수 있다. 인수가 1개인경우, length 프로퍼티 값이 인수인 배열을 생성한다. const arr = new Array(2); console.log(arr); //[empty*2]; 인수가 없는경우 빈 배열을 만든다. const..

함수구분 ES6에서는 함수를 3가지로 분류했다. 구분 constructor prototype super arguments 일반함수 O O X O 메서드 X X O O 화살표 함수 X X X X 메서드 메서드는 메서드 축약표현으로 정의된 함수만을 의미한다. 인스턴스를 생성할 수 없고, prortotype이 없으며, super 키워드를 사용할 수 있다. 화살표 함수 간략하게 함수를 정의한다. 표현뿐 아니라 내부 동작도 간략하다. 함수정의 함수 선언문으로 정의가 불가능하다. 함수 표현식으로 정의한다. 매개변수 선언 여러개인경우 소괄호 안에 선언한다. 하나인 경우 소괄호도 생략가능하다. 매개변수가 없는 경우, 생략이 불가능하다. const arrow=(x,y)=>{ ... }; const arrow=x=>{ ...

프로토타입과 클래스 클래스는 new 연산자 없이 호출하면 에러가 발생한다. 클래스는 extends와 super를 제공함. 생성자 함수는 제공하지 않음 클래스는 호이스팅이 발생하지 않는 것처럼 보이지만 생성자함수는 호이스팅이 된다. 클래스내의 모든 코드에는 암묵적으로 strict mode가 적용되며, 해제할 수 없다. 클래스의 constructor, 프로토타입메서드, 정적메서드는 모두 Enurmable 값이 false이다. 열거되지 않는다. ⇒ 클래스 문법은 프로토타입과 다른 새로운 객체 생성 매커니즘 클래스 정의 클래스는 함수다. 클래스는 표현식으로 정의할 수 있다. 클래스는 일급객체로서 다음과 같은 특징을 갖는다. 무명의 리터럴로 생성가능 변수나 자료구조에 저장할 수 있다. 함수의 매개변수에게 전달할 ..

const x=1; function outer(){ const x=10; const inner=function(){ console.log(x); } return inner; } const innerFunc=outer(); innerFunc(); // 10 외부함수보다 중첩함수가 더 오래 유지되는 경우 중첩함수는 이미 생명주기가 종료된 외부함수의 변수를 참조할 수 있음 이런 중첩함수를 클로저라 부름 상위 함수의 실행컨텍스트는 사라지지만, 렉시컬 환경은 inner함수에 의해 참조되어 사라지지않기때문에 가능함 참조되고 있는 메모리를 가비지 컬렉팅 하지 않음 상위 함수의 렉시컬 환경을 참조하는 경우만 클로저이다. 상위 함수의 렉시컬 환경을 참조 하지않으면 상위 함수의 렉시컬 환경은 가비지컬렉팅 대상이됨 일부만 ..

소스코드의 타입 ECMAScript의 사양은 소스코드를 4가지 타입으로 구분한다. 4가지 소스코드들은 실행컨텍스트를 생성한다. 소스코드 타입 설명 전역코드 전역에 존재하는 코드. 전역에 정의된 함수, 클래스 등 내부코드는 포함하지 않음 함수코드 함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래스 등의 내부코드를 포함하지는 않음 eval 코드 빌트인 전역함수인 eval의 인수로 전달되는 코드들 모듈코드 모듈 내부에 존재하는 소스코드들 전역 코드 전역코드는 전역 변수를 관리하기 위해 최상위 스코프인 전역스코프를 생성해야함 또한 var 키워드로 선언된 전역변수와 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩하고 참조하기 위해 전역 객체와 연결되어야함 ⇒ 전역 실행 컨텍스트의 생성 함수코드 ..

this 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기참조 변수 함수 호출시 arguments객체와 this가 암묵적으로 함수 내부에 전달됨 this바인딩 호출시에 동적으로 결정됨 strict 모드도 영향을 미침 함수 호출방식과 this바인딩 함수의 상위스코프를 결정하는 방식인 렉시컬 스코프는 함수 정의가 평가되는 시점에 상위스코프를 결정한다. 하지만 this바인딩은 함수 호출 시점에 결정한다. 1. 일반함수 호출 this에 전역객체가 바인딩된다. 이는 중첩함수와 콜백함수도 마찬가지이다. 2. 메서드 호출 메서드 내부의 this는 메서드를 호출한 객체에 바인딩된다. 3. 생성자 함수 호출 생성자 함수 내부의 this에는 생성자 함수가 생성할 인스턴스가 바인딩된다. Function.prot..

자바스크립트 객체의 분류 표준 빌트인 객체모든 실행환경에서 언제나 사용가능함 ECMAScript 사양에 정의된 객체 호스트 객체브라우저에서는 WebAPI, NodeJS에서는 고유의 API를 제공함 실행환경에 따라 다르게 제공되는 객체 사용자 정의 객체 사용자가 직접 정의한 객체 표준 빌트인 객체 String, Number, Boolean, Function, Array, Date 등 원시값과 래퍼 객체 원시값 역시 객체처럼 동작하는데, 원시값을 객체처럼 사용할 경우 JS엔진이 암묵적으로 연관된 객체(래퍼 객체)를 생성하여 생성된 객체로 프로퍼티에 접근하거나 메서드를 호출하고 다시 원시값으로 돌린다. 문자열에 대해 마침표 표기법으로 접근하면, 래퍼객체인 String객체로 인스턴스를 생성하고, 문자열은 래퍼 ..

strict mode란? function foo(){ x=10; } foo(); console.log(x); //10 이런 코드의 경우 x가 전역 객체에 등록되어 선언하지도 않았는데도 불구하고 등록이 된다. 이를 암묵적 전역이라 한다. 이런 현상을 방지하기 위해 strict mode가 추가되었다.(ES5부터) strict mode의 적용 사용하려면 전역의 선두 또는 함수 몸체에 ‘use strict’;를 추가한다. 전역의 선두에 하면 전체에 적용된다. 'use strict'; function foo(){ x=10; //Error } foo(); 함수의 선두에도 사용가능하다. function foo(){ 'use strict'; x=10; //Error } foo(); 전역에 strict mode적용을 피..

일급객체 무명의 리터럴로 생성가능 → 런타임에 생성 가능 변수나 자료구조에 저장할 수 있음 함수의 매개변수에 전달할 수 있음 함수의 반환값으로 사용 가능함 함수와 객체를 동일하게 사용할 수 있음 즉, 함수는 값을 사용하는 곳에는 어디든 리터럴로 정의할 수 있고, 이를 런타임에 함수객체로 평가하게 됨 가장 큰 특징 매개변수에 전달할 수 있음 함수의 반환값으로 사용가능 함수 객체의 프로퍼티 Object.getOwnPropertyDescriptors(f); {length: {…}, name: {…}, arguments: {…}, caller: {…}, prototype: {…}} arguments: {value: null, writable: false, enumerable: false, configurable..