JS공식문서 읽기 스터디 6일차 ) 다양한 데이터 타입과 처리방법

김핌피·2025년 9월 8일

6일차 레츠고!

JavaScript는 동적 타입 언어라 변수에 어떤 타입이든 들어갈 수 있으므로, 타입을 명확히 이해하고 처리 방법을 알아야 예기치 않은 동작을 막고 안정적인 로직을 설계할 수 있다.

정규표현식

정규 표현식 생성하기

정규표현식?

문자열에서 문자 조합을 찾기 위해 사용되는 패턴
ex) 유효성검사

const passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
console.log(passwordPattern.test("Passw0rd!")); // true
console.log(passwordPattern.test("password"));  // false

JavaScript에서 정규 표현식은 객체임
사용되는 메서드
(1) RegExp 객체: exec(), test() // 정규 표현식을 다루는 내장 객체. , 패턴 검색·매칭·치환 등을 지원함
(2) String 객체: match(), matchAll(), replace(), replaceAll(), search(), split()

// 1) RegExp 객체 메서드
// - exec(): 매칭된 결과를 배열로 반환 (없으면 null)
// - test(): 문자열에 패턴이 있는지만 true/false로 반환
//   예시: const re = /abc/; re.test("abcdef"); // true

// 2) String 객체 메서드 (정규 표현식을 인자로 활용)
// - match(): 패턴 매칭 결과 반환
// - matchAll(): 전체 매칭 결과(이터레이터) 반환
// - replace(): 패턴에 매칭되는 문자열을 다른 문자열로 교체
// - replaceAll(): 모든 매칭 항목 교체
// - search(): 매칭되는 패턴의 시작 인덱스 반환
// - split(): 패턴 기준으로 문자열 분할

정규 표현식 패턴 작성하기

정규 표현식 패턴은 /abc/ 와 같은 리터럴 문자 또는 /ab*c/, /Chapter (\d+).\d*/ 와 같이 리터럴과 메타문자의 조합으로 구성될 수 있다.

/Chapter (\d+)\.\d*/ -> 그룹화된 (\d+)는 캡처그룹이라 불리며 역참조를 통해 재사용가능함
console.log("Chapter 12.3".match(re)[1]); // "12"
console.log("Chapter 99.1234".match(re)[1]); // "99"

// 역참조(backreference)
console.log(/(\d+)-\1/.test("123-123")); // true
console.log(/(\d+)-\1/.test("123-456")); // false

단순 패턴 사용 (Using simple patterns)
단순 패턴은 직접적으로 일치시키고자 하는 문자들로 구성됨.

const Girl_friend = /jaykxo/;

console.log(Girl_friend.test("my jungle girlfriend jaykxo")); // true

{
  let girlFriend = /jaykxo/;
  console.log(girlFriend.test("my jungle girlfriend jaykkxo")); // false
}

특수 문자 사용 (Using special characters)
직접 일치 이상의 검색이 필요할 때 사용.
ex) “하나 이상의 문자 찾기” 또는 “공백 찾기” 같은 경우.

케이스

크게 문자 클래스, 단언식(문자열의 시작과 끝)/경계 조건( 단어 사이의 경계), 그룹과 역참조, 수량자(반복횟수 지정) 으로 나뉨.

JavaScript에서 정규 표현식 사용하기

정규 표현식 실행 결과로 얻어지는 것들

객체(Object)	속성(Property) 또는 인덱스(Index)	설명(Description)	예시(In this example)
myArray	–	매칭된 문자열과 모든 캡처(기억된) 하위 문자열	`['dbbd', 'bb', index: 1, input: 'cdbbdbsbz']`
index	–	입력 문자열에서 매치가 시작된 0 기반 인덱스	`1`
input	–	원본 입력 문자열	`'cdbbdbsbz'`
[0]	–	마지막으로 매칭된 전체 문자열	`'dbbd'`
myRe	`lastIndex`	다음 매치를 시작할 인덱스 위치. (정규 표현식이 `g` 옵션을 사용할 때만 설정됨)	`5`
source	–	패턴의 텍스트. 정규 표현식이 실행될 때가 아니라 생성될 때 갱신됨	`'d(b+)d'`

플래그를 활용한 고급 검색 (Advanced searching with flags)

선택적으로 사용할 수 있는 플래그들

플래그	설명	대응되는 속성 (Corresponding property)
d	부분 문자열 매칭에 대한 인덱스를 생성	`hasIndices`
g	전역 검색 (global search)	`global`
i	대소문자 구분하지 않음	`ignoreCase`
m	`^`와 `$`가 문자열 전체가 아닌 각 줄의 시작과 끝에 매칭되도록 함	`multiline`
s	`.`이 줄바꿈 문자까지 매칭할 수 있게 함	`dotAll`
u	유니코드 모드; 패턴을 유니코드 코드포인트 시퀀스로 처리	`unicode`
v	`u` 모드의 확장판으로, 더 많은 유니코드 기능 지원	`unicodeSets`
y	"sticky" 검색; 대상 문자열의 현재 위치에서만 매칭 수행	`sticky`

index 기반의 컬렉션

인덱스 값으로 순서가 정해지는 데이터 컬렉션에 대해 다루고자함.
js에서는 미리 정의된 Array 객체와 그 메서드를 통해 배열을 다룰 수 있음.

// 배열은 순서가 있는 값들의 리스트이며, 이름과 인덱스를 통해 각 값을 참조함.
emp[0], emp[1] // 직원 번호에 따라 이름을 저장/조회

(1) js는 배열 합치기(join), 뒤집기(reverse), 정렬(sort) 등 다양한 조작 메서드를 제공함. length 속성을 통해 배열의 길이를 확인 할 수 있도록 함.
(2) 정규 표현식 관련 속성은 Array가 아닌 RegExp 객체에서 제공되며, 정규 표현식을 다루는 데 유용하다.

배열 생성하기

// 아래 구문들은 모두 동일한 배열을 생성함.

const arr1 = new Array(1, 2, 3);
const arr2 = Array(1, 2, 3);
const arr3 = [1, 2, 3]; // 배열 리터럴(array literal) 또는 **배열 이니셜라이저(array initializer)**라고 하며, 다른 방식보다 짧고 직관적이므로 일반적으로 권장됨.

배열 요소 참조하기

arrayLength가 반드시 Number 타입일때,
요소가 없는 특정 길이의 배열을 만들 수 있음.
!) 이 경우 arr.length는 arrayLength로 설정되지만 실제 요소는 비어있으며, for...in 루프에서도 탐색되지 않음.

// 아래 구문들은 모두 동일한 배열을 생성함.

const arr1 = new Array(arrayLength);
const arr2 = Array(arrayLength);
const arr3 = [];
arr3.length = arrayLength;

배열 채우기

배열은 단독 변수 뿐만 아니라 객체의 프로퍼티(객체의 속성, 즉 데이터나 상태를 나타내는 값) 로도 할당 가능함.

const obj = {};
obj.prop = [element0, element1, /* …, */ elementN];

// 또는
const obj = { prop: [element0, element1, /* …, */ elementN] };

배열 변환

배열의 요소를 바꾸거나 새 요소로 가공할 수 있음

const numbers = [1, 2, 3, 4, 5];

// 1) map → 각 요소를 제곱한 새 배열 생성
const squared = numbers.map(n => n * n);
console.log(squared); // [1, 4, 9, 16, 25]

// 2) filter → 짝수만 추출
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

// 3) reduce → 합계 계산
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15

// 4) sort → 내림차순 정렬
const sorted = [...numbers].sort((a, b) => b - a);
console.log(sorted); // [5, 4, 3, 2, 1]

// 5) join → 문자열로 합치기
const joined = numbers.join("-");
console.log(joined); // "1-2-3-4-5"

희소 배열

인덱스는 있지만 값이 비어 있는 배열.

const arr = [];
arr[5] = "a"; // 인덱스 0~4는 비어 있음

예기치 못한 동작 가능성 있음. 아래는 방지 방법

펼쳐보기

0) 희소 배열 만들지 않기 (원천 봉쇄)

// 잘못된 예: 홀 발생
const arr1 = Array(5); 
console.log(arr1); // [ <5 empty items> ]

// 올바른 예: 밀집 배열 생성
const arr2 = Array.from({ length: 5 }, (_, i) => i);
console.log(arr2); // [0, 1, 2, 3, 4]

const arr3 = new Array(5).fill(0);
console.log(arr3); // [0, 0, 0, 0, 0]

1) 요소 삭제 시 `delete` 금지 → `splice` 사용

const a = [1, 2, 3];

delete a[1];
console.log(a); // [1, <1 empty item>, 3] (홀 발생)

a.splice(1, 1);
console.log(a); // [1, 3] (안전)

2) 순회 메서드의 “홀 스킵” 특성 이해

const arr = [1, , 3]; // 희소 배열

arr.forEach(x => console.log(x)); 
// 1, 3만 출력됨 (홀은 스킵)

for (let i = 0; i < arr.length; i++) {
  if (i in arr) console.log(arr[i]); 
}
// 1, 3 (홀 체크 가능)

const dense = Array.from(arr);
console.log(dense); // [1, undefined, 3] (밀집화)

3) 문자열/직렬화 시의 차이 주의

console.log([, , 1].join());         // ",,1"
console.log([, , 1].toString());     // ",,1"
console.log(JSON.stringify([, , 1])); // "[null,null,1]"

4) 홀을 명시적으로 메우기 (정규화)

const arr = [1, , 3];

const dense1 = Array.from(arr, v => v ?? null);
console.log(dense1); // [1, null, 3]

const dense2 = [...arr];
console.log(dense2); // [1, undefined, 3]

5) 정말 “희소”가 필요하면 Array 대신 Map/객체

// 큰 인덱스 필요 시 Map 권장
const m = new Map();
m.set(10_000_000, "X");
console.log(m.get(10_000_000)); // "X"

6) 존재 여부 체크 패턴

const arr = [1, , 3];

console.log(1 in arr);               // false (홀이라 존재 X)
console.log(arr.hasOwnProperty(1));  // false
console.log(arr[1]);                 // undefined

다차원 배열

배열 안에 또 다른 배열을 넣어 행렬(Matrix) 구조처럼 사용할 수 있음.
2차원 이상도 가능 → arr[row][col] 형식으로 접근.

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
];
console.log(matrix[0][1]); // 출력 :  2

배열을 이용 해 다른 속성 저장하기

배열은 사실 객체(Object) → 숫자 인덱스 외에도 커스텀 속성 저장 가능.
다만, 이런 방식은 일반적으로 지양. (배열 고유 메서드) 와 혼동 가능성 있음.
속성 저장이 필요하다면 객체(Object)나 Map을 사용하는 게 더 적절.

const arr = [1, 2, 3];
arr.name = "iamPimppy";
console.log(arr.name); // "iamPimppy"

김핌피

HAPPY PIMPPY

이전 포스트

JS공식문서 읽기 스터디 5일차 ) 다양한 데이터 타입과 처리방법

다음 포스트

JS공식문서 읽기 스터디 6일차 ) 다양한 데이터 타입과 처리방법

정규표현식

정규 표현식 생성하기

정규표현식?

정규 표현식 패턴 작성하기

JavaScript에서 정규 표현식 사용하기

플래그를 활용한 고급 검색 (Advanced searching with flags)

index 기반의 컬렉션

배열 생성하기

배열 요소 참조하기

배열 채우기

배열 변환

희소 배열

0) 희소 배열 만들지 않기 (원천 봉쇄)

1) 요소 삭제 시 `delete` 금지 → `splice` 사용

2) 순회 메서드의 “홀 스킵” 특성 이해

3) 문자열/직렬화 시의 차이 주의

4) 홀을 명시적으로 메우기 (정규화)

5) 정말 “희소”가 필요하면 Array 대신 Map/객체

6) 존재 여부 체크 패턴

다차원 배열

배열을 이용 해 다른 속성 저장하기

JS공식문서 읽기 스터디 5일차 ) 다양한 데이터 타입과 처리방법

JS공식문서 읽기 스터디 7일차 ) 객체지향과 고급개념 (1)

0개의 댓글

JS공식문서 읽기 스터디 6일차 ) 다양한 데이터 타입과 처리방법

정규표현식

정규 표현식 생성하기

정규표현식?

정규 표현식 패턴 작성하기

JavaScript에서 정규 표현식 사용하기

플래그를 활용한 고급 검색 (Advanced searching with flags)

index 기반의 컬렉션

배열 생성하기

배열 요소 참조하기

배열 채우기

배열 변환

희소 배열

0) 희소 배열 만들지 않기 (원천 봉쇄)

1) 요소 삭제 시 delete 금지 → splice 사용

2) 순회 메서드의 “홀 스킵” 특성 이해

3) 문자열/직렬화 시의 차이 주의

4) 홀을 명시적으로 메우기 (정규화)

5) 정말 “희소”가 필요하면 Array 대신 Map/객체

6) 존재 여부 체크 패턴

다차원 배열

배열을 이용 해 다른 속성 저장하기

JS공식문서 읽기 스터디 5일차 ) 다양한 데이터 타입과 처리방법

JS공식문서 읽기 스터디 7일차 ) 객체지향과 고급개념 (1)

0개의 댓글

1) 요소 삭제 시 `delete` 금지 → `splice` 사용