Array.join()에 대해 알아보자.

join()?

자주쓰이지는 않지만 종종 쓰이는 매서드 주로, 문자열을 다룰때 배열로 변환 후 원하는 작업을 처리 한 뒤 다시 문자열을 리턴해야 할 경우 사용된다.

 

구문

Array.join()
Array.join(separator)

 

매개변수로 separator를 선택적으로 사용할 수 있다.

매개변수를 전달하지 않으면 ","로 배열안의 모든 원소가 문자열이되어 리턴된다.

 

사용예시

let someArr = [1,2,"hi" ,"nice" ,"to", "meet", "you"]

someArr.join();
//"1,2,hi,nice,to,meet,you"

someArr.join("");
//"12hinicetomeetyou"

someArr.join(" ");
//"1 2 hi nice to meet you"

someArr.join("|");
//"1|2|hi|nice|to|meet|you"

위에서 말했듯 값을 넣지 않는다면 ","

값을 넣는다면 해당 값으로 연결된 문자열이 리턴된다.

 

실사용 예시

주어진 문자열에서 첫번째 문자, 이후 공백 이후 첫번째 문자들만 대문자로 변환하기.

ex) i like you => I Like You

let text = "i like you";

text.split(" ").map(el => el.replace(el.at(0), el.at(0).toUpperCase())).join(" ")
//"I Like You"

주어진 text를 split(" ") 매서드를 이용해서 공백을 기준으로 나눠주어

["i", "like", "you"]의 형태로 바꿔준 뒤, map을 이용해 각 원소마다 replace()매서드를 이용해 at(0) 매서드로 구한

첫번째 글자를 toUpperCase() 매서드로 대문자로 바꿔준 뒤 리턴한다.

["I", "Like", "You"] 형태의 배열이 되었으니 join(" ") 매서드로 공백으로 붙여서 "I Like You"로 리턴해준다.

 

흠.. 그외에는 따로 쓸만한곳이 있나?..

리액트나 다른 프론트 프레임워크 환경에서 배열로 저장한 데이터를 "|" 로 붙여서 DB에 넣어줄때 쓸 수 있을것 같다.

 

let userHasCouponCode = ["A001", "A002", "B001", "A004", "B002"];

// DB에 사용자의 쿠폰 데이터가 "|" 로 구분된 문자열로 들어간다고 하면..

postData(userHasCouponCode.join("|"));
//"A001|A002|B001|A004|B002"
//이런식으로 보내줄 수 있다.