본문 바로가기
Reference/JAVASCRIPT

join 메서드는 배열의 요소를 추가하여, 하나의 문자열로 반환합니다.

by @webstoryboy 2022. 12. 13.

join() 메서드는 배열의 요소를 추가하여, 하나의 문자열로 반환합니다.

Reference/Javascript

join 메서드는 배열의 요소를 추가하여, 하나의 문자열로 반환합니다.

by @webs 2022. 12. 12.

join()

join() 메서드는 배열의 요소를 추가하여, 하나의 문자열로 반환합니다.


특징 설명
유형(type) array.prototype.join()
버전(version) ES1
결과값(return) 문자열(string)
사용성 ★★★☆☆

문법(Syntax)

"배열".join(분리기호)

const arr = [100, 200, 300, 400, 500];

const text1 = arr.join("*");    //100*200*300*400*500
const text2 = arr.join("-");    //100-200-300-400-500
const text3 = arr.join();       //100,200,300,400,500
const text3 = arr.join("");     //100200300400500
const text4 = arr.join(" ");    //100 200 300 400 500
  • 배열(array) : 배열을 설정합니다.
  • 분리기호(separator) : 배열의 요소를 구분할 문자열을 설정합니다. 기본 값은 쉼표(,)입니다.

정의(Definition)

  • join() 메서드는 배열의 문자열을 하나로 문자열로 반환합니다.
  • join() 메서드는 배열을 변경하지 않습니다.
  • join() 메서드는 구분기호를 지정할 수 있습니다. 기본은 쉼표(,)입니다.
  • join() 메서드는 요소가 undefined 또는 null이면 빈 문자열로 변환합니다.

예제1(Sample)

문자열을 추가하여 합치는 예제입니다.

[100, 200, 300, 400, 500]

클릭하면 여기에 정보가 나옵니다.

* - 😂 +
HTML
CSS
SCRIPT
<div class="charAt-box">
    <span>javascript</span>
    <p class="alert">클릭하면 여기에 정보가 나옵니다.</p>
</div>
#sample1 .charAt-box {
    text-align: center;
}
#sample1 .charAt-box .alert {
    padding-top: 10px;
}
#sample1 .charAt-box span {
    border: 1px solid #e6e6e6;
    padding: 10px 20px;
    display: inline-block;
    margin-bottom: 10px;
    background-color: #A2CBFA;
    border: 1px solid #4390E1;
    color: #fff;
    border-radius: 40px;
}
#sample1 .charAt-box em {
    background-color: #A2CBFA;
    border: 1px solid #4390E1;
    color: #fff;
    padding: 10px;
}
const text = document.querySelector(".indexof-box .text").innerText;
const btnAll = document.querySelectorAll(".sampleBtn a");
const btnAlert = document.querySelector(".indexof-box .alert");

btnAll.forEach(btn => {
    btn.addEventListener("click", (e) => {
        e.preventDefault();
        const char = btn.innerText.trim();
        const result = text.indexOf(char);
        
        if(result > 0){
            btnAlert.innerHTML = `클릭한 ${char} 글자는 <em>${result}</em> 번째 위치에 있습니다.`;
        } else {
            btnAlert.innerHTML = `클릭한 ${char} 글자는 존재하지 않습니다.`;
        }
    });
});

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
join()

배열과 관련된 메서드

  • array.prototype.at() 메서드는 지정한 숫자(index)를 받아, 배열에서 해당 되는 인덱스의 요소를 반환합니다.
  • array.prototype.concat() 메서드는 둘 이상의 배열을 결합하여, 새로운 배열을 반환합니다.
  • array.prototype.copyWithin() 메서드는 배열의 일부를 얕게 복사한 뒤, 동일한 배열의 다른 위치에 덮어쓰고 그 배열을 반환합니다
  • array.prototype.entries() 메서드는 배열의 각 인덱스에 대한 속성 값을 반환합니다
  • array.prototype.keys() 메서드는 배열의 각 인덱스에 대한 키 값을 반환합니다.
  • array.prototype.fill() 메서드는 배열의 시작 인덱스부터 끝 인덱스까지 하나의 값으로 반환합니다.
  • array.prototype.find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다
  • array.prototype.findIndex() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 인덱스로 반환합니다
  • array.prototype.findLast() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 역순으로 반환합니다
  • array.prototype.findLastIndex() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 역순 인덱스로 반환합니다
  • array.prototype.flat() 메서드는 중첩된 배열을 하나의 배열로 반환합니다.
  • array.prototype.flatMap() 메서드는 먼저 매핑함수를 사용해 각 엘리먼트에 대해 map 수행 후, 결과를 새로운 배열로 평탄화합니다.
  • array.prototype.forEach() 메서드는 주어진 함수 조건을 배열 요소 각각에 대해 실행하고, 그 결과를 반환합니다.
  • array.prototype.filter() 메서드는 주어진 함수 조건에 맞는 모든 요소를 새로운 배열로 반환합니다.
  • array.prototype.every() 메서드는 주어진 함수를 모두 통과하는지 확인하고, 불린(true, false)로 반환합니다.
  • array.prototype.map() 메서드는 주어진 함수를 호출하고, 그 결과를 모아서 만든 새로운 배열을 반환합니다.
  • array.prototype.some() 메서드는 주어진 판별 함수를 통과하는지 테스트하여, 그 그결과를 불린(true, false)로 반환합니다.
  • array.prototype.includes() 메서드는 배열 포함 여부를 검색하여, 불린(true, false)을 반환합니다.
  • array.prototype.indexOf() 메서드는 배열을 검색하고, 위치값(숫자)을 반환합니다.
  • array.prototype.lastIndexOf() 메서드는 역순으로 배열을 검색하고, 위치값(숫자)을 반환합니다.
  • array.prototype.join() 메서드는 배열의 요소를 추가하여, 하나의 문자열로 반환합니다.
  • array.prototype.pop() 메서드는 배열 마지막 요소를 제거하고, 제거한 요소를 반환합니다.
  • array.prototype.push() 메서드는 배열 끝에 요소를 추가하고, 배열의 새로운 길이값을 반환합니다.
  • array.prototype.reduce() 메서드는 배열의 각 요소를 실행하고, 하나의 결과값을 반환합니다.
  • array.prototype.reduceRight() 메서드는 배열의 각 요소를 마지막부터 실행하고, 하나의 결과값을 반환합니다.
  • array.prototype.reverse() 메서드는 배열 요소의 순서를 반대로 하고, 반대로 된 배열을 반환합니다.
  • array.prototype.shift() 메서드는 배열 처음 요소를 제거하고, 제거한 요소를 반환합니다.
  • array.prototype.unshift() 메서드는 배열 앞에 요소를 추가하고, 배열의 새로운 길이 값을 반환합니다.
  • array.prototype.slice() 메서드는 배열 시작 위치에서 종료 위치 값을 추출하여, 새로운 배열을 반환합니다.
  • array.prototype.sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후, 그 배열을 반환합니다
  • array.prototype.toLocaleString() 메서드는 배열의 요소를 문자열로 반환합니다.
  • array.prototype.toString() 메서드는 데이터를 배열로 변환하고, 새로운 배열을 반환합니다.
  • array.prototype.values() 메서드는 배열 각 인덱스에 대한 값을 객체로 반환합니다.

문자열과 관련된 메서드

  • string.prototype.at() 메서드는 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 요소를 반환합니다.
  • string.prototype.charAt() 메서드는 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 단일문자를 반환합니다.
  • string.prototype.charCodeAt() 메서드는 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 유니코드 정수 값을 반환합니다.
  • string.prototype.charPointAt() 메서드는 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 유니코드 포인트 정수 값을 반환합니다.
  • string.prototype.concat() 메서드는 매개변수로 전달된 문자열을 받어, 결합된 새로운 문자열을 반환합니다.
  • string.prototype.includes() 메서드는 문자열 포함 여부를 검색하여, 불린(true, false)을 반환합니다.
  • string.prototype.indexOf() 메서드는 문자열을 검색하여, 주어진 값과 일치하는 첫 번째 위치값(index)을 반환합니다.
  • string.prototype.lastIndexOf() 메서드는 문자열을 역순으로 검색하여, 주어진 값과 일치하는 첫 번째 위치값(index)을 반환합니다.
  • string.prototype.localeCompare() 메서드는 문자열과 문자열을 비교하여, 수치(음수, 양수, 0)을 반환합니다.
  • string.prototype.match() 메서드는 문자열(정규식)을 검색하고, 문자열(배열)을 반환합니다.
  • string.prototype.matchAll() 메서드는 문자열(정규식)을 검색하고, 일치하는 모든 문자열(배열)을 반환합니다.
  • string.prototype.normalize() 메서드는 주어진 문자열을 정규화된 형태로 반환합니다.
  • string.prototype.padEnd() 메서드는 주어진 길이에 맞게 뒤 문자열을 채우고, 새로운 문자열을 반환합니다.
  • string.prototype.padStart() 메서드는 주어진 길이에 맞게 앞 문자열을 채우고, 새로운 문자열을 반환합니다.
  • string.prototype.repeat() 메서드는 주어진 횟수만큼 반복 복사하여, 새로운 문자열을 반환합니다.
  • string.prototype.replace() 메서드는 문자열에서 특정 문자열을 교체하여, 새로은 문자열을 반환합니다.
  • string.prototype.replaceAll() 메서드는 문자열에서 특정 문자열을 모두 교체하여, 새로은 문자열을 반환합니다.
  • string.prototype.search() 메서드는 문자열(정규식)을 검색하고, 위치값(숫자)을 반환합니다.
  • string.prototype.slice() 메서드는 문자열에서 시작 위치에서 종료 위치 값을 추출하여, 새로운 문자열을 반환합니다.
  • string.prototype.substring() 메서드는 문자열에서 시작 위치에서 종료 위치 값을 추출하여, 새로운 문자열을 반환합니다.
  • string.prototype.substr() 메서드는 문자열에서 시작 위치에서 길이 값을 추출하여, 새로운 문자열을 반환합니다.
  • string.prototype.split() 메서드는 문자열을 구분자로 구분하고, 여러 개의 문자열(배열)을 반환합니다.
  • string.prototype.startsWith() 메서드는 시작하는 문자열에서 특정 문자열로 시작하는 확인하여, 그 결과를 불린(true, false)로 반환합니다.
  • string.prototype.endsWith() 메서드는 끝나는 문자열에서 특정 문자열로 끝나는지 확인하여, 그 결과를 불린(true, false)로 반환합니다.
  • string.prototype.toLocaleLowerCase() 메서드는 문자열을 소문자로 설정하고, 로케일 소문자 문자열을 반환합니다.
  • string.prototype.toLocaleUpperCase() 메서드는 문자열을 대문자로 설정하고, 로케일 대문자 문자열을 반환합니다.
  • string.prototype.toLowerCase() 메서드는 문자열을 소문자로 설정하고, 소문자 문자열을 반환합니다.
  • string.prototype.toUpperCase() 메서드는 문자열을 대문자로 설정하고, 대문자 문자열을 반환합니다.
  • string.prototype.toString() 메서드는 데이터를 문자열로 변환하고, 문자열을 반환합니다.
  • string.prototype.trim() 메서드는 문자열의 앞/뒤 공백을 제거하고, 새로운 문자열을 반환합니다.
  • string.prototype.trimEnd() 메서드는 문자열의 앞 공백을 제거하고, 새로운 문자열을 반환합니다.
  • string.prototype.trimStart() 메서드는 문자열의 뒤 공백을 제거하고, 새로운 문자열을 반환합니다.
  • string.prototype.valueOf() 메서드는 객체의 원시값을 반환합니다.

참고(Reference)


댓글