모던 자바스크립트 Deep Dive ― (8)

모던 자바스크립트 Deep Dive ― (8)

 

모던자바스크립트 Deep Dive, 이웅모 지음

 

32장 String

표준 빌트인 객체인 String은 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메서드를 제공한다. 

 

32.1 String 생성자 함수

String 객체는 생성자 함수 객체로서 new 연산자와 함께 호출하면 String인스턴스를 생성할 수 있다. 

String 을 new 연산자와 함께 호출하면 String 래퍼 객체를 생성하는데, 이 String 래퍼 객체는 유사 배열이면서 이터러블이다. 따라서 배열과 유사하게 인덱스를 사용하여 각 문자에 접근하거나, length값을 가진다.

String 생성자 함수의 인수로 문자열이 아닌 값을 전달하면 인수를 문자열로 강제 변환한다. 

new연산자를 사용하지 않고 String에 생성자 함수를 호출하면 String인스턴스가 아닌 문자열을 반환한다. (명시적 타입 변환)

 

32.2 length 프로퍼티 

문자열의 문자 개수를 반환한다. 

 

32.3 String 메서드 

문자열은 원시 값이므로 변경할 수 없다. String 래퍼 객체는 읽기 전용 객체이며, String의 메서드는 언제나 새로운 문자열을 반환한다.

- String.prototype.indexOf : 대상 문자열에서 인수로 전달받은 문자열을 검색하여 첫번째 인덱스를 반환한다. (실패시 -1)

- String.prototype.search : 대상 문자열에서 인수로 받은 정규 표현식과 매치하는 문자열을 검색하여 인덱스를 반환한다.(실패시 -1)

- String.prototype.includes : 대상 문자열에 인수로 받은 문자열이 포함되어있는지 확인하여 불리언 값으로 반환한다.

- String.prototype.startWith : 대상 문자열이 인수 문자열로 시작하는지 확인하여 불리언 값으로 반환한다.

- String.prototype.endWith : 대상 문자열이 인수로 전달받은 문자열로 끝나는지 확인하여 불리언 값으로 반환한다.

- String.prototype.charAt : 대상 문자열에서 인수로 받은 인덱스에 위치한 문자를 반환한다. 

- String.prototype.substring : 대상 문자열에서 첫번째 인수 인덱스에 위치하는 문자부터 두번쨰 인수 인덱스에 위치하는 문자의 바로 이전까지의 부분 문자열을 반환한다. 

- String.prototype.slice : substring과 동일하게 동작하며, 음수인 인수를 전달하면 가장 뒤에서부터 문자열을 잘라 반환한다.

- String.prototype.toUpperCase : 대상 문자열을 모두 대문자로 변경하여 반환한다.

- String.prototype.toLowerCase : 대상 문자열을 모두 소문자로 변경하여 반환한다.

- String.prototype.trim : 대상 문자열의 앞뒤 공백 문자를 제거한다.

- String.prototype.repeat : 대상 문자열을 인수로 전달받은 만큼 반복 연결한 문자열을 반환한다.

- String.prototype.replace : 대상 문자열에서 첫 번째 인수로 전달받은 문자열 혹은 정규표현식을 사용하여 두 번째 인수로 전달한 문자열로 치환한 문자열을 반환한다. 검색된 문자열이 여럿이라면 첫 번째 검색된 문자열만 치환한다. 첫 번째 인수로 정규 표현식을 전달할 수 있으며, 두 번째 인수로 치환 함수를 전달할 수 있다. 

- String.prototype.split : 대상 문자열에서 첫 번쨰 인수로 전달한 문자열 또는 정규 표현식을 검색하여 문자열을 구분한 후 분리된 문자열로 이루어진 배열을 반환한다. 빈 문자열을 전달하면 각 문자를 모두 분리한다. 인수를 생각하면 대상 문자열 전체를 단일 요소로 하는 배열을 반환한다. 

 

 

33장 7번째 데이터 타입 Symbol

심벌Symbol은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 다른 값과 중복되지 않는 유일무이한 값이다. 충돌위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다. 

 

33.2 심벌 값의 생성 

심벌 값은 Symbol 함수를 호출하여 생성한다. 심벌 값은 외부로 노출되지 않아 확인할 수 없다. 

new 연산자와 함께 호출하지 않는다. 

선택적으로 문자열을 인수로 전달할 수 있지만, 심벌 값에 대한  설명으로 디버깅 용도로만 사용되며 값 자체에는 영향을 주지 않는다.

- Symbol.for 메서드 

인수로 전달받은 문자열을 키로 사용하여 키와 심벌 값의 쌍들이 저장되어 있는 전역 심벌 레지스트리에서 해당 키와 일치하는 심벌 값을 검색한다. 애플리케이션 전역에서 심벌 값을 생성하여 전역 심벌 레지스트리를 통해 공유할 수 있다. 

- Symbol.keyFor 메서드 

전역 심벌 레지스트리에 저장된 심벌 값의 키를 추출할 수 있다. 

 

33.4 심벌과 프로퍼티 키 

심벌 값으로 프로퍼티 키로 사용하려면 생성,접근 시 심벌 값에 대괄호를 사용해야 한다. 다른 프로퍼티 키와 절대 충돌하지 않는다.

 

33.5 심벌과 프로퍼티 은닉 

심벌 값을 프로퍼티 키로 사용하여 생성한 프로퍼티는 for...in문이나 object.keys 메서드로 찾을 수 없이 은닉할 수 있다.

 

33.6 심벌과 표준 빌트인 객체 확장

중복될 가능성이 없는 심벌 값으로 프로퍼티 키를 생성하여 표준 빌트인 객체를 확장하면 표준 사양이 변하더라도 안전하게 표준 빌트인 객체를 확장할 수 있다.

 

 

34장 이터러블

34.1 이터레이션 프로토콜

ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 자료구조를 만들기 위해 ECMAScript 사양에 정의한 규칙이다.

ES6이전에는 각 자료구조들이 다양한 방법으로 순회하였으나, ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for...of문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화했다.

이터레이션 프로토콜에는 이터러블 프로토콜, 이터레이터 프로토콜이 있다.

- 이터러블 프로토콜 : 이터러블 프로토콜을 준수한 객체를 이터러블이라 한다. for...of문으로 순회 가능하며, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용 가능하다.

- 이터레이터 프로토콜 : 이터러블의 symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 객체를 이터레이터를 반환한다. 이터레이터는 next 메서드를 갖는다.

 

이터러블 

이터러블 프로토콜을 준수한 객체. 예시로 배열은 for...of으로 순회할 수 있으며 스프레드 문법, 배열 디스트럭처링 할당 가능하다.

const array = [1,2,3]
console.log(Symbol.iterator in array) // true. 배열은 이터러블이다.
for(const item of array){console.log(item)} // for...of 문 사용
console.log([...array]) // 스프레드 문법 사용 
const [a, ...rest] = array // 배열 디스트럭처링 할당 가능 
console.log(a,rest) // 1, [2,3]

 

34.2 빌트인 이터러블 

자바스크립트는 이터레이션 프로토콜을 준수한 객체인 빌트인 이터러블을 제공한다.

- Array , String , Map, Set , TypedArray , arguments, DOM 컬렉션

 

34.3 for...of 문 

for...of 문은 이터러블을 순회하면서 이터러블의 요소를 변수에 할당한다. 내부적으로 이터레이터의 next 메서드를 호출하여 이터러블을 순회하며 next 메서드가 반환한 이터레이터 객체의 value 프로퍼티 값을 for ... of 문의 변수에 할당한다. 

for...in 문의 형식과 매우 유사하지만 다르다. for...in 문은 객체의 프로토타입 체인 상에 존재하는 모든 프로토타입 중에서 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 true인 모든 객체에서 사용 가능하다. 프로퍼티 키를 순회하며 열거한다.

아래 예시를 보면 for...of 와 for...in의 차이를 확실히 알 수 있을 것이다. 이 영상을 참고하면 좋을 것 같다. 

let obj = {'first':'value','secound':'value2'}
for(item of obj){console.log(item)} // TypeError: obj is not iterable
for(item in obj){console.log(item)} // first ,secound

let arr = ['h','e','l','l','o']
for(item of arr){console.log(item)} // h, e, l, l, o
for(item in arr){console.log(item)} // 0, 1, 2, 3, 4

 

34.4 이터러블과 유사 배열 객체 

유사 배열 객체는 배열처럼 인덱스로 프로퍼티 값에 접근하고 length 프로퍼티를 갖는 객체다. 

Symbol.iterator메서드가 없기 때문에 for...of 문으로는 순회할 수 없다.

 

34.5 이터레이션 프로토콜의 필요성 

순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for...of문법, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원하했다. 데이터 공급자(Array,String...)가 데이터 소비자(for...of,스프레드 문법)와 이터레이션 프로토콜이라는 인터페이스로 연결된다. 

 

34.6 사용자 정의 이터러블

이터레이션 프로토콜을 준수하지 않는 객체도 이터레이션 프로토콜을 준수하도록 구현하는 것이다.

피보나치 수열, 무한 수열 등을 간단히 구현할 수 있다. 

 

 

35장 스프레드 문법 

ES6에서 도입된 스프레드 문법은 ... 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐 개별적인 값들의 목록으로 만든다.

사용할 수 있는 대상은 Array, String, Map, Set, DOM컬렉션 등 for...of문으로 순회할 수 있는 이터러블에 한정된다.

이터러블이 아닌 일반 객체는 스프레드 문법의 대상이 될 수 없다.

값을 생성하는 연산자가 아니므로 스프레드 문법의 결과는 변수에 할당할 수 없다. 

console.log(...[1,2,3]) //1,2,3 
console.log(...'hello') // h e l l o 
console.log(...{a:1,b:2}) // TypeError : Found non-callable @@iterator

함수 호출문의 인수 목록, 배열 리터럴의 요소 목록, 객체 리터럴의 프로퍼티 목록에서만 사용할 수 있다.

 

Rest파라미터와 형태가 동일하여 혼동할 수 있으므로 주의해야 한다. 

Rest파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받기 위해 매개변수 이름 앞에 ...을 붙이는 것이다. 여러 개의 값이 하나로 뭉쳐 있는 배열과 같은 이터러블을 펼쳐서 개별 값들의 목록을 만든다. 

let arr = [1,2,3]
let arr1 = [4,5,6]
let obj = {a:1,b:2}

//spread : 배열이나 오브젝트를 확장한다. 
let spreadArr = [...arr, arr1] // [1,2,3,4,5,6]
let spreadObj = {...obj, c:3} // {a:1, b:2, c:3}

//Rest : 함수의 인수들의 목록을 배열로 전달받는다. 
Math.max(...arr) // 3 
function newFunc(b,...a){
    console.log(b,a)
}
newFunc(5,6,7) // 5, [6,7]

 

35.1 함수 호출문의 인수 목록에서 사용 

ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 자료구조를 만들기 위해 ECMAScript 사양에 정의한 규칙이다.

Math.max(...arr)

 

35.2 배열 리터럴 내부에서 사용하는 경우

- concat 메서드를 사용해야 하는 배열 결합을 스프레드 문법으로 사용한다. ex) const arr = [...[1,2],...[3,4]] // [1,2,3,4]

- 배열을 얕은 복사할 때 사용한다. ex) const arr2 = [...arr] // [1,2,3,4]

- 이터러블을 배열로 변환할 때 사용한다.

- 이터러블이 아닌 유사 배열 객체는 스프레드 문법의 대상이 될 수 없다.

const arrayLike = {0:1,1:2,2:3,length:3}
const realArray = [...arrayLike] // TypeError : object is not iterable
// 유사 배열 객체를 배열로 변경하려면 Array.from 메서드 사용
Array.from(arrayLike) //[1,2,3]

 

35.3 객체 리터럴 내부에서 사용하는 경우

객체 리터럴의 프로퍼티 목록에서도 스프레드 문법을 사용할 수 있다. 일반 객체를 대상으로 스프레드 문법의 사용을 허용한다.

const obj1 = {a:1,b:2}
const obj2 = {...{a:1, b:2}, b:3, c:100} // {a:1,b:3,c:100}