정규표현식

문자열에서 특정 문자 조합을 찾기 위한 패턴
JS에서는 이 정규표현식도 객체로서 exec(), test() 메서드 등이 사용 가능

• 리터럴
  스크립트를 불러올 때 컴파일, 바뀔일이 없는 패턴

const re = /ab+c/;

• RegExp 객체의 생성자 호출
  생성자 함수 상요시 런타임에 컴파일, 바뀔 수 있는 패턴, 사용자 입력 등 외부 출처에서
  가져오는 패턴의 경우 추천

const re = new RegExp("ab+c");

패턴 작성하기

ex. 회원가입시 휴대폰 번호 양식 검사

 // 회원가입 할때 휴대폰번호 양식 검사
// 예를 들어 010-1111-2222 라는 전호번호는
// "숫자3개", "-", "숫자4개", "-", "숫자4개" 로 이루어져 있는데,

const regex = /\d{3}-\d{4}-\d{4}/; 
// (\d는 숫자를 의미하고, {} 안의 숫자는 갯수를 의미한다.) 

regex.test('010-1111-2222') // true; 
regex.test('01-11-22') // false;

ex. 이메일 형식 검사

const regEmail = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i

정규식 메서드

• match
  문자열에서 정규 표현식에 매칭되는 항목들을 배열로 리턴

• replace
  정규 표현식에 매칭되는 항목들을 대체 문자열로 반환

• split
  문자열을 정규표현식에 매칭되는 항목으로 쪼개서 배열로 반환

• test
  정규표현식과 매칭이 되면 true, 아니면 false

• exec
  match메서드와 유사(단 첫번째 매칭 결과만)

// 정규표현식을 담은 변수
const regex = /apple/; // apple 이라는 단어가 있는지 필터링

// "문자열"이 "정규표현식"과 매칭되면 true, 아니면 false반환
regex.test("Hello banana and apple hahahaha"); // true

// "문자열"에서 "정규표현식"에 매칭되는 항목들을 배열로 반환
const txt = "Hello banana and apple hahahaha";
txt.match(regex); // ['apple']

// "정규표현식"에 매칭되는 항목을 "대체문자열"로 변환
txt.replace(regex, "watermelon"); // 'Hello banana and watermelon hahahaha'

정규식 플래그

• i : ignore Case, 대소문자 구분 X
• g : global, 문자내 모든 패턴 검색
• m : multi line , 문자열의 행이 바뀌어도 검색을 계속함
• s : 모든 문자 정규식이 개행문자\n 도 포함
• u : unicode
• y : sticky, 문자 내 특정위치서 검색을 진행하는 sticky 모드

// flags 에 플래그 문자열이 들어간다.
cosnt flags = 'i';
const regex = new RegExp('abapplec', flags);

// 리터럴로 슬래쉬 문자뒤에 바로 표현이 가능
const regex1 = /apple/i; // 대소문자 구분없이 APPLE, apple 찾기
const regex2 = /apple/gm; // 문자 내 행이 바뀌어도 되고, 모든 apple 찾기

정규식 기호 모음

• a-zA-Z : 영어 알파벳
• ㄱ-ㅎ가-힣: 한글 문자
• 0-9 : 숫자
• . : 모든 문자열
• \d: 숫자
• \D : 숫자가 아닌 것
• \w : 밑줄 문자를 포함한 영/숫자/문자( A-Za-z0-9 )
• \s : 스페이스 공백
• \S : 스페이스 공백이 아닌 것

정규식 개수 반복

• ? : 없거나 최대 한개
• • : 없거나 있거나
• • : 최소 한개 or 여러개
• {n} : n개
• {Min, } : 최소 Min 개 이상
• {Min, Max} : Min개 이상 Max 개 이하

인덱스 기반 컬렉션(Array, TypedArray)

JS, 명시적인 배열 데이터 형식을 갖고 있지 않음.
단, 미리 정의된 Array 객체를 사용시 합치기, 뒤집기, 정렬 등 다양한 방법이 가능

배열 생성하기

생성자, 리터럴([]) 등으로 생성 가능

const arr1 = new Array(element0, element1, /* … ,*/ elementN);
const arr2 = Array(element0, element1, /* … ,*/ elementN);
const arr3 = [element0, element1, /* … ,*/ elementN];

배열은 0-based!

const cats = [];
cats[30] = ["Dusty"];
console.log(cats.length); // 31

배열 요소의 반복

• forEach

const colors = ["red", "green", "blue"];
colors.forEach((color) => console.log(color));
// red
// green
// blue

단, forEach 반복문으로 순회시 생략된 요소는 나타나지 않는다.

// 2번 Idx의 요소 생략
const sparseArray = ["first", "second", , "fourth"];

sparseArray.forEach((element) => {
  console.log(element);
});
// Logs:
// first
// second
// fourth

if (sparseArray[2] === undefined) {
  console.log("sparseArray[2] is undefined"); // true
}

const nonsparseArray = ["first", "second", undefined, "fourth"];

nonsparseArray.forEach((element) => {
  console.log(element);
});
// Logs:
// first
// second
// undefined
// fourth

• map
  forEach와 다르게 모든 요소에 대해 콜백함수를 실행하고 이 결과를 담아서 새 배열에 담아 반환한다

const a1 = ["a", "b", "c"];
const a2 = a1.map((item) => item.toUpperCase());
console.log(a2); // ['A', 'B', 'C']

배열의 메서드

• concat() : 두개의 배열 합쳐서 새로운 배열 반환

let myArray = ["1", "2", "3"];
myArray = myArray.concat("a", "b", "c");
// myArray is now ["1", "2", "3", "a", "b", "c"]

• join() : 배열의 모든 요소를 하나의 문자열로 연결하여 반환

const myArray = ["Wind", "Rain", "Fire"];
const list = myArray.join(" - "); // list is "Wind - Rain - Fire"

• push() : 하나 혹은 그 이상의 요소를 배열의 마지막에 추가

const myArray = ["1", "2"];
myArray.push("3"); // myArray is now ["1", "2", "3"]

• pop() : 배열의 마지막 요소를 제거, 그 제거된 요소를 반환

const myArray = ["1", "2", "3"];
const last = myArray.pop();
// myArray is now ["1", "2"], last = "3"

• shift() : 배열의 첫번째 요소 제거, 그 제거된 요소를 반환

const myArray = ["1", "2", "3"];
const first = myArray.shift();
// myArray is now ["2", "3"], first is "1"

• slice() : 배열의 특정 부분을 추출

let myArray = ["a", "b", "c", "d", "e"];
myArray = myArray.slice(1, 4); // [ "b", "c", "d"]
// 인덱스 1에서 시작하여 인덱스 3까지의 모든 요소

• splice() : 배열 자르기, 요소 추가, 요소 제거 모두 가능

const myArray = ["1", "2", "3", "4", "5"];
myArray.splice(1, 3, "a", "b", "c", "d");
// myArray 는 이제 ["1", "a", "b", "c", "d", "5"] 가 됩니다.
// 이 코드는 첫 번째 인덱스("2"값이 있는 곳)에서 시작하여
// 3개의 요소를 삭제한 후 그 자리에 연속된 모든 요소를 모두 삽입합니다.

• flat() : 지정된 깊이 까지 연결된 모든 하위 배열 요소가 포함된 새로운 배열 반환

let myArray = [1, 2, [3, 4]];
myArray = myArray.flat();
// myArray is now [1, 2, 3, 4], since the [3, 4] subarray is flattened

• sort() : 주어진 배열 원본 데이터를 정렬,

arr.sort()
arr.sort((a, b) => a - b)

• reduce : 배열 내 요소를 하나의 요소로 줄이기 위해.. 어려우니 보통 배열의 총 합을 구할때 자주 쓰인다

const a = [10, 20, 30];
const total = a.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  0,
);
console.log(total); // 60

유사 배열 객체(Array-like object)

배열처럼 보이지만 실제 배열은 아닌 객체

{0: "a", 1: "b", 2: "c", length: 3}

1. 숫자형 인덱스를 가진 프로퍼티
2. 배열 메서드를 직접 상속 X => 위에서 봤던 배열 메서드 직접 사용 불가하고 Array.prototype.forEach... 이런 식으로 빌려와야함
3. Array 인스턴스가 아님

Array.isArray(obj) → false

obj instanceof Array → false

예시

• arguments

function test(a, b, c) {
  console.log(arguments); // {0: a, 1: b, 2: c, length: 3}
}

• DOM 메서드 반환 값

const divs = document.querySelectorAll("div"); // NodeList
console.log(divs.length);   // 가능
console.log(divs.map);      // undefined (배열 메서드 없음)

유사배열 -> 배열

const arrLike = {0: "a", 1: "b", 2: "c", length: 3};

Array.from(arrLike); // ["a", "b", "c"]

[...arrLike]; // 전개 연산자도 가능 (단, iterable 일 때만)