Jae Front-end Study

정규 표현식 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다.

https://regexr.com/

위의 링크에서 정규 표현식을 테스트할 수 있다.

• *

문자 또는 숫자가 0개 이상이다.

• +

문자 또는 숫자가 1개 이상이다.

• ^

문자열 또는 줄의 시작을 지정한다.

^[0]은 0으로 시작하는 문자열과 일치한다.

• $

문자열 또는 줄의 끝을 지정한다.

[0]$은 0으로 끝나는 문자열과 일치한다.

• [...]

대괄호는 대괄호 안의 문자와 일치한다.

예를 들어, [a-z]는 a부터 z 사이의 소문자와 일치한다.

• {...}

중괄호는 반복을 나타낸다.

[a]{2}는 2개의 a가 있는 문자와 일치하고, [0-9]{2, 5}는 2~5개의 숫자를 가진 문자와 일치한다.

영어 소문자만 가능

ex) abc..

/^[a-z]+$/g

영어 대문자만 가능

ex) ABC..

/^[A-Z]+$/g

영문만 가능

ex) abcABC..

/^[a-zA-Z]+$/g

한글만 가능

ex) 가나다..

/^[가-힣]+$/g

숫자만 가능

ex) 123..

/^[0-9]+$/g

주민번호

ex) 230101-1010101..

/^\d{6}-[1|2|3|4]{1}\d{6}$/g
또는
/^[0-9]{6}-[1|2|3|4]{1}[0-9]{6}$/g

전화번호

ex) 021234567, 01012345678..

/^[0-9]{9,11}/g

- 전화번호

ex) 02-123-1234, 010-1234-5678..

/^\d{2,3}-\d{3,4}-\d{4}$/g
또는
/^[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}$/g

이메일

ex) test123@test.com..

/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/g
또는
/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.(com|net|kr)$/g

특수문자

/^[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]+$/g

• var

var 변수는 재선언(중복선언)되고, 재할당(업데이트) 된다.

// 재선언
var apple = 'apple'
apple // 'apple'

var apple = 'banana'
apple // 'banana'

// 재할당
var apple = 'apple'
apple = 'banana'
    
apple // banana

var 변수는 전역 범위 또는 함수 범위로 지정된다. (함수 레벨 스코프)

즉, 함수 밖에서 var를 사용하여 선언된 변수는 전체 윈도우에서 사용할 수 있고, 함수 안에서 선언된 변수는 함수 내에서만 사용 가능하다.

function callName(){
    var name = 'heejae'
    
    if(name === 'heejae') {
        var name = 'leeheejae'
        var nickname = 'jae'
        
        console.log(name, nickname) // leeheejae, jae
    }
    
    console.log(name, nickname) // leeheejae, jae
}

console.log(name) // ReferenceError: name is not defined
console.log(nickname) // ReferenceError: nickname is not defined

문제점

코드가 많아질 경우, 같은 변수를 중복해서 사용할 수 있고, 예상치 못하게 변수가 재선언 또는 재할당 되어 많은 버그를 발생시킬 수 있다.

• let

let 변수는 재할당은 가능하지만, 재선언은 불가능하다.

// 재할당
let apple = 'apple'
apple = 'banana'
    
apple // banana

// 재선언
let apple = 'apple'
let apple = 'banana'
    
apple // SyntaxError: Identifier 'apple' has already been declared

let 변수는 코드 블록({}, 중괄호) 내부에서만 유효하다. (블록 레벨 스코프)

function callName(){
    let name = 'heejae'
    
    if(name === 'heejae') {
        let name = 'leeheejae'
        let nickname = 'jae'
        
        console.log(name, nickname) // leeheejae, jae
    }
    
    console.log(name) // heejae
    console.log(nickname) // ReferenceError: nickname is not defined
}

• const

const 변수는 재선언, 재할당 모두 불가능하다.

// 재선언
const apple = 'apple'
const apple = 'banana'
    
apple // SyntaxError: Identifier 'apple' has already been declared

// 재할당
const apple = 'apple'
apple = 'banana'
    
apple // TypeError: Assignment to constant variable.

const 변수는 let 변수와 마찬가지로, 코드 블록({}, 중괄호) 내부에서만 유효하다. (블록 레벨 스코프)

function callName(){
    const name = 'heejae'
    
    if(name === 'heejae') {
        const name = 'leeheejae'
        const nickname = 'jae'
        
        console.log(name, nickname) // leeheejae, jae
    }
    
    console.log(name) // heejae
    console.log(nickname) // ReferenceError: nickname is not defined
}

결론

var 변수는 사용하지 말 것

재할당이 필요할 경우 let 변수를 사용하되, 변수의 스코프를 최대한 좁게 만들기

재할당이 필요없는 상수나 객체에는 const를 사용하기

• for문 + indexOf()

중복값의 인덱스 번호를 duplication 배열에 담는다.

const arr = ['a', 'b', 'c', 'c', 'd', 'e', 'a', 'a']
const duplication = []

for(let i = 0; i < arr.length; i++) {
    if(arr.indexOf(arr[i]) !== i) {
        duplication.push(i)
    }
}

duplication // [3, 6, 7]

• filter() + indexOf()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소들을 모아 새로운 배열로 반환한다.

indexOf() 메서드는 호출한 string 객체에서 주어진 값과 일치하는 첫번째 인덱스를 반환한다.

const arr = ['a', 'b', 'c', 'c', 'd', 'e', 'a']
arr.filter((item, index) => arr.indexOf(item) !== index) // ['c', 'a']

• 전개연산자 + new Set()

전개 연산자를 사용하면 배열이나 문자열 같이 반복 가능한 0개 이상의 인수 또는 요소를 확장하여, 0개 이상의 키-값 쌍으로 객체를 확장시킬 수 있다.

Set 객체는 자료형에 관계 없이 원시값(string, number, bollean, undefined, null 등..)과 객체 참조 모두 유일한 값을 저장할 수 있다.

= 중복된 값이 있으면 1개만 남긴다. (중복 혀용 X)

const arr = ['a', 'b', 'c', 'c', 'd', 'e']
[...new Set(arr)] // ['a', 'b', 'c', 'd', 'e']

• Array.from() + new Set()

Array.from() 메서드는 유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운 배열을 만든다.

const arr = ['a', 'b', 'c', 'c', 'd', 'e']
Array.from(new Set(arr)) // ['a', 'b', 'c', 'd', 'e']

• filter() + indexOf()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소들을 모아 새로운 배열로 반환한다.

indexOf() 메서드는 호출한 string 객체에서 주어진 값과 일치하는 첫번째 인덱스를 반환한다.

const arr = ['a', 'b', 'c', 'c', 'd', 'e']
arr.filter((item, index) => arr.indexOf(item) === index) // ['a', 'b', 'c', 'd', 'e']

sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따른다.

• sort()

sort()만 사용할 경우 유니코드 순서에 따라서 오름차순으로 정렬되기 때문에 아래와 같은 결과가 출력된다.

const str = ['dog', 'Cat', 'apple', 'car', 'Banana', 'eye']
const num = [10, 7, 1280, 720, 456, 123]

str.sort() // [ 'Banana', 'Cat', 'apple', 'car', 'dog', 'eye' ]
num.sort() // [ 10, 123, 1280, 456, 7, 720 ]

• sort() 숫자 오름차순

const num = [10, 7, 1280, 720, 456, 123]

num.sort((a, b) => a - b) // [ 7, 10, 123, 456, 720, 1280 ]

• sort() 숫자 내림차순

const num = [10, 7, 1280, 720, 456, 123]

num.sort((a, b) => b - a) // [ 1280, 720, 456, 123, 10, 7 ]

• sort() 문자열 오름차순

영어 대문자, 소문자가 섞여있을 경우, 대문자가 소문자보다 앞에 오도록 정렬된다.

숫자 > 영어 대문자 > 영어 소문자 > 한글

const str1 = ['dog', 'Cat', 'apple', 'car', 'Banana', 'eye']
const str2 = ['강아지', '고양이', '사과', '자동차', '바나나', '눈']
const str3 = ['dog', '고양이', '사과', '자동차', 'Banana', '눈', '100종원']

str1.sort((a, b) => a > b ? 1 : -1) // [ 'Banana', 'Cat', 'apple', 'car', 'dog', 'eye' ]
str2.sort((a, b) => a > b ? 1 : -1) // [ '강아지', '고양이', '눈', '바나나', '사과', '자동차' ]
str3.sort((a, b) => a > b ? 1 : -1) // ['100종원', 'Banana', 'dog', '고양이', '눈', '사과', '자동차']

• sort() 문자열 내림차순

영어 대문자, 소문자가 섞여있을 경우, 대문자가 소문자보다 뒤에 오도록 정렬된다.

한글 > 영어 소문자 > 영어 대문자 > 숫자

const str1 = ['dog', 'Cat', 'apple', 'car', 'Banana', 'eye']
const str2 = ['강아지', '고양이', '사과', '자동차', '바나나', '눈']
const str3 = ['dog', '고양이', '사과', '자동차', 'Banana', '눈', '100종원']

str1.sort((a, b) => a > b ? -1 : 1) // [ 'eye', 'dog', 'car', 'apple', 'Cat', 'Banana' ]
str2.sort((a, b) => a > b ? -1 : 1) // [ '자동차', '사과', '바나나', '눈', '고양이', '강아지' ]
str3.sort((a, b) => a > b ? -1 : 1) // ['자동차', '사과', '눈', '고양이', 'dog', 'Banana', '100종원']

• sort() 대소문자 구분없이 오름차순

대소문자 구분 없이 정렬해주는 함수는 없기 때문에 toLowerCawe() 또는 toUpperCase() 메서드를 사용해서 소문자 또는 대문자로 변경한 후 비교해 정렬한다.

const str = ['dog', 'Cat', 'apple', 'car', 'Banana', 'eye']

str1.sort((a, b) => {
    const upperCaseA = a.toUpperCase()
    const upperCaseB = b.toUpperCase()

    if(upperCaseA > upperCaseB) return 1
    if(upperCaseA < upperCaseB) return -1
    if(upperCaseA === upperCaseB) return 0
})

// [ 'apple', 'Banana', 'car', 'Cat', 'dog', 'eye' ]

• sort() 대소문자 구분없이 내림차순

const str = ['dog', 'Cat', 'apple', 'car', 'Banana', 'eye']

str.sort((a, b) => {
    const upperCaseA = a.toUpperCase()
    const upperCaseB = b.toUpperCase()

    if(upperCaseA > upperCaseB) return -1
    if(upperCaseA < upperCaseB) return 1
    if(upperCaseA === upperCaseB) return 0
})

// [ 'eye', 'dog', 'Cat', 'car', 'Banana', 'apple' ]

문자열(String)을 배열로 만들기

• 전개 연산자(Spread Operator)

전개 연산자를 사용하면 배열이나 문자열 같이 반복 가능한 0개 이상의 인수 또는 요소로 확장하여, 0개 이상의 키-값 쌍으로 객체를 확장시킬 수 있다.

const str = 'abc'
const arrStr = [...str]

arrStr // ['a', 'b', 'c']

• split()

split() 메서드는 string 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눈다.

const str = 'abc'
const arrStr = str.split('')

arrStr //  ['a', 'b', 'c']

• Array.from()

Array.from() 메서드는 유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운 배열을 만든다.

Array.from('abc') // ['a', 'b', 'c']

숫자(Number)을 배열로 만들기

map, split 등의 메소드들이 문자열에서만 사용이 가능하기 때문에 타입을 문자열로 바꾼 후, 다시 숫자로 바꿔준다.

• String() + Number() + map()

String() 함수를 사용하여 다른 타입의 값을 문자열로 바꿀 수 있다.

Number() 함수를 사용하여 다른 타입의 값을 숫자로 바꿀 수 있다.

map() 메서드는 배열 내의 모든 요소에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열로 반환한다.

const num = 123
const arrNum = [...String(num)].map(Number)

arrNum // [1, 2, 3]

• toString() + map()

toString() 메서드는 문자열을 반환한다.

const num = 123
const arrNum = num.toString().split('').map(Number)

arrNum // [1, 2, 3]

• 문자열 더하기 + Array.from()

숫자에 문자를 더하면 타입이 문자열로 바뀐다.

const num = 123
const arrNum = (num + '').split('')

Array.from(arrNum, Number) // [1, 2, 3]

• 소수점 자리수 올림

Math.ceil() 메서드는 주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자를 반환한다.

Math.ceil(1.2) // 2
Math.ceil(1.8) // 2

Math.ceil(-1.2) // -1
Math.ceil(-1.8) // -1

• 소수점 자리수 내림

Math.floor() 메서드는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환한다.

Math.floor(1.2) // 1
Math.floor(1.8) // 1

Math.floor(-1.2) // -2
Math.floor(-1.8) // -2

• 소수점 자리수 반올림

Math.round() 메서드는 입력값을 반올림한 수와 가장 가까운 정수 값을 반환한다.

Math.round(1.2) // 1
Math.round(1.5) // 2
Math.round(1.8) // 2

Math.round(-1.2) // -1
Math.round(-1.5) // -1
Math.round(-1.8) // -2

• 소수점 제거

Math.trunc() 메서드는 주어진 값의 소수 부분을 제거하고, 숫자의 정수 부분을 반환한다.

Math.trunc(1.2) // 1
Math.trunc(1.8) // 1

Math.floor() / Math.trunc()의 차이점

Math.floor() 메서드는 수학적 계산을 통해 양수, 음수 내림을 적용하는데

Math.trunc() 메서드는 소수점 이하를 전부 제거해 음수의 경우에도 -10을 반환한다.

Math.floor(5.6789) // 5
Math.trunc(5.6789) // 5

Math.floor(-10.12345) // -11
Math.trunc(-10.12345) // -10

• 소수점 자르기

toFixed() 메서드는 숫자를 고정 소수점 표기법으로 표시한다.

const num1 = 0.1234
const num2 = 5.6789

num1.toFixed(1) // '0.1'
num2.toFixed(2) // '5.68'

• 특정 자리수에서 올림

const number = 1.2345

const temp1 = number * 100 // 123.45
const temp2 = Math.ceil(temp1) // 124

const result = temp2 / 100 // 1.24

• 특정 자리수에서 내림

const number = 1.2345

const temp1 = number * 100 // 123.45
const temp2 = Math.floor(temp1) // 123

const result = temp2 / 100 // 1.23

Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체이다. 함수 객체가 아니고, Number 자료형만 지원한다.

• Math.abs(x)

숫자의 절대값을 반환한다.

• Math.ceil(x)

수보다 크거나 같은 수 중에서 가장 작은 정수를 반환한다. (소수점 올림)

• Math.floor(x)

인수보다 작거나 같은 수 중에서 가장 큰 정수를 반환한다. (소수점 내림)

• Math.round(x)

숫자에서 가장 가까운 정수를 반환한다. (소수점 반올림)

• Math.trunc(x)

소수 자리수를 제거하여 숫자의 정수 부분을 반환한다.

• Math.min([x, ...])

0개 이상의 인수에서 제일 작은 수를 반환한다.

• Math.max([x, ...])

0개 이상의 인수에서 제일 큰 수를 반환한다.

• Math.random()

0과 1 사이의 난수를 반환한다.