Reference/Javascript
shift 메서드는 배열 처음 요소를 제거하고, 제거한 요소를 반환합니다.
shift()
shift() 메서드는 배열 처음 요소를 제거하고, 제거한 요소를 반환합니다.
| 특징 | 설명 |
|---|---|
| 유형(type) | array.prototype.shift() |
| 버전(version) | ES1 |
| 결과값(return) | 제거한 요소 |
| 사용성 | ★★★☆☆ |
문법(Syntax)
"배열".shift()
const arr = [100, 200, 300, 400, 500];
const text = arr.shift();
console.log(text) //100
console.log(arr) //[200, 300, 400, 500]
- 배열(array) : 배열을 설정합니다.
정의(Definition)
- shift() 메서드는 배열 처음 요소를 제거하고, 제거한 요소를 반환합니다.
- shift() 메서드는 배열의 길이값을 변경합니다.
- shift() 메서드는 배열의 값이 0이라면 undefined를 반환합니다.
비교(Compare)
- shift() 메서드는 배열 처음 요소를 제거하고, 제거한 요소를 반환합니다.
- pop() 메서드는 배열 마지막 요소를 제거하고, 제거한 요소를 반환합니다.
- unshift() 메서드는 배열 앞에 요소를 추가하고, 배열의 새로운 길이 값을 반환합니다.
- push() 메서드는 배열 마지막에 요소를 추가하고, 배열의 새로운 길이 값을 반환합니다.
예제1(Sample)
shift() 기본 예제입니다.
[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 btnAll = document.querySelectorAll(".sampleBtn a");
const btnAlert = document.querySelector(".indexof-box .alert");
btnAll.forEach(btn => {
btn.addEventListener("click", (e) => {
e.preventDefault();
const arr = [100, 200, 300, 400, 500];
const char = btn.innerText.trim();
const result = arr.shift(char);
if(result){
btnAlert.innerHTML = `${char} 클릭하면, 배열의 처음 요소는 ${result} 이고, 남은 배열은 ${arr} 입니다.`;
}
});
});
호환성(Compatibility)
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| shift() | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
배열과 관련된 메서드
- 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() 메서드는 객체의 원시값을 반환합니다.
댓글