배열(2)
배열이 너무 많아 갯수를 셀 수 없다면 ‘.length’를 이용할 수 있는데,
이는
const manythings = [1, 2, 3, 4, 5, 'a' ,'b' ,'c' ,'d' ,'e' ,'eyes' ,'nose' ,'mouth', null, NaN, undefined]; console.log(manythings.length);
16 의 반환값이 표시된다. 즉, 배열은 16개가 있으며 마지막 인덱스는 0부터 시작하므로 15의 번호를 갖게 된다.
이는 배열의 요소 개수에서 1을 빼면 마지막 요소의 인덱스가 되므로 이를 활용해 마지막 요소의 값을 찾을 수 있다.
예를 들면,
const whatIsLastElement = ['a', 'b', 'c', 'd', 'e'];
console.log(whatIsLastElement [whatIsLastElement.length - 1]);
e
로 표현할 수 있다.
이를 응용한 예시는
const array = ['1', 'a', '2', 'b', '3', 'c', 100, 'f'];
console.log(array[array.length - 3]);
c
이며 마지막 배열에서 3번째 값을 출력해준다.
이러한 배열에 새로운 요소를 더하거나 뺄 수도 있으며
예를 들면,
const target = [1, 2, 3, 4, 5];
target[5] = 6;
console.log(target);
(6) [1, 2, 3, 4, 5, 6]
이는 인덱스 5번 자리에 6의 값을 입력한 것이며, 입력한 콘솔로그에 6까지 나타나게 된다.
앞의 (6)의 경우에는 6개의 값이 있다는 것을 알려준다.
하지만, 숫자의 위치를 모르는 배열의 마지막에 새로운 값을 넣고 싶을 때는
const target = ['가', '나', '다', '라', '마'];
target[target.length] = '바';
console.log(target);
(6) ['가', '나', '다', '라', '마', '바']
처럼 입력할 수 있으며, 넣고 싶은 위치를 바꾸고 싶은 경우에는 ‘length’ 대신에 ‘length - 1’, ‘length - 2’등을 입력하여 위치변경이 가능하다.
배열의 맨 앞에 값을 추가하고 싶은 경우에는 ‘unshift’를 이용하며
예를 들면,
const target = ['나', '다', '라', '마', '바'];
target.unshift('가');
console.log(target);
6) ['가', '나', '다', '라', '마', ']
const target = ['가', '나', '다', '라'];
target[0] = 'a';
console.log(target);
(4) ['a', '나', '다', '라']
의 반환값으로 나타난다. 이는, 인덱스 0에 위치해있던 ‘가’ 값이 ‘a’로 변한 것이다.
마지막에 위치한 요소를 제거하고 싶다면 ‘pop’을 사용할 수 있으며
예를 들면,
const target = ['가', '나', '다', '라', '마'];
target.pop(); console.log(target);
(4) ['가', '나', '다', '라']
로 나타낼 수 있다.
처음에 위치한 요소를 제거하고 싶다면 ‘shift’를 사용하여
예를 들면,
const target = ['가', '나', '다', '라'];
target.shift();
console.log(target);
(3) ['나', '다', '라']
와 같이 나타날 수 있다.
중간의 요소를 제거하고 싶다면 ‘splice’ 기능을 사용할 수 있으며
예를 들면,
const target = ['가', '나', '다', '라', '마'];
target.splice(1, 1); [
'나'] target
(4) ['가', '다', '라', '마']
와 같이 나타날 수 있는데, (1, 1)의 첫번째 1 부분은 인덱스 넘버 1을 말하며 뒤의 1은 인덱스 넘버 위치로부터 1개 만을 뜻한다.
예를 들어, (4) ['가', '다', '라', '마']의 ‘다’와 ‘라’ 요소를 제거하고 싶다면
target.splice(2, 2);
console.log(target);
(2) ['가', '다']
와 같이 나타날 수 있다.
만약, 뒷부분에 숫자를 적지 않는다면 해당 위치로부터의 요소들은 전부 제거된다.
예를 들어,
const target = ['가', '나', '다', '라', '마'];
target.splice(1);
console.log(target);
['가']
와 같이 나타난다.
또한 배열의 요소를 변경할 수 있으며
예를 들어,
const target = ['가', '나', '다', '라', '마'];
target.splice(1, 2, 'B' ,'C');
console.log(target);
(5) ['가', 'B', 'C', '라', '마']
와 같이 나타낼 수 있다. 이는 인덱스 넘버의 1 뒤의 요소를 2개 제거하고 2개의 요소를 새로 추가한 모습이다.
또한 배열을 제거하지 않고 중간에 요소만 추가하고 싶을 때는
const target = ['가', 'B', 'C', '라', '마'];
target.splice(1, 0, 'A');
console.log(target);
(6) ['가', 'A', 'B', 'C', '라', '마']
와 같이 표현할 수 있으며, 이는 인덱스 넘버 1번 뒤에 아무 요소도 제거하지 않고 새로운 요소를 추가한 모습이다.