안녕하세요, 코린이의 코딩 학습기 채니 입니다.
개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.
요소 추가 및 제거
HTML 코드
<button onclick="test8();">push | pop | unshift | shift</button>
Javascript 코드
push()
- 마지막에 요소 추가
function test8() {
const arr = [];
arr.push(1);
arr.push(2);
arr.push(3);
console.log(arr);
}
pop()
- 마지막 요소 제거
console.log(arr.pop()); // 제거된 값을 리턴
console.log(arr.pop()); // 제거된 값을 리턴
console.log(arr.pop()); // 제거된 값을 리턴
console.log(arr);
마지막 번지부터 요소를 제거하므로 3, 2, 1이 제거 되었습니다.
unshift()
- 0번지에 요소 추가
arr.unshift(1);
arr.unshift(2);
arr.unshift(3);
console.log(arr);
0번지에 요소를 추가하므로 3, 2, 1 순으로 값이 추가되었습니다.
shift()
- 0번지에 요소 제거
console.log(arr.shift()); // 제거된 값을 리턴
console.log(arr.shift()); // 제거된 값을 리턴
console.log(arr.shift()); // 제거된 값을 리턴
console.log(arr);
0번지에서부터 요소를 제거하기 때문에 3, 2, 1 순으로 값이 제거 되었습니다.
선입선출 (queue)
arr.push('a');
arr.push('b');
arr.push('c');
console.log(arr);
while(arr.length) {
console.log(arr.shift());
}
후입선출 (stack)
arr.push('가');
arr.push('나');
arr.push('다');
console.log(arr);
while(arr.length) {
console.log(arr.pop());
}
@실습 - 무지개 테이블
'빨', '주', '노', '초', '파', '남', '보'
'주', '노', '초', '파', '남', '보', '빨'
'노', '초', '파', '남', '보', '빨', '주'
'초', '파', '남', '보', '빨', '주', '노'
'파', '남', '보', '빨', '주', '노', '초'
'남', '보', '빨', '주', '노', '초', '파'
'보', '빨', '주', '노', '초', '파', '남'
HTML 코드
<button onclick="test11();">@실습문제 - 무지개테이블</button>
Javascript 코드
function test11() {
const arr = ['빨', '주', '노', '초', '파', '남', '보'];
for(let i = 0; i < arr.length; i++) {
console.log(arr);
arr.push(arr.shift());
}
}
push()는 마지막 번지에 요소 추가, shift()는 0번지의 요소를 제거하는 특성을 이용하여 무지개테이블을 만들 수 있었습니다.
제거되는 값이 리턴 되므로 쉽게 만들어낼 수 있겠죠!!
배열 자르기
HTML 코드
<button onclick="test9();">slice</button>
Javascript 코드
slice(start, end)
- 배열의 substring
- 원본 배열을 변경하지 않음
- start 포함
- end 미포함
function test9() {
const arr = ['java', 'javascript', 'python', 'sql'];
const other = arr.slice(1, 3);
console.log(arr, other);
}
원본 배열은 변경되지 않기 때문에 오리진 'arr'은 그대로 값을 가지고 있으며, arr의 1번지부터 2번지까지의 원소를 잘라와 other에 대입하였습니다.
end 번지수에 대한 원소를 미포함이므로 (1, 3)을 입력하면 1번지 ~ 2번지까지의 원소를 가져옵니다.
마지막 요소 생략 시
const arr = ['java', 'javascript', 'python', 'sql'];
const other = arr.slice(1); // end 생략 시 마지막 요소까지 반환
console.log(arr, other);
end를 생략하면 마지막 원소까지 반환 되기 때문에 1번지부터 마지막 번지까지의 원소를 가져온 것을 확인할 수 있습니다.
slice를 이용한 복제
const copy = arr.slice();
console.log(copy);
start, end를 모두 생략하면 0번지 ~ 끝까지 잘라오기 때문에 배열 복사할 때 유용하게 사용할 수 있습니다.
HTML 코드
<button onclick="test10();">splice</button>
Javascript 코드
splice(start, delCount, [newItem1, newItem2, ...])
- 요소를 제거 또는 추가
- 원본 배열 변경
- 제거된 요소를 배열로 반환
제거 및 삽입
function test10() {
const arr = ['a', 'b', 'c'];
// [제거, 삽입] b를 제거 / '가', '나', '다'를 추가
console.log(arr.splice(1, 1, '가', '나', '다'));
console.log(arr);
}
1번지부터 1개를 제거하고, '가', '나', '다'를 추가하였습니다.
제거된 'b'의 값이 배열로 리턴되는 것을 확인할 수 있으며, 원본 배열이 변경되는 것을 확인할 수 있습니다.
원소를 대체한다고 생각하면 될 것 같습니다.
제거
// [제거] b만 제거
console.log(arr.splice(1, 1));
console.log(arr);
1번지부터 1개를 제거하였기 때문에 제거된 'b'가 배열로 리턴 되는 것을 확인할 수 있으며,
마찬가지로 원본 배열이 변경되기 때문에 arr에는 'a', 'c'만 남아있는 것을 확인할 수 있습니다.
삽입
// [삽입] 1번지에 '가', '나', '다'를 추가
arr.splice(1, 0, '가', '나', '다');
console.log(arr);
1번지부터 0개를 제거하고 '가', '나', '다'를 추가하였기 때문에, 삭제되는 원소는 없으며 1번지에 '가', '나', '다'가 추가된 것을 확인할 수 있습니다.
