[JavaScript] 문자열, 배열 메소드

문자열 메소드

문자열 표현
자바스크립트에서 문자를 표현하는 방법은 '', "", ``이 있다.
html을 표현할 땐 ''을 쓰는게 편하고 영어를 쓸땐 ""을 쓰는게 편하다.

let html = '<div class="title">제목</div>'
let desc = "It's sunny"
let myName = `My name is ${name}.`

또한 ``은 여러줄을 포함할 수 있다.

let desc = `오늘은 맑고 화창한
날씨가 계속 되겠습니다.
내일은 눈소식이 있습니다.`

let desc = '오늘은 맑고 화창한\n날씨가 계속 되겠습니다.'

let desc = '오늘은 맑고 화창한    //error
날씨가 계속 되겠습니다.'

length 문자열 길이
문자열의 길이를 알고싶을때 쓴다. 예를 들면 회원가입시 아이디 또는 비밀번호를 몇자 이상 몇자 이하로 정할때 쓰인다.

let desc = '안녕하세요.'
desc.length  //6

배열과 마찬가지로 문자열도 특정 위치에 접근할 수 있다.

let desc = '안녕하세요.'
desc[2]  //'하'

하지만 배열과 다르게 한글자만 바꾸는건 안된다.

대소문자 바꾸기

toUpperCase()
모든 영문을 대문자로 바꿔준다.

let desc = "I made it!"
desc.toUpperCase()  // "I MADE IT!"

toLowerCase()
모든 영문을 소문자로 바꿔준다.

let desc = "I made it!"
desc.toLowerCase()   // "i made it!"

indexOf(element)

문자를 인수로 받아 몇번째 위치인지(index)를 알려준다.
찾고있는 문자가 없다면 -1을 반환하며 찾는 문자가 여러개라도 첫번째 문자만 반환한다.

let desc = "I made it!"
desc.indexOf('it')  // 7
desc.indexOf('to')  // -1

반대로 역방향으로 찾는 메소드도 있는데 바로 lastIndexOf() 이다.
문자열에서 뿐만아니라 배열에서도 적용된다

if문으로 활용해서 특정 문자가 포함되어있는지 확인해보자.

if(desc.indexOf('I') > -1){
  console.log('I가 포함된 문장입니다.')
}

이 경우 'I'는 0번째 위치하기 때문에 indexOf('I')를 쓰면 0이 반환된다. if문에서 0은 false로 반환되기 때문에 if문을 건너뛰게된다. 그럴땐 true가 나오도록 "> -1"을 넣어주자.

substring(start, end)

첫번째 인자를 시작 인덱스로 두번째 인자를 종료인덱스로 받는다. 첫번째 인자로 전달받은 시작인덱스부터 두번째 인덱스로 전달받은 종료 인덱스까지의 문자를 모두 반환한다. 첫번째 인자가 두번째 인자보다 클경우 두 값이 바뀌어서 동작하고 음수, NaN는 0으로 인식한다.

let desc = "abcdefg"
desc.substring(1, 5)   // "bcde"
desc.substring(5, 1)   // "bcde"

또 두번째 인자가 없는 경우 문자열 끝까지 반환한다. 만일 인수가 문자열의 길이보다 클 경우 인수는 문자열의 길이로 취급된다.

substr(start, length)

첫번째 인자로 시작 인덱스를 받고 두번째 인덱스로 문자 길이를 받는다. 두번째 인자가 없는 경우 undefined를, 0보다 작을경우 빈 문자열을 반환하고 시작 인덱스부터 문자열 끝까지의 길이가 문자열을 넘어설 경우 문자열 끝까지 반환한다.

replace('str', 'newstr')

첫번째 인수로 전달받은 문자열을 두번째 인수로 전달받은 문자열로 대체한다. 이때 원래의 문자열은 변경되지 않고 새로 반영된 문자열을 반환한다.

let str = "abcdefg"
str.replace("bcd", "qwe")   // aqweefg

trim()

문자열의 양쪽 끝에서 공백을 제거하고 새 문자열을 반환한다.
만약 문자열의 앞이나 뒤의 공백만 제거하고 싶다면 trimStart()나 trimEnd()를 사용하면 된다.

const desc = "Hi I'm jihyun"
desc.trim()   //"HiI'mjihyun"

repeat(count)

count에 넣은 수(정수)만큼 문자열을 반복하여 반환한다.

const hello = "hello!"
hello.repeat(3)   // hello!hello!hello!

split()

인자를 받아 그 인자를 기준으로 문자열을 나누어 배열로 반환한다.
이메일의 도메인 부분만 추출해보자.

let email = "jyun9842@gmail.com"
const result1 = email.split("@")
console.log(result)   // ["jyun9842","gmail.com"]

const result2 = email.split("@")[1]
console.log(result2)   // "gmail.com"

const result3 = email.split("@")[1].split(".")[0]
console.log(result3)   // "gmail"

배열 메소드(Array methods)

배열 리터럴

0개 이상의 값을 쉼표로 구분하며 첫번째 값은 인덱스 '0'으로 읽는다. 존재하지 않는 요소에 접근하면 undefined를 반환한다.

slice(start, end)

첫번째 인자로 시작 인덱스를 받고 두번째 인자로 종료 인덱스를 받으며 그 값을 반환한다.

let desc = "abcdefg"
desc.slice(2)     // "cdefg"
desc.slice(0, 5)   // "abcde"
desc.slice(2, -2)  // "cde"

여기서 주의할 점은 시작 인덱스가 가리키는 값은 포함되지만 종료 인덱스가 가리키는 값은 포함되지 않는다. 또한 두번째 인자를 넣지 않으면 마지막 값까지 반환하고 첫번째 인자도 넣지않으면 모든 값을 반환한다.

splice(start, deleteCount, itemN)

splice는 기존 요소를 제거, 변경 또는 새로운 요소를 추가하여 새로운 배열로 반환한다.
첫번째 인자는 시작 인덱스를 받고 두번째 인자는 slice와 다르게 삭제할 요소의 갯수를 의미한다. 또한 그 뒤로도 여러 인자를 받을 수 있는데 이 인자들은 해당 인덱스에 요소로 추가된다.

let arr = [1, 2, 3, 4, 5]
arr.splice(1, 2)
console.log(arr)   // [1, 4, 5]

arr.splice(1, 3, 50, 100)
console.log(arr)   // [1, 50, 100, 5]

만일 아무것도 지우지않고 요소를 추가하고싶다면 deleteCount자리에 0을 넣으면 된다. 시작 인덱스에 1을 넣으면 0과 1사이에, 2를 넣으면 1과 2사이에 요소가 추가된다.

let arr = [1, 2, 5]
arr.splice(0, 0, 3, 4)
console.log(arr)   // [1, 2, 3, 4, 5]

여기서 주의할 점은 arr.splice()자체는 삭제된 요소를 반환한다는 점이다.

let arr = [1, 2, 3, 4, 5]
let spl = arr.splice(1, 2)
console.log(arr)   // [1, 4, 5]
console.log(spl)   // [2, 3]

concat(arr, arr2, ...)

둘 이상의 배열을 병합할때 사용하는 메소드이다. 이 메소드는 기존 배열은 변경하지않고 새 배열을 반환한다.

let arr1 = [1, 2]
let arr2 = [3, 4]
result = arr1.concat(arr2)
console.log(result)   // [1, 2, 3, 4]

forEach(fn)

배열을 반복하는데 쓰인다. 첫번째 인자로 요소를 받고 두번째 인자로 인덱스를 받는다

let arr = ["yun", "jihyun", "jennie"]
arr.forEach((name, index) => {
  console.log(`${index}. ${name}`)
})
// 0. "yun"
// 1. "jihyun"
// 2. "jennie"

화살표함수로 표현한다.
배열에서 반복문을 사용할땐 forEach뿐만아니라 while문, for문, for of도 사용할 수 있다
배열도 객체라 for in문을 사용할 수는 있는데 배열의 요소뿐만 아니라 불필요한 프로퍼티까지 출력될 수 있고 순서도 보장할 수 없어 배열의 반목문으로 사용하기엔 적합하지 않다.
반복문에 관해서는 다른 게시물로 다시한번 자세히 다룰예정이다.

includes()

배열의 요소중 특정 값이 포함되어있는지의 여부를 확인한다. 포함되어 있으면 true를 포함되어있지 않으면 false를 반환한다.

const arr = [1, 2, 3];
arr.includes(2)   // true
arr.includes(5)   // false

find(fn), findIndex(fn)

find()

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5},
];
const result = inventory.find(({ name }) => name === "cherries");

console.log(result);   // { name: 'cherries', quantity: 5 }

조건에 맞는 요소를 찾고 그 요소를 반환한다. 조건에 맞는 요소가 여러개여도 첫번째 요소만 찾으면 종료된다. 해당 값이 없으면 undefined를 반환한다.

findIndex()
조건에 맞는 요소를 찾고 해당 요소의 인덱스를 반환한다. 이 또한 요소가 여러개여도 첫번째 요소만 찾으면 종료된다. 해당 값이 없으면 -1을 반환한다.

filter(fn)

조건에 맞는 모든 요소를 필터링하여 새로운 배열로 반환한다.

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 2},
];
const result = inventory.find(({ quantity }) => quantity === 2);

console.log(result);   
// [
{ name: 'apples', quantity: 2 },
{ name: 'cherries', quantity: 2 }
]

조건에 맞는 요소가 없다면 빈 배열[]로 반환한다.

map(fn)

배열의 모든 요소를 함수의 특정 기능을 시행하고 새로운 배열로 반환한다.

const arr = [1, 3, 5, 6]
const map1 = arr.map(n => n * 2);
console.log(map1)   // [2, 6, 10, 12]

reduce()

배열의 각 요소를 함수로 순서대로 실행하고 이전 요소에 대한 계산값을 전달한다.
reduce((누적 계산값, 현재 값) => { return 계산값 }, 초기 값)으로 볼 수 있는데 만약 초기값이 없다면 배열 인덱스 0의 값이 초기값으로 설정되고 인덱스 1부터 함수가 실행된다.

const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((prev, cur) => {
  return prev + cur
}, 0)
console.log(result)   // 15

이번에는 성인인지 아닌지 구별해서 성인만 새로운 리스트로 만들어 보자.

const userList = [
  {name: "Mike", age: 30},
  {name: "Tom", age: 10},
  {name: "Jane", age: 27},
  {name: "Sue", age: 26},
  {name: "Harry", age: 42},
  {name: "Steve", age: 60},
]
const result = userList.reduce((prev, cur) => {
    if(cur.age > 19){
      prev.puch(cur.name)
    }
    return prev
  }, [])
console.log(result)    // ["Mike", "Jane", "Sue", "Harry", "Steve"]

join()

배열의 모든 요소를 연결하여 새 문자열을 만들어 반환한다.

const arr = ["안녕", "나는", "지현이야"]

const result1 = arr.join()
console.log(result1)   // "안녕,나는,지현이야"

const result2 = arr.join('')
console.log(result2)   // "안녕나는지현이야"

const result2 = arr.join(' ')  //공백이 있는 버전
console.log(result2)   // "안녕 나는 지현이야"

const result3 = arr.join('.')
console.log(result3)   // "안녕.나는.지현이야"

인수에 아무것도 전달하지 않으면 요소사이에 ','로 구분해서 반환하고 ' ' 이런식으로 의도적으로 공백을 전달하면 띄어쓰기로 보이게 된다.

Array.isArray()

배열인지 아닌지를 구분한다. 배열이 맞다면 true를 배열이 아니라면 false를 반환한다.

const user = {
  name: "jihyun",
  age: "20"
}
const userList = ["yun", "jihyun", "jennie"]

console.log(Array.isArray(user))     // false
console.log(Array.isArray(userList))   // true

sort()

배열을 특정 순서로 재정렬 해준다. 단, 배열자체가 변경되니 주의해서 사용해야한다.

let arr = [1, 4, 3, 5, 2]
arr.sort()
console.log(arr)   // [1, 2, 3, 4, 5]

이처럼 숫자를 오름차순으로 잘 정렬된 것을 볼 수 있다. 다음 예제를 보자.

let arr = [5, 24, 15, 6]
arr.sort()
console.log(arr)   // [15, 24, 5, 6]

분명 첫번째 예제처럼 정렬을 했는데 우리가 원하는 [5, 6, 15, 24]가 아닌 [15, 24, 5, 6]가 반환되었다. 왜그럴까? sort는 배열을 문자열로 취급하기 때문에 맨 앞에 숫자만 인식해서 정렬한다 그래서 맨 앞의 숫자인 1과 2만 인식해서 15, 24가 5, 6보다 더 앞으로 정렬되는 것이다.
그렇다면 [5, 6, 15, 24]순으로 정렬 하고 싶다면 어떻게 해야할까?

arr.sort((a, b) => {return a - b})
console.log(arr)   // [5, 6, 15, 24]

이렇게 두 수를 비교할 수 있는 함수를 넣어주면 우리가 원하는 배열로 정렬이 된다.

배열 요소 추가, 제거

이전 자바스크립트 기초글에서 배열의 요소 추가, 삭제에 대한 내용을 다뤘다.
간단히 요약하자면 요소를 맨 뒤에 추가할때는 .push() 앞에 추가할땐 .unshift()를 쓴다.
맨 뒤의 요소를 제거할땐 .pop() 맨 앞의 요소를 추가할땐 .shift()를 사용하면 된다.

let days = ['월', '화', '수']

days.push('목')
console.log(days)   // ['월', '화', '수', '목']

days.unshift('일')
console.log(days)   // ['일', '월', '화', '수', '목']

days.pop()
console.log(days)   // ['일', '월', '화', '수']

days.shift()
console.log(days)   // ['월', '화', '수']