31장 RegExp ~ 35장 스프레드 문법

Boseong Choi·2023년 7월 15일

모던 자바스크립트 Deep Dive

목록 보기

24/29

📌 31장 RegExp 정규 표현식

정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공하는 문자열의 구조를 파악하는 데 사용하는 패턴

문자에 한글이 들어가 있는지
이메일 형식이 맞는지
숫자로 시작하는지 등

문자 형식을 검증할 때 사용한다. 거의 모든 언어에서 지원한다.

정규 표현식이 어려운 이유

정규 표현식은 암기해야 할 문법이 많다.
예측이 어렵다.
잘못 작성한 정규 표현식은 애플리케이션을 정지시킬 수 있다.

그래서 대부분 라이브러리나 AI의 도움을 받는다.

📌 32장 String

String 빌트인 객체는 문자열을 다룰 때 유용한 프로퍼티와 메소드를 제공한다. 사용법은 다른 빌트인 객체와 동일하게 new 연산자를 사용하여 인스턴스를 생성한다. Array와 마찬가지로 indexOf, slice, length 등의 프로퍼티와 메소드를 사용할 수 있다.

메서드를 나열하기 보다는 Array와 String을 비교하며 느낀점을 적는 것이 좋을것 같다.

Array 객체는 데이터를 순서대로 저장할 수 있다는 장점이 있다.
또한, Array 객체는 다양한 메서드와 속성을 제공하여 데이터를 쉽게 처리할 수 있다.

String 객체는 데이터를 문자열로 저장할 수 있다는 장점이 있다.
또한, Array 객체와 달리 순서가 없기 때문에 데이터를 순서대로 처리할 수 없다는 점이 있는데, 단점이자 장점같다.

따라서, Array 객체와 String 객체 중 어느 객체를 사용할지는 데이터의 특성에 따라 다르다.
만약, 데이터를 순서대로 저장하고, 다양한 메서드와 속성을 사용하여 데이터를 처리해야 한다면 Array 객체를 사용하는 것이 좋고 정규식이 필요하거나 문자열의 길이와 구조를 변경할 필요가 없는 경우 String 객체를 사용하는 것이 좋을 것 같다.

📌 33장 Symbol

7번째 자료형. 변경 불가능한 원시 타입의 값이다. 심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키를 만들기 위해 사용한다.

심볼 함수에는 선택적으로 설명을 붙일 수 있다. 이 설명은 디버깅 용도로만 사용되며 심벌 값에 영향을 주지 않는다. 즉, 설명이 같은 심벌 값도 다른 심벌 값이다.

변수처럼 같은 값을 가지면 같은 변수로 취급해주는
전역 심볼을 만들어쓸 수 있다. Symbol.for() 를 사용하면 된다.

33.7 Well-Known Symbol

자바스크립트는 기본으로 제공하는 빌트인 심벌 값을 제공한다. Array나 Object 같은 자료형을 만들 때 암묵적으로 사용되는 심벌 값이다.

예를 들면 Array, String 등의 경우 Symbol.iterator를 키로 갖는 메서드를 가지고 있다. 이 메서드는 이터레이터를 반환한다고 규정되어있다. 빌트인 이터러블은 이터레이션 프로토콜을 준수한다.

어디에 사용할 수 있을까?

유일한 식별자를 만들어야 할 때
숨길 수 있는 프로퍼티를 만들 때. 외부 코드에서 접근할 수 없는 프로퍼티를 만들 수 있다. 예를 들어 객체에 심벌을 사용하면 for...in, for...of 문으로 순회할 수 없다.
enumerate 할 수 없다는 뜻이다. 그래서 JSON.stringify() 에서도 제외된다.

📌 34장 이터레이션 프로토콜

ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 객체를 만들기 위한 규약이다.
이전에는 배열, 문자열 등은 각자 나름의 방식으로 순회(for문, for...in문, forEach 메서드 등)했지만, ES6에서는 순회 가능한 데이터 컬렉션을 프로토콜을 준수하는 객체로 통일하여 for...of, 스프레드 문법, 배열 디스트럭쳐링 할당의 대상으로 일원화했다.

이터레이션 프로토콜은 덕 타이핑을 통해 구현된다.

덕 타이핑
사람이 오리처럼 행동하고 오리처럼 생겼으면 오리다. 실제 타입은 상관없고 구현된 메서드가 같으면 같은 타입으로 간주한다. 즉, 객체의 구조가 프로토콜을 충족하면 이터러블로 간주한다.

프로토콜을 충족하려면 객체의 프로퍼티에 Symbol.iterator가 있어야 하고, 이것은 이터레이터를 반환하는 함수여야 한다. 이터레이터는 next 메서드를 갖는다.

next 메서드는 다시 value와 done 프로퍼티를 갖는 객체를 반환한다. 이터레이션 프로토콜은 이터러블 프로토콜, 이터레이터 프로토콜로 구성된다.

이터러블인지 확인하는 함수 (615p)

const isIterable = v => v !== null && typeof v[Symbol.iterator] === 'function';

console.log(isIterable([])); // true
console.log(isIterable('')); // true
console.log(isIterable(new Map())); // true
console.log(isIterable(new Set())); // true
console.log(isIterable({})); // false

const obj = { a: 1, b: 2 };

console.log(Symbol.iterator in obj); // false

// 이터러블이 아닌 객체는 for...of 문에서 순회할 수 없다.
for (const p of obj) {
  console.log(p);
}

단, 일반 객체에 스프레드 문법을 사용할 수 있도록 허용한다.

느낀 점

프로젝트 중에 for...in 문을 사용한 부분이 있었는데, 이 부분을 for...of 문으로 바꾸니까 값이 제대로 나오지 않았다.

이유를 찾으려고 에전에 검색했던 내용을 다시 찾아보았는데, 그 때 당시에는 이터러블에 대한 개념이 없어서 이해하지 못했었다.

이번에 이터러블에 대해 공부하고 나니까 이해가 되었다. for...in 문은 객체의 프로퍼티를 순회하지만 for...of 문은 이터러블을 순회하기 때문에 값이 제대로 나오지 않았던 것으로 이해된다.

📌 35장 스프레드 문법

하나로 뭉쳐있는 여러 값들을 펼쳐서 사용할 수 있게 해주는 문법.
Array, Object, String, Map, Set, DOM collection 등 for...of 문으로 순회할 수 있는 이터러블은 모두 스프레드 문법의 대상이 될 수 있다.

// ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다.(-> 1, 2, 3)
console.log(...[1, 2, 3]); // 1 2 3

// 문자열은 이터러블이다.
console.log(...'Hello'); // H e l l o

// Map과 Set은 이터러블이다.
console.log(...new Map([['a', '1'], ['b', '2']])); // [ 'a', '1' ] [ 'b', '2' ]
console.log(...new Set([1, 2, 3])); // 1 2 3

// 이터러블이 아닌 일반 객체는 스프레드 문법의 대상이 될 수 없다.
console.log(...{ a: 1, b: 2 }); // TypeError: Found non-callable @@iterator

스프레드 문법의 결과물을 값으로 사용할 수 없고, 쉼표로 구분된 값의 목록이 필요한 문맥에서만 사용할 수 있다.

함수 호출문의 인수 목록
배열 리터럴의 요소 목록
객체 리터럴의 프로퍼티 목록

Rest 파라미터 / Spread 문법 비교

Rest 파라미터
Rest 파라미터는 함수의 파라미터 선언에서 사용되는 문법이다. Rest 파라미터는 함수에 전달된 아규먼트들을 배열로 나타낸다

이 배열은 함수 내에서 배열로 처리할 수 있으며, 함수 호출 시 전달된 인수의 개수와 상관없이 모든 아규먼트를 배열로 받을 수 있다. Rest 파라미터는 함수 정의에서 마지막 파라미터로만 사용할 수 있으며, 매개변수 이름 앞에 세 개의 점(...)을 붙여서 표현한다.

function myFunction(...args) {
  console.log(args);
}

myFunction(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

Spread 문법
Spread 문법은 배열이나 객체를 펼쳐서 개별 요소로 확장하는 문법이다. Spread 문법은 배열 또는 객체 앞에 세 개의 점(...)을 붙여서 사용한다. 배열을 Spread 문법으로 확장하면 개별 요소가 된다.

const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];

console.log(newArr); // [1, 2, 3, 4, 5]

Boseong Choi

Frontend Developer

이전 포스트

27장 배열 ~ 30장 Date

다음 포스트