25. 클래스
•
new 없이 호출하면 에러가 남
•
호이스팅이 발생하지 않는 것처럼 동작
•
모든 코드에는 암묵적으로 strict mode가 적용
클래스 정의
class Person{
constructor(name){
this.name = name;
}
sayHi(){
console.log(`Hi! My name is ${this.name}`);
}
static sayHello(){
console.log('Hello!');
}
}
const me = new Person('Lee');
console.log(me.name);
me.sayHi();
Person.sayHello();
JavaScript
복사
클래스 선언문은 런타임 이전에 평가되어 함수 객체를 생성한다.
단 클래스는 클래스 정의 이전에 참조할 수 없다. 호이스팅은 발생하지만, 호이스팅이 없는 것처럼 행동한다.
생성자
constructor는 메서드로 해석되는 것이 아니라, 클래스가 평가되어 생성한 함수 객체 코드의 일부가 된다.
constructor의 기술된 동작을 하는 함수 객체가 생성된다.
프로토타입 메서드
prototype 프로퍼티에 메서드를 추가하지 않아도 기본적으로 프로토타입 메서드가 된다.
정적 메서드
클래스에 바인딩된 메서드가 된다.
메서드 내부에서 인스턴스 프로퍼티를 참조할 필요가 있다면 this, 아니면 프로토타입 메서드로 정의해야함.
상속에 의한 클래스 확장
클래스 상속과 생성자 함수 상속
class Animal{
constructor(age,weight){
this.age = age;
this.weight = weight;
}
eat(){ return 'eat';}
move(){return 'move';}
}
class Bird extends Animal{
fly(){return 'fly';}
}
JavaScript
복사
•
서브 클래스에서 constructor를 생략하면 비어있는 constructor가 암묵적으로 정의됨.
•
super를 호출하면 수퍼클래스의 constructor를 호출한다.
•
서브 클래스에서 constructor를 생략하지 않는 경우 서브 클래스의 constructor에서는 반드시 super를 호출해야하고, 서브클래스의 constructor에서 super를 호출하기 전에는 this를 참조할 수 없다.
•
super는 반드시 서브 클래스의 constructor에서만 호출한다.
•
메서드 내에서 super를 참조하면 수퍼 클래스의 메서드를 호출할 수 있다.
colorRectangle → colorRectangle.prototype → Rectangle.prototype → Object.prototype
ColorRectangle 클래스 → Rectangle 클래스 → Function.prototype → Object.prototype
class Rectangle{
constructor(width,height){
this.width = width;
this.height = height;
}
getArea(){
return this.width * this.height;
}
toString(){
return `width = ${this.width}, height = ${this.height}`;
}
}
class ColorRectangle extends Rectangle{
constructor(width, height,color){
super(width, height);
this.color = color;
}
toString(){
return super.toString() + `, color = ${this.color}`;
}
}
const colorRectangle = new ColorRectangle(2,4,'red');
console.log(colorRectangle);
console.log(colorRectangle.getArea());
console.log(colorRectangle.toString());
JavaScript
복사
26. ES6함수 추가 기능
constructor | prototype | super | arguments | |
일반 함수 | O | O | X | O |
메서드 | X | X | O | O |
화살표 함수 | X | X | X | X |
메서드
ES6 사양에서는 메서드 축약 표현으로 정의된 함수만을 의미함.
const obj = {
x: 1,
foo() { return this.x;},
bar: function(){return this.x}
};
JavaScript
복사
축약 표현 메서드는 non-constructor다.
화살표 함수
•
함수 선언문으로 할 수 없고, 함수 표현식으로 정의해야한다.
•
매개변수가 여러 개인 경우 소괄호 안에 매개변수를 선언
•
매개변수가 한개인 경우 소괄호를 생략할 수 있다.
•
매개변수가 없는 경우 생략 불가
const arrow = (x,y) => {...};
JavaScript
복사
•
즉시 실행 함수로 사용할 수 있다.
const person = (name => ({
sayHi(){ return `Hi? My name is ${name}.`;}
}))('Lee'); //객체를 반환, 즉시 실행 함수의 실행 컨텍스트에 남아있는 'Lee'를 참조하는 클로저
JavaScript
복사
화살표 함수와 일반 함수 차이
•
non-contructor이다.
•
중복된 매개변수 이름을 선언할 수 없다.
•
◦
스코프 체인을 통해 상위 스코프의 this,arguments, super, new.target을 참조함.
class Prefixer{
constructor(prefix){
this.prefix = prefix;
}
add(arr){
return arr.map(function(item){
return this.prefix + ' ' + item;
});
}
}
const prefixer = new Prefixer(‘-webkit-’);
console.log(prefixer.add(['transition','user-select']));
JavaScript
복사
class Prefixer{
constructor(prefix){
this.prefix = prefix;
}
add(arr){
return arr.map(function(item){
return this.prefix + ' ' + item;
}.bind(this));
}
}
const prefixer = new Prefixer(‘-webkit-’);
console.log(prefixer.add(['transition','user-select']));
JavaScript
복사
class Prefixer{
constructor(prefix){
this.prefix = prefix;
}
add(arr){
return arr.map(item => this.prefix + item);
}
}
const prefixer = new Prefixer(‘-webkit-’);
console.log(prefixer.add(['transition','user-select']));
JavaScript
복사
상위 스코프의 this를 그대로 참조 → 상위 스코프는 add다. add의 this는 prefixer이다.
스코프 체인 상에서 가장 가까운 상위 함수 중에서 화살표 함수가 아닌 함수의 this를 참조한다.
//increase 프로퍼티에 할당한 화살표 함수의 상위 스코프는 전역, this는 전역객체
const counter = {
num: 1,
increase: () => ++this.num
};
console.log(counter.increase());
JavaScript
복사
27. 배열
자바스크립트 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체이다.
인덱스를 나타내는 문자열을 프로퍼티 키로 가지며, length 프로퍼티를 갖는 특수한 객체이다.
자바스크립트 배열 → 해시 테이블로 구현된 객체
접근하는 경우는 일반적인 배열보다 느리지만, 요소를 삽입 또는 삭제할 때는 배열보다 빠름.
배열 생성
배열 리터럴
const arr = [1,2,3];
const arr = [];
const arr = [1, ,3];
JavaScript
복사
Array 생성자 함수
const arr = new Array(10);
Array.of('string')// -> ['string']
Array.from({length: 2,0:'a', 1: 'b'}); // ['a','b']
Array.from('Hello') // -> {'H', 'e','l','l','o'}
JavaScript
복사
Array.from() : 유사 배열 객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환하여 반환.
두번째 인수로 전달한 콜백 함수를 통해 값을 만들면서 채울 수 있다. 첫번째 인수로 전달한 콜백함수에, 첫번째 인수에 의해 생성된 배열의 요소값과 인덱스를 순차적으로 전달하면서 호출하고, 콜백 함수의 반환값으로 구성된 배열을 반환.
배열 메서드
1.
원본 배열을 직접 변경하는 메서드
2.
원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드
1.
Array.isArray → 배열이닞 아닌지
2.
Array.prototype.indexOf → element의 인덱스를 뱉는다. 없으면 -1
3.
Array.prototype.push → 전달받은 모든 값을 배열의 마지막 요소로 추가. 원본 배열 직접 변경
4.
Array.prototype.pop → 마지막 요소를 제거하고 반환. 원본 배열 직접 변경
5.
Array.prototype.unshift → 모든 값을 원본 배열의 선두에 요소로 추가, 원본 배열 직접 변경
a.
부수효과가 있으므로, 스프레드 문법을 사용하는 것을 추천
6.
Array.prototype.shift → 배열의 첫 요소를 제거하고, 제거한 요소를 반환. 빈 배열이면 undefined 반환. 원본 배열 직접 변경
7.
Array.prototype.concat → 배열 두개를 붙이거나, 마지막에 붙임. 부수효과 X
8.
Array.prototype.splice → 배열을 자르고, 삽입하고 그럼. 원본 배열 직접 변경
9.
Array.prototype.slice → 전달된 범위의 요소들을 복사해서 배열로 반환. 부수효과 X
10.
Array.prototype.join → 구분자로 연결한 문자열을 반환
11.
Array.prototype.reverse → 원본 배열 거꾸로.
12.
Array.prototype.fill → 전달받은 값을 처음부터 끝까지 채움
13.
Array.prototype.includes → 배열 내에 특정 요소가 포함되어있는지 확인, true, false 반환
14.
Array.prototype.flat → 평탄화
배열 고차함수
함수형 프로그래밍 : 순수함수와 보조함수의 조합을 통해 조건문과 반복문을 제거하여, 복잡성을 해결하고 변수 사용을 억제하여, 상태 변경을 피하려는 프로그래밍 패러다임
Array.prototype.sort
→ 일시적으로 문자열로 바꿔서 정렬한다. 이 때 유니코드로 정렬한다.
따라서 비교함수를 넣어줘야한다.
음수 : 비교함수의 첫번째 인수를 우선하여 정렬
0 : 정렬하지 않고
양수 : 두 번째 인수를 우선하여 정렬
const todos = [
{id: 4, content: 'JavaScript'},
{id: 1, content: 'HTML'},
{id: 2, content: 'CSS'}
]
function compare(key){
return (a,b) => (a[key] > b[key] ? 1: (a[key] < b[key] ? -1 : 0 ));
}
todos.sort(compare('id'));
todos.sort(compare('content'));
JavaScript
복사
Array.prototype.forEach
배열을 변경하지 않지만, 콜백 함수를 통해 원본 배열을 변경할 수는 있다.
forEach 메서드의 반환값은 언제나 undefined이다.
두번째 인수로 콜백 함수 내에서 사용할 this를 전달해줄 수 있다.
class Numbers{
numberArray = [];
multiply(arr){
arr.forEach(function(item){
this.numberArray.push(item*item);
});
}
}
const numbers = new Numbers();
numbers.multiply([1,2,3]);
JavaScript
복사
→ 이렇게 되면 forEach 문 안의 콜백 함수가 일반 함수로 호출되므로 this가 undefined이다.
따라서 this 바인딩을 해주거나, 그냥 화살표 함수를 쓰자.
class Numbers{
numberArray = [];
multiply(arr){
arr.forEach(function(item){
this.numberArray.push(item*item);
},this);
}
}
const numbers = new Numbers();
numbers.multiply([1,2,3]);
JavaScript
복사
class Numbers{
numberArray = [];
multiply(arr){
arr.forEach(item => this.numberArray.push(item*item));
}
}
const numbers = new Numbers();
numbers.multiply([1,2,3]);
JavaScript
복사
Array.prototype.map
콜백 함수의 반환값들로 구성된 새로운 배열을 반환.
→ forEach 처럼 변경 가능, 마찬가지로 this 바인딩 해줘야함
Array.prototype.filter
콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다.
Array.prototype.reduce
콜백 함수를 호출하여 하나의 결과값을 만들어 반환한다. 원본 배열을 변경되지 않음.
34.이터러블
Symbol.iterator 메서드를 직접 구현하지 않거나 상속받지 않은 일반 객체는 이터러블 프로토콜을 준수한 이터러블이 아니다. 일반 객체는 for...or 문으로 순회할 수 없으며, 스프레드 문법과 배열 디스트럭처링 할당의 대상이 안디ㅏ.
빌트인 이터러블
1.
Array
2.
String
3.
Map
4.
Set
5.
TypedArray
6.
arguments
7.
DOM 컬렉션
for...of 문 사용 가능
