개발자 퉁이리

디스트럭처링 할당 디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여, 다른 말로는 구조를 파괴하여 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 위 코드는 ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법이다. // ES6 const arr = [1, 2, 3]; const [one, two, th..

정규 표현식 정규 표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어다. 정규 표현식은 자바 스크립트의 고유 문법이 아니며, 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다. const tel = '010-1234-567팔'; //정규 표현식 리터럴로 휴대폰 전화번호 패턴을 정의한다. const regExp = /^\d{3}-\d{4}-\d{4}$/; regExp.test(tel); // false 정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다. 정규 표현식의 생성 정규 표현식 리터럴은 패턴과 플래그로 구성된다. / = 시작 종류 기호 regexp = 패턴 i = 플래그 플래그 플래그는 정규 표현식의 검색 방식을 설정하기 위해 사용한다. 플래그 의미 설명 i..

Date Date는 날짜와 시간을 위한 메서드를 제공하는 빌트인 객체이면서 생성자 함수다. 💫 Date 생성자 함수 Date는 생성자 함수다. Date 생성자 함수로 생성한 Date 객체는 내부적으로 날짜와 시간을 나타내는 정수 값을 갖는다. new Date() Date 생성자 함수를 인수 없이 new 연산자와 함께 호출하면 현재 날짜와 시간을 가지는 Date 객체를 반환한다. new Date();​ new 연산자 없이 호출하면 Date 객체를 반환하지 않고 날짜와 시간 정보를 나타내는 문자열 함수를 반환한다. new Date(milliseconds) Date 생성자 함수에 숫자 타입의 밀리초를 인수로 전달하면 1970년 1월 1일 00:00:00을 기점으로 인수로 전달된 밀리초만큼 경과한 날짜와 시간을..

Math Math는 수학적인 상수와 함수를 위한 프로퍼티와 메서드를 제공한다. 💫 Math 프로퍼티 1. Math.PI 원주율 PI 값을 반환한다. 💫 Math 메서드 Math.abs 인수로 전달된 숫자의 절댓값을 반환한다. 절댓값은 반드시 0 또는 양수이어야 한다. Math.round 인수로 전달된 숫자의 소수점 이하를 반올림한 정수를 반환한다. Math.ceil 인수로 전달된 숫자의 소수점 이하를 올림한 정수를 반환한다. 소수점 이하를 올림 하면 더 큰 정수가 된다. Math.floor 인수로 전달된 숫자의 소수점 이하를 내림한 정수를 반환한다. Math.sqrt 인수로 전달된 숫자의 제곱근을 반환한다. Math.random 임의의 난수를 반환한다. Math.pow 첫 번째 인수를 밑으로, 두 번째 ..

Number Number는 원시 타입인 숫자를 다룰 때 유용한 프로퍼티와 메서드를 제공한다. Number 생성자 함수 const numObj = new Number(); console.log(numObj); Number 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 [[NumberData]] 내부 슬롯에 0을 할당한 Number 래퍼 객체를 생성한다. const numObj = new Number(10); console.log(numObj); const numObj = new Number('10'); console.log(numObj); Number 생성자 함수의 인수로 숫자가 아닌 값을 전달하면 인수를 숫자로 강제 변환한다. 💫 Number 프로퍼티 Number.EPSILON Num..

ES6에서는 함수를 사용 목적에 따라 일반 함수, 메서드, 화살표 함수 세 가지 종류로 구분했다. ES6 함수의 구분 constructor prototype super arguments 일반 함수 O O X O 메서드 X X O O 화살표 함수 X X X X 메서드 ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다. const obj = { x: 1, // foo는 메서드다. foo() { return this.x; }, // bar에 바인딩된 함수는 메서드가 아닌 일반 함수다. bar: function() { return this.x;} }; console.log(obj.foo()); // 1 console.log(obj.bar()); // 1 📢ES6 메서드는 생성자 함수로서 호..

클래스 자바스크립트에서 클래스를 한 문장으로 종결시키겠다. 클래스는 함수이다. 자바스크립트에서 클래스는 생성자 함수와 매우 유사하게 동작하지만 몇 가지 차이가 있다. 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 클래스는 상속을 지원하는 extends와 super 키워드를 제공한다. 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 클래스 내의 모든 코드는 암묵적으로 strict mode가 실행된다. 클래스는 열거되지 않는다. 생성자 함수와 클래스는 프로토타입 기반의 객체지향을 구현했다는 점에서 매우 유사하다. 하지만 클래스는 생성자 함수 기반의 객체 생성 방식보다 견고하고 명료하다. 따라서 클래스를 새로운 객체 생성 메커니즘으로 보면 된다. 🎢 클래스는 함수로 평가되어 호이스팅이 발생한다. ..

클로저 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있다. 이러한 중첩 함수를 클로저라 한다. 📌 const x = 1; // ① function outer() { const x = 10; const inner = function () { console.log(x); }; // ② return inner; } // outer 함수를 호출하면 중첩 함수 inner를 반환한다. // 그리고 outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거된다. const innerFunc = outer(); // ③ innerFunc(); // ④ 10 위 예시 코드를 보면 outer() 함수는 inner() 함수를 반환(retur..

실행 컨텍스트 실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다. 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다. 전역 코드 함수 코드 eval 코드 모듈 코드 소스코드의 평가와 실행 모든 소스코드는 실행에 앞서 평가 과정을 거치며 코드를 실행하기 위한 준비를 한다. 평가 과정 소스코드의 평가 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록한다. 소스코드의 실행 런타임이 시작되고 이때 소스코드 실행에 필요한 정보를 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득한다...

this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. 함수 호출 방식과 this 바인딩 this 바인딩은 함수 호출 방식, 즉 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다. 🛑함수 호출 방식 일반 함수 호출 메서드 호출 생성자 함수 호출 Function.prototype.apply/call/bind 메서드에 의한 간접 호출 1️⃣ 일반 함수 호출 기본적으로 this에는 전역 객체가 ..