Reference/Javascript

at 메서드는 지정한 숫자를 받아, 배열에서 해당 되는 인덱스의 요소를 반환합니다.

by @webs 2022. 11. 7.

at()

at() 메서드는 지정한 숫자(index)를 받아, 배열에서 해당 되는 인덱스의 요소를 반환합니다. 양수와 음수 모두 설정 할 수 있으며, 음수 값의 경우 뒤에서부터 인덱스 값을 설정합니다. at() 메서드는 배열 또는 문자열에서 둘다 사용이 가능합니다.

특징	설명
유형(type)	String.prototype.at() / Array.prototype.at()
버전(version)	ES6
결과값(return)	문자열 요소 or undefined
사용성	★★☆☆☆

문법(Syntax)

"배열".at(인덱스)

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

arr.at(0)   //1
arr.at(1)   //2
arr.at(2)   //3
arr.at(3)   //4
arr.at(4)   //5

arr.at(-1)   //9
arr.at(-2)   //8
arr.at(-3)   //7
arr.at(-4)   //6
arr.at(-5)   //5

배열(array) : 배열을 설정합니다.
인덱스(index) : 시작하는 위치 값을 설정합니다.

정의(Definition)

at() 메서드는 정수 값을 받아, 배열에서 해당 되는 인덱스의 요소를 반환합니다.
양수와 음수 모두 설정 할 수 있으며, 음수 값의 경우 뒤에서부터 인덱스 값을 설정합니다.
주어진 인덱스에 배열이 없으면 undefined를 반환합니다.

예제1(Sample)

정수값을 입력하면 해당 인덱스 요소를 받아오는 예제입니다.

[1, 2, 3, 4, 5, 6, 7, 8, 9]

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

0 1 2 3 4 5 -1 -2 -3 -4 -5

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, 6, 7, 8, 9];

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

        btnAlert.innerHTML = `${char}번째 문자열은 <em>${result}</em> 입니다.`;
    });
});