2022/08/24 - TIL

26장 ES6 함수의 추가 기능

26.1 함수의 구분

ES6 이전의 메서드라고 부르던 객체에 바인딩된 함수도 callable이며 constructor이다.(내부 메서드 Call Construct를 둘다 가지고 있다) 불필요한 객체를 생성하기 때문에, 성능 문제가 있따.

26.2 메서드

ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다 ES6 사양에서 정의한 메서드는 인스턴스를 생성할 수 없는 non-constructor이기에 생성자 함수로 생성이 불가능하다

prototype 프로퍼티가 없고 프로토타입도 생성하지 않는다. ES6 메서드는 자신이 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 갖는다. super는 내부 슬롯 [[HomeObject]]를 사용하여 수퍼클래스의 ㅔ서드를 참조하므로 내부 슬롯 [[HomeObject]]를 갖는다.

ES6메서드는 super키워드를 사용할 수 있다. 하지만 ES6가아닌 함수는 불가능하다.

26.3 화살표 함수

26.3.1 화살표 함수 정의

함수 선언문으로 정의할 수 없고 함수 표현식으로 정의해야 한다.

매개 변수가 1개가 아니라면 소괄호 안에 매개변수를 선언한다.

하나의 문으로 구성된다면 함수 몸체를 감싸는 중괄호를 생략할 수 있다.

26.3.2 화살표 함수와 일반 함수의 차이

1. 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor이다. ⇒ prototype 프로퍼티가 없고, 프로토타입도 생성하지 않는다.
2. 중복 매개변수 이름을 선언할 수 없다.(일반 함수는 중복되게 선언해도 문제가 없다.(strict mode 제외)
3. 함수 자체의 this, arguments, super, new target을 참조하면 스코프 체인을 통해 상위 스코프의 것을 참고한다.
4. this는 호출되는 방식에 따라 this에 바인딩할 객체가 동적으로 결정된다.
5. 화살표 함수를 사용하면 함수 자체의 this 바인딩을 갖지 않기 때문에 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다. 화살표 함수는 this가 없지만 call appy bind를 사용하여 함수 내부의 this를 교체할 수는 없다. 하지만, this 바인딩을 갖지 않기 떄문에 this를 교체할 수 없고 언제나 상위 스코프의 this 바인딩을 참조한다.

26.3.4 super

화살표 함수는 함수 자체의 super 바인딩을 가지고 있지 않기에 상위 스코프의 super를 참조한다

26.3.5 arguments

함수 자체의 arguments 바인딩을 갖지 않기 때문에 화살표 함수 내부의 grguments를 참조하면, this와 마찬가지로 사우이 스코프의 arguments를 참조한다. 사용한다면 Rest 파라미터를 사용해야 한다.

26.4.1 기본 문법

Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.

Rest 파라미터는 단 하나만 선언할 수 있다.

arguments는 유사배열 객체이므로 Function.prototype.call이나 Function.prototype.apply 메서드를 사용해 arguments 객체를 배열로 변환해야하는 번거로움이있다

function sum(x, y){
	x = x||0;
	y = y||0;
return x+y;
}
//이전에는 기본값의 기능이 없었다.

function sumn(x=0, y=0){
	return x + y;
}

27장 배열

27.1 배열이란?

순차적으로 값을 나열한 자료 구조

장점 : 순차적으로 요소에 접근할 수 있고, 마지막부터 역순으로도 접근할 수있고, 특정 위치부터 순차적으로 접근할 수 있다.(값의 순서와 length 프로퍼티 덕분이다)

27.2 자바스크립트 배열은 배열이 아니다.

자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열한 구조이다(밀집 배열). 자바 스크립트의 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체이다.

일반적인 배열은 인덱스 요소로 빠르게 접근할 수 있고, 삭제 삽입이 효율적이지 않다.

자바스크립트 배열은 해시 테이블로 구현된 객체이기 떄문에 일반적인배열보다 성능적으론 느릴 수밖에 없지만, 요소삭제 또는 삭제하는 경우에는 일반적인 배열보다 빠른성능이다.

27.3 length 프로퍼티와 희소 배열

const arr = [1,2,3]
arr[1] //배열 안의 범위 안에서의 변경은 문제가 없다
arr[4] //현재 length보다 더 큰 범위를 할당한다면 
[1,2,3, emtpy*2] 빈공간이 생긴다
empty는 실제 배열의 요소가 아니라 메모리 공간을 확보하지 않으며 빈 요소를
생성하지도 않는다.

이렇게 일부가 비여있는 배열을 희소 배열이라고 한다. 희소 배열은 length와 실제 요소
갯수와 일치하지 않는다.

27.4 Array 생성자 함수

생성자 함수는 전달된 인수의 개수에 따라 다르게 동작하므로 주의가 필요하다.

new Array(10) => [empty * 10] length= 10
new Array(4294967296) => RangeError
new Array(-1) => RangeError
new Array(); =>[]
new Array(1,2,3) => [1,2,3]
new Array({}) => [{}]

//Array.of 전달된 인수를 가지고 배열을 생성한다
Array.of(1)//[1]
Array.of(1,2,3)//[1,2,3]
Array.of('string') //['string']

//Array.from 유사배열 객체 또는 이터러블 객체를 인수로 전달받아 배열로 만든다
Array.from({length:2, 0:'a', 1:'b'}) //['a', 'b']
Array.from('Hello') //['H', 'e', 'l', 'l', 'o']
Array.from({length:3}); //[undefined, undefined, undefined]
Array.from({length :3}, (_, i) =>i;)  //[0,1,2]

유사 배열 객체와 이터러블 객체

유사 배열 객체는 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고
length 프로퍼티를 갖는 객체를 말한다. 유사 배열 객체는 마치 배열 처럼
for 문으로 순회할 수 있다
이터러블 객체는 Symbol.iterator 메서드를 구현하여 for ...of 문으로 순회가능하며
스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있는 객체를 말한다.
ES6에서 제공하는 빌트인 이터러블은 Array, String, Map, Set, DOM 컬렉션등이 있다

27.5 배열 요소의 참조

값이 존재하는 인덱스로 접근할 떄는 문제가 없다 다만, 가지고 있는 크기 보다 큰(중간에 값이 비어서 값이 커지지 않는한) 혹은, 비어있는 희소 배열에 접근하는 경우 undefined가 나온다

const arr = [1, <empty>]
arr[1]이나, arr[2]에 접근하면 undefied가 뜬다.

27.7 배열 요소의 삭제

배열은 사실 객체이기 땜문에 배열의 특정요소를 삭제하기 위해 delete 연산자를 사용할 수 있다. 단, delete는 희소 배열을 만들기에, 특정 요소를 완전히 삭제하려면 Array.prototype.slice 메서드를 사용한다.

27.9.6 Array.prototype.some

[5,10,11].some(item=>item>10); //true 1개라도 만족하면 true가 나온다

27.9.7 Array.prototype.every

[5, 10 ,11].some(item => item>3)//true 모든 요소가 만족하면 true

27.9.8 Array.prototype.find

const user = [
	{id:1, name:'Lee'},
	{id:1, name:'Kim'}
]
user.find( user => user.id===2) //{id:1, name:'Lee'} 첫번쨰 요소를 반환한다

27.9.8 Array.prototype.findIndex

const user = [
	{id:1, name:'Lee'},
	{id:1, name:'Kim'}
]
user.find( user => user.id===2) //{id:1, name:'Lee'} 0, 조건에 일치하는 인덱스를 구한다