[0422] Javascript 헷갈리는 함수

오늘은 Javascript 문법 강의를 봤다.

변수, 데이터타입부터 조건문, 함수, 배열까지 다양한 기초 문법을 익혔다.
보다가 궁금한 점이 생겨 검색해 본 것들을 정리해보자!

---

✂️ substr vs substring vs slice

문자열을 자르는 방법으로 substr과 slice 함수를 배웠다.

매개변수

	substr	substring	slice
1	start	start	start
2	length	end	end

• start : 잘라낼 문자열의 start 인덱스
• end : 잘라낼 문자열의 end 인덱스
• length : 잘라낼 문자열의 길이

substring vs. slice

하지만 내가 알고 있던 문자열 자르기 함수 substring과 slice 함수의 차이가 궁금했다!
둘은 매개변수가 같았고 다른 점을 찾기 어려웠다.

start > end 인 경우

• substring - start 값과 end 값을 바꾸어서 처리합니다.
• slice - ""을 리턴

const str = '0123456';
str.substring(5, 1); // '1234' = substring(1, 5)
str.slice(5, 1); // ''

index 값이 음수인 경우

• substring - 0으로 취급
• slice - -n일 때, 마지막에서 n번째 index로 취급
  • n이 string의 길이보다 큰 경우, 0으로 취급

const str = '0123456';
str.substring(1, -2); // '0' = substring(1, 0) = substring(0, 1)
str.slice(1, -2); // '1234' = slice(1, 5)
str.slice(1, -13); // '' = slice(1, 0)

참고자료

[Javascript] substr(), substring(), slice() 비교 | hianna | 티스토리

---

🔎 search vs. indexOf

이번엔 또다른 함수 두가지의 차이점을 알아보자!

두 함수 모두 문자열에서 특정 문자열의 인덱스를, 없다면 -1을 반환한다는 공통점이 있다.

매개변수

indexOf(searchElement, fromIndex)
search(searchElement)

두 함수 모두 찾을 문자열인 searchElement가 필요하지만, indexOf는 문자열 검색을 시작할 인덱스인 fromIndex를 받을 수도 있다.

const str = 'HTML,CSS,JavaScript'
str.indexOf(','); // 4
str.indexOf(',', 5); // 8

정규표현식

indexOf는 정규 표현식을 허용하지 않는다

const str = 'aaaaa0aaaaaaaaaaaa'
str.search(/[0-9]/g); // 5
str.indexOf(/[0-9]/g); // -1

🤓 /[0-9]/g 는 숫자를 찾는 정규식입니다

참고 자료

TIL : search VS indexOf | perfumellim | velog
[JavaScript] 문자열 특정 문자 위치 찾기 (indexOf, search) | whales | 티스토리

---

이외에도 Javascript 형변환과 Javascript에서 배열과 객체를 비교하는 방법에 대해 공부하고 정리하였다.