[자바스크립트 문법] replace( ) , map( ), split( ) 메서드 🧑‍💻

안녕하세요~  이번에는 replace( ) 와 map ( ), split( ) 메서드에 알아보고 각각 메서드가 무슨 역할을 하는지 살펴보겠습니다.  그럼 간단한 목차보면서 오늘의 할일을 살펴보시죠

 

📒 목차
1. replace( ) 메서드
1-1. replace( ) 메서드란?
1-2. replace( ) 메서드 문법
1-3. replace( ) 사용한 예시 코드
2. map( ) 메서드
2-1. map( ) 메서드란?
2-2. map( ) 메서드 문법
2-3. map( ) 사용한  예시 코드
3. split( ) 메서드
3-1. split( ) 메서드란?
3-2. split( ) 메서드 문법
3-3. split( ) 사용한 예시 코드

🧑‍💻 서론 

이번에 알아볼 내용중 replace( ) , map( ), split( ) 메서드들을 들어보셨나요? replace( ), map( ), split( ) 메서드들은 생소하게 느껴질 수도 있습니다. 따라서 이 세 개의 메서드들에 대한 개념과 예시 코드를 작성해보면서 이해하는게 좋은 방법입니다. 저도 메서드들을 자세히 잘 다루지 못하지만 서로 이해하는 시간을 가져볼게요~

 

 📒 본론

1. replace( ) 메서드

1-1. replace( ) 메서드란?

문자열에서 특정 글자를 찾아서 다른 글자로 변경할 때 사용하는 메서드

 

1-2. replace( ) 메서드 문법

replace( ) 메서드는 2가지 인자를 받습니다.

첫 번째 매개변수에는 searchValue(찾을 값)을 받고, 두 번째 매개변수는 replaceValue(변경할 값)을 받습니다. 

문자열.replace(찾을값, 변경할 값);

 

1-3. replace( ) 사용한 예시 코드

let text = "나는 자바스크립트를 좋아합니다.";
let newText = text.replace("자바스크립트", "Javascript");

console.log(newText); // "나는 javascript를 좋아합니다."
console.log(text);    // "나는 자바스크립트를 좋아합니다."

이 코드를 보면 먼저 기존 text 에 담긴 "나는 자바스크립트를 좋아합니다" 문자열을  newText 에서 replace( ) 메서드를 사용하여 특정 문자인 "자바스크립트" 부분을 "javascript" 로 변경해서 문자열을 바꿔서 출력하는 코드입니다.

 

2. map( ) 메서드

2-1. map( ) 메서드란?

배열의 모든 요소를 하나씩 가져와서 콜백함수 를 적용한 후 그 결과로 새로운 배열을 만드는 메서드

2-2. map( ) 메서드 문법

## map() 문법
1. 배열.map(콜백함수);
2. 배열.map((요소, 인덱스, 배열) => { 변형된 값 반환 });

2-3 map( ) 사용한  예시 코드

let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]를 출력

다음 코드는 number 배열에서  [1, 2, 3]의 각 요소를 2배로 변환하여 새로운 배열을 생성하여 출력하는 코드입니다. 
이렇게 되면 새로운 배열 [ 2, 4, 6] 이 출력됩니다.

 

3. split( ) 메서드

 

3-1. split( ) 메서드란?

문자열을 특정 기준으로 잘라서 배열로 생성하는 메서드

 

3-2. split( ) 문법

특정 구분점을 기준으로 잘라서 배열로 생성하는 메서드 입니다.  split( ) 메서드는 반환값이 배열(Array)입니다. 

문자열.split(구분자);
반환값 : Array[배열]

 

3-3. split( ) 메서드

let text = "사과랑바나나랑포도";
let fruits = text.split("랑");
console.log(fruits); // ["사과", "바나나", "포도"]

이 코드를 보시면 split( ) 메서드를 사용하고 "랑"이라는 특정 문자를 기준으로 잘라서 새로운 배열을 생성하고 출력하는 코드입니다. 이렇게 split( ) 메서드를 활용하여 특정 문자열을 나눠서 배열을 생성할 수 있습니다.

 📒 결론

오늘 replace(), map(), split() 메서드를 활용하여 문자열 변경, 배열 변환, 문자열 분할 방법을 배웠습니다.
이들은 모두 원본을 변경하지 않고 새로운 값을 생성하는 메서드라는 것을 알 수 있게 되었습니다.
감사합니다. 이상으로 포스팅을 마칩니다!! 댓글 및 공감 꾸욱 눌러주세요 ☺️☺️