헷갈리는 메소드 정리: indexOf, includes, split, join 그리고 substring, slice, splice 비교

🙋🏻‍♀️ [문자열] 어떤 값이 있는지 없는지 알고 싶을 때?

두 가지 사용가능한 메소드가 있는데, indexOf 나 lastIndexOf 를 써서 인덱스가 나오는지 아니면 -1 이 나오는지 확인해보거나, includes 를 써서 true 가 나오는지 false 가 나오는지 보면 된다. (이 방법은 배열도 가능)

'brie cheese'.indexOf('cheese') // 5
'brie cheese'.indexOf('Brie') // -1 
'brie cheese'.includes('wine') // false 

// note: includes 는 Internet Explorer 에서 support 되지 않는다 (as of October 2020) 

🙋🏻‍♀️ [문자열] CSV 파일 등을 변환하고 싶을 때? 아니면 문자열을 배열로 쪼개고 싶을 때?

CSV 파일은 Comma-Separated Values 의 약자로, 쉼표로 연결된 텍스트 파일이다. 엑셀 자료 등을 다룰 때 종종 등장. split 메소드를 쓰는데, 줄바꿈(\n) 과 쉼표(,)로 텍스트를 쪼개어 배열로 리턴함으로써 자료를 적절히 다룰 수 있다. (cf. 탭문자(\t), Carriage return(\r\n)) 메소드 split 은 join 과 합쳐서도 자주 쓴다.

const csv = `Year,Model
1997,E350
2000,Cougar`; 
const csvSplit = csv.split('\n'); // ["Year,Model", "1997,E350", "2000,Cougar"]

const feeling = "It's a beautiful day!"; 
feeling.split(" ").join("-"); // "It's-a-beautiful-day!"

// 간단한 문장의 단어를 replace 하는 것도 가능하다. 
// fullStr.split(oldStr).join(newStr)
'pink note book'.split('pink').join('blue'); // "blue note book"

// 만약 split 메소드에 두 번째 인자(숫자)를 넣을 경우, 그 갯수만큼만 반환한다. 
string.split(separator, limit);
feeling.split(" ", 3); //  ["It's", "a", "beautiful"]

🙋🏻‍♀️ [배열] slice VS splice: 원본을 변형시키는가

slice 는 배열을 복사할 때 사용한다. 원본을 변형시키지 않고, 새로운 배열을 반환한다. (얕은 복사)

// from 인덱스부터 until 인덱스 전까지가 복사된다. 
// 두 번째 인자를 생략하면 from 부터 전체 복사
array.slice(from, until);

arr.slice(0) // 이렇게 배열 전체 복사에 흔히 쓰인다. 

splice 는 요소를 추가/삭제함으로써 원본을 변형시킨다.

// 두 번째 인자는 삭제하기를 원하는 요소의 갯수 (생략할 경우, index 뒷부분이 전부 삭제)
// 세 번째 인자부터는 추가하고 싶은 요소 (생략가능)
array.splice(index, number of elements, element, element);

let greeting = ["hello", "world"]
greeting.splice(1, 0, "beautiful")
console.log(greeting) // ["hello", "beautiful", "world"]

정리하면 아래와 같다.

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

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

🙋🏻‍♀️ [문자열] substring VS slice

문자열의 일부를 복사해온다는 점에서 같지만, 음수를 처리하는 방식에서 다르다. substring 은 NaN, 음수를 0으로 처리한다. 그리고 앞에 인덱스가 크면 알아서 뒤에 인덱스하고 자리를 바꿔서 처리한다. slice 는 NaN은 0으로 처리하지만, 음수는 뒤에서부터 세서 값을 반환한다.

const dance = "when it rains"; 

dance.substring(-3, 4) // "when" 
dance.substring(4, 0) // "when" 
dance.slice(4, 0) // "" 
dance.slice() // "when it rains" 
dance.slice(5) // "it rains" 

slice 음수처리는 예제를 보면서 연습해보면서 하기 👉🏼 read more

[ 참고자료 ]

• https://www.freecodecamp.org/news/lets-clear-up-the-confusion-around-the-slice-splice-split-methods-in-javascript-8ba3266c29ae/
• https://stackoverflow.com/questions/37601282/javascript-array-splice-vs-slice