분류 전체보기 108

[JavaScript/DeepDive]29.Math

표준 빌트인 객체인 Math는 수학적인 상수와 함수를 위한 프로퍼티와 메서드를 제공한다. Math는 생성자 함수가 아니므로 정적 프로퍼티와 정적 메서드만 제공한다. [29.1] Math 프로퍼티 Math.PI 원주율 PI 값을 반환한다. [29.2] Math 메서드 Math.abs Math.abs 메서드는 인수로 전달된 숫자의 절대값을 반환한다. 절대값은 반드시 0또는 양수이어야 한다. Math.round Math.round 메서드는 인수로 전달된 숫자의 소수점 이하를 반올림한 정수를 반환한다. Math.ceil Math.ceil 메서드는 인수로 전달된 숫자의 소수점 이하를 올림한 정수를 반환한다. 소수점 이하를 올림하면 더 큰 정수가 된다. Math.floor Math.floor 메서드는 인수로 전달된..

[JavaScript/DeepDive]28.Number

표준 빌트인 객체인 Number는 원시 타입인 숫자를 다룰 때 유용한 프로퍼티와 메서드를 제공한다. [28.1] 생성자 함수 표준 빌트인 객체인 Number 객체는 생성자 함수 객체다. 따라서 new 연산자와 함께 호출하여 Number 인스턴스를 생성할 수 있다. Number 생성자 함수의 인수로 숫자가 아닌 값을 전달하면 인수를 숫자로 강제 변환한 후, [[NumberData]] 내부 슬롯에 변환된 숫자를 할당한 Number 래퍼 객체를 생성한다. [28.2] Number 프로퍼티 Number.EPSILON ES6에서 도입된 Number.EPSILON은 1과 1보다 큰 숫자 중에서 가장 작은 숫자와의 차이와 같다. Number.EPSILON은 부동소수점으로 인해 발생하는 오차를 해결하기 위해 사용한다...

[JavaScript/DeepDive]27.배열(3)

[27.9] 배열 고차 함수 고차 함수는 함수를 인수로 전달받거나 함수를 반환하는 함수를 말한다. 자바스크립트의 함수는 일급 객체이므로 함수를 값처럼 인수로 전달할 수 있으며 반환할 수도 있다. 고차 함수는 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다. 함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다. 함수형 프로그래밍은 결국 순수 함수를 통해 부수 효과를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이려는 노력의 일환이라고 할 수 있다. Array.prototype.sort sort 메서드는 배열의 요소..

[JavaScript/DeepDive]27.배열(2)

[27.8] 배열 메서드 배열 메서드는 결과물을 반환하는 패턴이 두 가지이므로 주의가 필요하다. 배열에는 원본 배열(배열 메서드)를 호출한 배열, 즉 배열 메서드의 구현체 내부에서 this가 가리키는 객체)을 직접 변경하는 메서드와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드가 있다. const arr = [1]; // push 메서드는 원본 배열(arr)을 직접 변경한다. arr.push(2); console.log(arr); // [1,2] // concat 메서드는 원본 배열(arr)을 직접 변경하지 않고 새로운 배열을 생성하여 반환한다. const result = arr.concat(3); console.log(arr); // [1,2] console.log(result..

[JavaScript/DeepDive]27.배열(1)

[27.1] 배열이란? const arr = ['apple', 'banana', 'orange']; 배열이 가지고 있는 값을 요소라고 부른다. 자바스크립트의 모든 값은 요소가 될 수 잇다. 즉, 원시값은 물론 객체, 함수, 배열 등 자바스크립트에서 값으로 인정하는 모든 것은 배열의 요소가 될 수 있다. 배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스를 갖는다. 배열은 요소의 개수, 즉 배열의 길이를 나타내는 length 프로퍼티를 갖는다. arr.length // ->3 배열은 인덱스와 length 프로퍼티를 갖기 때문에 for 문을 통해 순차적으로 요소에 접근할 수 있다. // 배열의 순회 for ( let i = 0; i < arr.length; i++) { console.lo..

[JavaScript/DeepDive]26.ES6 함수의 추가 기능

[26.1] 함수의 구분 ES6 이전의 함수는 동일한 함수라도 다양한 형태로 호출할 수 있다. var foo = function ( ) { return 1; }; // 일반적인 함수로서 호출 foo( ); // ->1 // 생성자 함수로서 호출 new foo ( ); // -> foo { } // 메서드로서 호출 var obj = { foo: foo }; obj.foo( ); // -> 1 ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다. 다시 말해, ES6 이전의 모든 함수는 callable이면서 constructor다. ES6에서는 함수를 사용 목적에 따라 세 가지 종류로 명확히 구분했다. ES6 함수의 구분 constructor prototype ..

[JavaScript/DeepDive]25.클래스(3)

[25.8] 상속에 의한 클래스 확장 클래스 상속과 생성자 함수 상속 프로토타입 기반 상속은 프로토타입 체인을 통해 다른 객체의 자산을 상속받는 개념이지만 상속에 의한 클래스 확장은 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의하는 것이다. 클래스는 상속을 통해 기존 클래스를 확장할 수 있는 문법이 기본적으로 제공되지만 생성자 함수는 그렇지 않다. 상속에 의한 클래스 확장은 코드 재사용 관점에서 매우 유용하다. class Animal { constructor(age, weight) { this.age = age; this.weight = weight; } eat( ) { return 'eat'; } move( ) { return 'move'; } } // 상속을 통해 Animal 클래스를 확장한 ..

[JavaScript/DeepDive]25.클래스(2)

[25.6] 클래스의 인스턴스 생성과정 new 연산자와 함께 클래스를 호출하면 생성자 함수와 마찬가지로 클래스의 내부 메서드 [[Construct]]가 호출된다. 인스턴스는 다음의 과정을 거쳐 생성된다. 인스턴스 생성과 this 바인딩 new 연산자와 함께 클래스를 호출하면 constructor의 내부 코드가 실행되기에 앞서 암묵적으로 빈 객체가 생성된다. 이 빈 객체가 바로 (아직 완성되지는 않았지만) 클래스가 생성한 인스턴스다. 이때 클래스가 생성한 인스턴스의 프로토타입으로 클래스의 prototype 프로퍼티가 가리키는 객체가 설정된다. 그리고 암묵적으로 생성된 빈 객체, 즉 인스턴스는 this에 바인딩된다. 따라서 constructor 내부의 this 클래스가 생성한 인스턴스를 가리킨다. 인스턴스 ..

[JavaScript/DeepDive]24.클래스(1)

[25.1] 클래스는 프로토타입의 문법적 설탕인가? 클래스는 생성자 함수보다 엄격하며 생성하 함수에서는 제공하지 않는 기능도 제공한다. 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 하지만 생성자 함수를 new 연산자 없이 호출하면 일반 함수로서 호출된다. 클래스 상속을 지원하는 extends와 super 키워드를 제공한다. 하지만 생성자 함수는 extends와 super 키워드를 지원하지 않는다. 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 하지만 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수 표현식으로 정의한 생성자 함수는 변수 호이스팅이 발생한다. 클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되며 strict mode를 해제할 수 없다. 하..

[JavaScript/DeepDive]24.클로저(2)

[24.4] 클로저의 활용 클로저는 상태를 안전하게 변경하고 유지하기 위해 사용한다. 다시 말해, 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다. 클로저를 사용해서 함수가 호출될 때마다 호출된 횟수를 출력하는 카운터를 만드는 예제 // 카운트 상태 변경 함수 const increase = ( function ( ) { // 카운트 상태 변수 let num = 0; // 클로저 return function ( ) { // 카운트 상태를 1만큼 증가시킨다. return ++num; }; }( )); console.log(increase( )); // 1 console.log(increase( )); // 2 console.log(increas..