[자바스크립트] 배열(array)을 유용하게 활용할 수 있는 join 함수 개념 및 사용법

 

 

 

🤷‍♂️ 본론에 앞서

---

배열은 javascript에서 가장 중요한 데이터 자료구조 중 하나입니다.

배열에 내장함수를 활용하는 것은 javascript에서 중요한 부분 중 하나이며 join() 배열 메서드는 배열을 합치는 것에 가장 중요한 내장함수 중 하나입니다.

join() 배열 메서드를 더 잘 활용할 수 있도록 알아보겠습니다.

 

배열(array)을 처리하는 인기 있는 메서드 map(), forEach() 개념과 차이점

https://cometruedream.tistory.com/253

[자바스크립트] 배열(array)을 처리하는 인기있는 메소드 map(), forEach() 개념과 차이점

 

🤷‍♂️ 배열(array) join() 이란?

---

자바스크립트 배열 조인(join)은 배열의 요소를 하나의 문자열로 합쳐줍니다.

이 기능은 배열 내장함수 중 가장 유용하게 활용할 수 있는 메서드 중 하나입니다.

 

join() 메서드에 대해 자세히 이해하면

💡 프로젝트를 진행하다 보면 배열의 요소를 문자열로 만든 결과를 보여주는 상황이 있습니다.
각 요소를 join() 메서드로 배열의 요소를 구분하는 구분자를 활용해서 배열의 요소를 문자열로 만들 수 있습니다. 

 

 

 

1. 배열(array) join() 예시?

배열 조인(join) 메서드 예시입니다.

const sports = ['축구', '야구', '농구'];
const result = sports.join(',');

console.log(result);
// "축구,야구,농구"

 

위 예시에서 sports 배열에 요소를 join() 메서드를 활용해서 각 요소를 구분하는 구분자를 쉼표로 사용한 문자열 결과물을 반환합니다.

 

2. 배열(array) join() 예시 2?

배열 조인(join) 메서드 예시 2입니다.

const fruits = ['축구', '야구', '농구'];
const result = fruits.join(', ');

console.log(result);
// "축구, 야구, 농구"

 

구분자 쉼표, 공백을 사용한 문자열 결과물을 반환합니다.

보시는 것처럼 결과물에 공백이 생깁니다.

 

3. 배열(array) join() 활용법?

split() 함수는 문자열을 배열로 분할하는 메서드입니다.

join() 배열을 문자열로 결합하는 메서드이며 이 둘을 활용해서 원하는 결과물을 도출할 수 있습니다.

또한 이 둘 메서드는 서로 상호보완적인 기능으로 자주 같이 사용됩니다.

const url = "https://www.example.com/search?q=javascript+array+join&sort=date";

const queryString = url.split("?")[1];
console.log(queryString)
// q=javascript+array+join&sort=date

const queryParameters = queryString.split("&")[0];
// ['q=javascript+array+join', 'sort=date']

const findQueryQkey = queryParameters.split("=")[1];
const queryKey = findQueryQkey.split('+');
const result = queryKey.join(', ')

console.log(result)
// javascript, array, join

 

위 코드에서 주어진 url에 쿼리스트링 q에 값들을 찾는 방법입니다.

url.split("?")[1] url 구분자? 구분해서 문자열을 배열로 분할하고 분활된 배열의 첫번째 인덱스 요소 값을 가져옵니다.

queryString.split("&") 가져온 값을 다시 & 구분자로 문자열을 배열로 분활하고 queryParameters.split("=") = 구분자로 문자열로 분활하고 findQueryQkey.split('+') + 구분자로 문자열을 분활하고 queryKey.join(', ') 배열을 합쳐서 원하는 값을 도출했습니다.

위에 예제처럼 split(), join() 메서드를 활용해서 원하는 결과값을 도출할 수 있습니다.

 

 

JavaScript [자바스크립트] 활용가치가 좋은 내장함수와 every(), some() 함수의 개념 및 활용법

https://cometruedream.tistory.com/250

[자바스크립트] 활용가치가 좋은 내장함수와 every(), some() 함수의 개념 및 활용법

 

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리