[배열] 03. 배열 다루기

// 배열 (Array)
let members = ['쿤갈레', 'Zerrard66', '우리생각해서', '흙토끼', 'End Miracle'];

console.log(typeof members);

어떤 그룹 멤버들의 닉네임을 모아둔 배열이 있습니다. JavaScript의 거의 모든 것이 객체라고 했는데 사실 배열도 객체입니다. typeof 연산자로 배열의 자료형을 확인해보면 object라고 나옵니다. 배열도 JavaScript에서 미리 만들어둔 조금 특별한 객체의 한 종류입니다.

date 객체에서 날짜와 관련된 다양한 메소드들이 미리 만들어져 있어서 유용하게 활용할 수 있었던 것처럼 배열도 단순히 여러 값들을 묶어주는 역할만 하는 것이 아니라 다양한 프로퍼티와 메소드들이 있어서 필요한 상황에 유용하게 활용할 수 있습니다. 이런 것들이 JavaScript뿐만 아니라 다른 프로그래밍 언어에서도 객체가 중요하고 좋은 이유 중 하나입니다.

 

console.log(members.length);
console.log(members['length']);
console.log(members[members.length - 1]);

length 프로퍼티는 배열이 가지고 있는 요소의 총 개수를 표시해 줍니다. 그래서 배열 안에 몇개의 데이터가 들어있는지 쉽게 파악할 수 있습니다. 저장하고 실행해보면 5가 잘 출력되는 것을 확인할 수 있습니다. 일단 프로퍼티기 때문에 점 표기법을 사용할 수 있지만 대괄호 표기법으로도 접근이 가능합니다.

그리고 참고로 요소의 인덱스는 0번부터 시작하므로 members[members.length - 1]을 하면 배열의 마지막 요소에 접근할 수 있습니다.

 

배열에 요소를 추가하거나 수정하는 방법은 배열이 객체인 만큼 배열에 요소를 추가하거나 수정하는것도 객체와 비슷합니다.

members[5] = 'NiceCodeit';
console.log(members[5]);

이렇게 존재하지 않는 요소에 접근하려고 하면 에러가 아니라 undefined가 출력이 되는데 여기 위에다가 바로 members 5번 인덱스에 'NiceCodeit'이라는 값을 넣어서 이렇게 존재하지 않는 요소에 접근해서 새로운 값을 할당해 주게 되면 배열에 요소가 추가되고 이미 존재하는 요소에 접근해서 값을 할당하게 되면 요소의 값이 수정되는 방식입니다.

저장하고 실행해보면 'NiceCodeit'가 잘 출력이 되고 콘솔에서 members를 입력해보면 인덱스 5번에 'NiceCodeit'이 추가된 모습도 확인할 수가 있습니다. 그리고 이렇게 콘솔에 출력했을 때 배열 앞에 소괄호로 감싸진 숫자가 배열의 length 값인데 members의 length도 6으로 증가된 것을 확인할 수 있습니다.

members[6] = 'NiceCodeit';
console.log(members[5]);

한 가지 주의해야 할 점은 인덱스의 순서를 뛰어넘으면서 추가하게 되면 undefined 값이 들어간 요소가 자동으로 생성된다는 것입니다. 5번이 아니라 6번 인덱스에 'NiceCodeit'를 추가해 주게 되면 members[5]는 undefined가 되고 콘솔에 배열을 출력해보면 가운데 empty라고 해서 비어 있다는 사실을 알려줍니다. 5번 인덱스의 값이 비어 있긴 하지만 하나의 요소로 생성이 돼서 members의 length도 7이 된 것을 확인할 수 있습니다.

의도한 것이라면 상관없지만 만약 이런 부분을 모르고 배열에 요소를 추가하게 된다면 예상치 못한 결과를 얻을 수도 있기 때문에 이런 부분은 꼭 기억해 두는 것이 좋습니다.

members[3] = '달토끼';
console.log(members[3]);

요소의 수정은 이미 존재하는 요소에 접근을 해서 값을 바꾸고 출력해보면 수정된 것을 확인할 수 있습니다.

console.log(members);
delete members[4];
console.log(members);

마지막으로 객체에서는 delete 연산자를 활용했는데 배열에서 요소를 삭제하는 방법은 일단 콘솔에 members를 출력한 다음에 요소를 지우고 다시 members를 출력해보면 값 자체는 지워지지만 요소가 계속 empty로 남아 있습니다. length도 5로 계속 유지됩니다. 이것은 사실상 완벽하게 요소가 삭제되었따고 보기는 힘듭니다. 그래서 배열의 요소를 완벽하게 삭제하려면 배열이 가지고 있는 메소드를 활용해야 합니다. 사실 배열을 좀 더 안전하고 효과적으로 다루기 위해서는 배열이 가지고 있는 메소드를 활용해야 합니다.