자바스크립트 익숙해지기 #5

자바스크립트에서 문자열과 배열을 활용하는 다양한 메서드에 대해 알아보자.

원시 유형과 객체

이제까지 단순히 값만 가지고 있는 것을 원시유형이라고 불렀다. 그리고 키:값형태로 속성과 메서드를 가진 것을 객체라고 하였다. 그런데 자바스크립트에서는 원시 유형도 속성과 메서드를 사용할 수 있다. 자바스크립트에서 number, boolean, string 유형은 별도로 프로토타입 객체가 만들어져 있다. number는 Number 객체, string은 String과 같이 말이다. 이러한 객체를 래퍼 객체(wrapper object)라고 한다. 래퍼 객체를 가지는 원시 유형은 속성이나 메서드를 사용하면 일시적으로 객체로 변환되고 힙 메모리에 올라간다.  그리고 사용이 끝나면 다시 메모리 상에서 내려가며 원시 유형으로 되돌아오는데, 이를 오토박싱(autoboxing)이라고 한다.

문자열에 접근하기

자바스크립트가 에크마스크립트 2015로 오면서 생긴 다양한 문자열 함수에 대해 알아보자.

문자열 길이

문자열의 길이를 알고 싶다면 length 속성을 사용하면 된다.

let str = "Hello, World!";
str.length // 13

문자열 인덱스

문자열의 인덱스를 통해 특정 문자열에 접근할 수 있다.

// 인덱스로 문자열 찾기

let str1 = "Hello, world!";

str1.charAt(3) // l
str1[5] // ,

// 문자열로 인덱스 찾기

let str2 = "Hello, world! world!"

first = str.indexOf("world") // 7
str.indexOf("world", first+1) // 14. 뒤에 위치를 입력해주면 해당 위치부터 검색

특정 문자열 포함여부 확인

문자열이 특정 문자열로 시작하는지 혹은 끝나는지, 그리고 포함하는지를 알 수 있다.

// 특정 문자열로 시작하는가

let str = "Hello, world!";

str.startsWith("Hello") // true
str.startsWith("world") // false

// 특정 문자열로 끝나는가

str.endsWith("Hello") // false
str.endsWith("world!") // true

// 특정 문자열을 포함하는가

str.includes("Hello") // true
str.includes("world") // true
str.includes("Bye") // false

문자열 공백 제거

문자열의 앞, 뒤 혹은 양옆의 공백을 제거할 수 있다.

let str = " ab cd ef ";

str.trim() // 'ab cd ef'
str.trimStart() // 'ab cd ef '
str.trimEnd() // ' ab cd ef'

문자열 대소문자 바꾸기

영문자로된 문자열의 경우 모두 대문자 혹은 소문자로 변경할 수 있다.

let str = "Hello, world!";

str.toUpperCase() // "HELLO, WORLD!"
str.toLowerCase() // "hello, world!"

부분 문자열 추출

문자열의 인덱스 시작 위치, 끝 위치로 문자열을 추출할 수 있다.

let str = "Hello, world!"

str.substring(7) // "world!"
str.substring(2, 5) // "llo,"

str.slice(7) // "world!"
str.slice(2, 5) // "llo,"

정규 표현식

정규 표현식은 특정 패턴을 사용하여 문자열을 표현하는 언어이다. 보통 긴 문자열에서 이메일, 전화번호 등 특정한 패턴을 가지고 있는 문자열을 추출하거나 이를 넘어 치환하는데 많이 활용된다. 정규 표현식을 만들 때는 RegExp 객체를 사용하거나 간단한 표현식으로 만들 수 있다.

let regexp = /\d{3}/; // 표현식을 이용한 정규 표현식 작성
let regexp = new RegExp(/\d{3}/) // 객체를 이용한 정규 표현식 작성

정규 표현식 메서드

정규 표현식에서 활용하는 몇 가지 메서드를 알아보자.

let str = "Hello, world!";
let regexp = /Hello/

regexp.text(str) // true. 정규 표현식에 일치하는 부분 문자열이 있으면 true, 없으면 false
str.match(regexp) // 0. 문자열에서 정규 표현식에 일치하는 부분을 찾는다
str.replace(regexp, Bye) // 문자열에서 정규 표현식에 일치하는 부분을 찾아 교체한다

이외에도 정규 표현식과 관련된 많은 기능이 있지만 여기서 생략하고 다음에 다시 다루어보도록 하겠다.

배열 메서드

배열에서 사용할 수 있는 다양한 메서드를 알아보자.

배열 합치기

기존 배열에 또 다른 배열이나 값을 합쳐서 하나의 배열로 만들 수 있다.

// concat() 메서드

let arr1 = [1, 2, 3]
let arr2 = ["a", "b", "c"]

let arr3 = arr1.concat(arr2, "d")
arr3 // [1, 2, 3, "a", "b", "c", "d"]

// 전개 연산자

let arr3 = [...arr1, ...arr2, "d"]
arr3 // [1, 2, 3, "a", "b", "c", "d"]

정렬

기존의 배열을 역순으로 배치할 수 있다. 그리고 오름차순으로 정렬하거나 별도의 정렬함수를 사용하여 커스텀하여 정렬할 수 있다.

let arr = [2, 1, 3, 4, 11, 23];

arr.reverse() // [23, 11, 4, 3, 1, 2]
arr.sort() // [1, 11, 2, 23, 3, 4]. 자바스크립트는 11, 23을 숫자로 보지않고 문자열로 인식한다. 그래서 첫 번째 문자 기준으로 정렬이 된다.
arr.sort(function (a, b) {
  return a - b;
}) // [1, 2, 3, 4, 11, 23]

요소 추가, 삭제

배열의 처음이나 끝 부분에 요소를 추가하거나 삭제할 수 있다.

// pop, push 메서드

let arr = [2, 3, 4]

arr.pop() // 4
arr // [2, 3]

arr.push() // 4
arr // [2, 3, 4]

// shift, unshift 메서드

let arr = [2, 3, 4]

arr.shift()
arr // [3, 4]

arr.unshift(2)
arr // [2, 3, 4]

// splice 메서드

let arr = [1, 2, 3, 4, 5]

arr.splice(2) // [3, 4, 5]
arr // [1, 2]

let arr = [1, 2, 3, 4, 5]

arr.splice(2, 2) // [3, 4]
arr // [1, 2, 5]

let arr = [1, 2, 3, 4, 5]

arr.splice(2, 2, 10) // [3, 4]
arr // [1, 2, 5, 10]

원하는 만큼 추출

slice() 메서드를 이용하여 원하는 인덱스 범위의 배열을 추출할 수 있다.

let arr = [1, 2, 3, 4, 5, 6]

arr.slice(2) // [3, 4, 5, 6]
arr // [1, 2]

let arr = [1, 2, 3, 4, 5, 6]

arr.slice(2, 2) // [3, 4]
arr // [1, 2, 5, 6]