jquery join()에 대한 설명과 예제

 

 

 

jQuery에서는 데이터 배열을 합치거나 연결하는 기능이 기본적으로 제공되지 않습니다. 그러나 자바스크립트의 Array.prototype.join() 메서드를 활용하여 배열 요소를 특정 구분자로 연결하는 작업을 수행할 수 있습니다. join()은 배열의 모든 요소를 문자열로 결합하는 데 유용하며 이를 jQuery와 함께 사용할 수도 있습니다.

 

---

 

 

join() 메서드의 동작

• join() 메서드는 배열의 요소를 연결해 하나의 문자열로 반환합니다.
• 선택적 매개변수로 구분자(Separator)를 지정할 수 있습니다.
• 지정된 구분자가 없으면 기본으로 쉼표(,)를 사용합니다.

 

---

 

 

문법

array.join(separator)

 

• array: 요소를 결합할 배열
• separator (선택): 요소를 구분할 문자열. 기본값은 ,.

 

---

 

 

jQuery와 함께 사용하는 방법

jQuery는 DOM 요소를 선택하고 배열로 처리할 수 있는 기능을 제공하므로 join()과 결합해 활용할 수 있습니다.

 

1. 예제: 단순 배열의 join() 사용

$(document).ready(function () {
    const fruits = ["Apple", "Banana", "Cherry"];
    const result = fruits.join(" - "); // "Apple - Banana - Cherry"
    console.log(result);
});

 

 

2. 예제: jQuery로 DOM 요소 연결

다음은 페이지 내 특정 클래스의 텍스트를 배열로 변환하고, 이를 join()으로 연결하는 예제입니다.

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
    // 모든 .item 요소의 텍스트를 가져와 배열로 저장
    const texts = $(".item").map(function () {
        return $(this).text();
    }).get(); // .get()으로 배열로 변환

    // join()을 사용해 배열을 문자열로 결합
    const result = texts.join(", ");
    console.log(result); // "Item 1, Item 2, Item 3"
});
</script>

 

---

 

3. 예제: 입력 값 연결

다음은 여러 입력 필드의 값을 가져와 문자열로 결합하는 예제입니다.

<input type="text" class="input-field" value="John">
<input type="text" class="input-field" value="Doe">
<input type="text" class="input-field" value="Smith">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
    // 모든 .input-field 요소의 값을 가져와 배열로 저장
    const inputValues = $(".input-field").map(function () {
        return $(this).val();
    }).get();

    // join()으로 결합
    const result = inputValues.join(" ");
    console.log(result); // "John Doe Smith"
});
</script>

 

---

 

 

결론

• join()은 배열을 문자열로 결합하는 기본 메서드로 jQuery와 결합하면 DOM 요소의 텍스트나 값 등을 쉽게 연결할 수 있습니다.
• 데이터 가공과 출력 작업에서 매우 유용하게 활용됩니다.

 

 

 

 

 

#jquery #join() #데이터배열합치기 #데이터배열연결