야근시렁

문자열을 다루는 함수들은 실무에서도 많이 사용되고 있습니다. 

알아두면 유효하게 쓸 수 있습니다. 

1. slice 함수

slice 함수는 문자열의 부분 문자열을 추출하여 반환합니다. 

시작 인덱스와 종료 인덱스를 인자로 받아 해당 범위의 문자열을 반환합니다. 

const str = "Hello, world!";
const slicedStr = str.slice(0, 5); // 0번째부터 4번째 글자까지
const slicedStrLast = str.slice(-6); // 마지막부터 5번째 글자까지 
console.log(slicedStr); // "Hello"
console.log(slicedStrLast); // "world!"

2. split 함수

split 함수는 문자열을 특정 구분자를 기준으로 분할하여 배열로 반환합니다.

구분자를 인자로 받아 해당 구분자를 기준으로 문자열을 분할합니다.

const str = "apple,banana,orange";
const fruits = str.split(",");
console.log(fruits); // ["apple", "banana", "orange"]

3. substring 함수

substring 함수는 문자열의 부분 문자열을 추출하여 반환합니다. 

시작 인덱스와 종료 인덱스를 인자로 받아 해당 범위의 문자열을 반환합니다. 

slice와 달리, substring은 음수 인덱스를 사용하지 않고 음수 인텍스가 있는 경우, 0으로 취급해버립니다.

const str = "Hello, world!";
const subStr = str.substring(0, 5);
console.log(subStr); // "Hello"

정리하자면, 

slice와 substring은 새로운 문자열은 반환하고, split은 배열을 반환합니다. 

slice와 substring은 매우 흡사하지만, 

slice의 경우 만약 음수를 사용해서 끝에서 부터 자를 수 있고, 시작 인덱스와 마지막 인덱스의 값이 뒤바뀐 경우 "" 를 리턴하지만, substring의 경우 음수는 사용 불가하지만,  시작 인덱스와 마지막 인덱스의 값이 뒤바뀐 경우 알아서 순서를 바꿔줍니다. 

다음의 코드 예시를 살펴보면 이해하기 더 쉬울 것 같습니다.

const str = "I like chocolate!";

// slice
console.log(str.slice(6, 2));  // "" (빈 문자열 반환)
console.log(str.slice(-10));    // "chocolate!"

// substring
console.log(str.substring(6, 2));  // "like" (인덱스 2와 6 사이의 문자열 반환)
console.log(str.substring(-10));    // "Hello, world!" (음수 인덱스를 0으로 취급)

 1. ForEach 함수

forEach 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하며, 반환값은 없습니다.

 이 메서드는 배열의 각 요소에 대해 특정 작업을 수행하고자 할 때 사용됩니다. 

즉, forEach는 배열을 순회하는 것 외에는 아무런 결과를 반환하지 않는다는 것입니다.

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => console.log(num));
// 1
// 2
// 3
// 4
// 5

2. Map 함수

map 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과를 모아 새로운 배열로 반환합니다. 

이 메서드는 원본 배열을 변경하지 않습니다. 대신 새로운 배열을 반환하기 때문에, 변환된 값을 바탕으로 새로운 배열을 생성할 때 주로 사용됩니다. 그렇기 때문에 가상DOM을  활용하는 React 환경에서 가장 많이 사용되는 함수 중 하나 입니다. 

리액트로 개발을 한다면, 필수로 알아둬야 하는 함수입니다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

3. Filter 함수

filter 메서드는 배열의 각 요소를 테스트하는 함수를 받아, 그 조건에 부합하는 요소만을 모아 새로운 배열로 반환합니다.

map과 마찬가지로 원본 배열은 변경되지 않습니다. 필터링 조건에 맞는 요소만을 추출할 때 사용됩니다.

역시 원본 배열을 변경하지 않고, 새로운 배열을 리턴하기 때문에 리액트에서 많이 사용되는 함수입니다.

특히 배열 데이터 수정이나, 검색조건을 개발할때 무조건 사용하게 될껍니다. 

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]