Reference/Javascript

concat 메서드는 매개변수로 전달된 배열을 받어, 결합된 새로운 배열을 반환합니다.

by @webs 2022. 11. 7.

concat()

concat() 메서드는 매개변수로 전달된 배열을 받어, 결합된 새로운 배열을 반환합니다.

특징	설명
유형(type)	String.prototype.concat() / Array.prototype.concat()
버전(version)	ES1
결과값(return)	문자열(String) or 배열(Array)
사용성	★★☆☆☆

문법(Syntax)

"문자열".concat(문자열, 문자열,....)
"배열".concat(문자열, 문자열,....)

const str = "javascript";

str.concat("reference");                //javascriptreference
str.concat(" ","reference");            //javascript reference
str.concat(", ","reference");           //javascript, reference
str.concat(" + ","reference");          //javascript + reference
str.concat(" ","refe"," ","rence");     //javascript refe rence
str.concat(" ", ["refer","ence"]);      //javascript refer,ence

const arr = ["java", "script"];

arr.concat("reference")                 // ['java', 'script', 'reference']
arr.concat(" ", "reference")            // ['java', 'script', ' ', 'reference']
arr.concat("refer", "ence")             // ['java', 'script', 'refer', 'ence']
arr.concat(["refer", "ence"])           // ['java', 'script', 'refer', 'ence']
arr.concat("+", ["refer", "ence"])      // ['java', 'script', '+', 'refer', 'ence']

문자열(string) : 문자열을 설정합니다.
배열(array) : 배열을 설정합니다.

정의(Definition)

concat() 메서드는 매개변수로 전달된 배열을 받어, 결합된 새로운 배열을 반환합니다.
concat() 메서드는 기존의 배열을 변경하지 않습니다.
concat() 메서드 보다 (+, +=) 연산자를 사용하는 것이 속도 및 성능이 더 좋습니다.
at(), concat(), includes(), indexOf(), lastIndexOf(), slice(), toString() 메서드는 배열(array) 또는 문자열(string)에서 둘다 사용 가능합니다.

예제1(Sample)

버튼을 클릭하면, 배열을 결합하는 예제입니다.

[1, 2, 3, 4, 5]

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

6 6,7 6,7,8 😃

HTML

CSS

SCRIPT

<div class="charAt-box">
    <span>javascript</span>
    <p class="alert">클릭하면 여기에 정보가 나옵니다.</p>
</div>

#sample1 .indexof-box {
    text-align: center;
}
#sample1 .indexof-box .alert {
    padding-top: 10px;
}
#sample1 .indexof-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 .indexof-box em {
    background-color: #A2CBFA;
    border: 1px solid #4390E1;
    color: #fff;
    padding: 2px 5px;
}
#sample1 .indexof-box strong {
    border-bottom: 1px solid #000;
}

const btnAll = document.querySelectorAll(".sampleBtn a");
const btnAlert = document.querySelector(".indexof-box .alert");

const arr = [1, 2, 3, 4, 5];

btnAll.forEach(btn => {
    btn.addEventListener("click", (e) => {
        e.preventDefault();
        const char = btn.innerText;     //클릭한 버튼의 글씨
        const result = arr.concat(char);

        btnAlert.innerHTML = `${char} 배열을 추가하면 <em>${result}</em> 입니다.`;
    });
});