📚 뭐라고? 배열도 객체라고 ??
사실 배열도 객체이다. 즉, 배열 또한 JavaScript에서 만들어 놓은 조금 특별한 객체인 것이다.
위와 같은 특성으로, 배열은 다양한 프로퍼티와 메서드들이 있어서 필요한 상황에 유용하게 활용할 수 있다. 이러한 측면이 객체가 중요하고, 또 좋은 이유 중 하나이다.
배열 다루기
📌 배열의 요소 추가 / 수정
앞서 언급하였듯 배열도 객체이기 때문에, 배열을 추가하고 삭제하는 것도 객체와 비슷하다.
let members = ['a', 'b', 'c', 'd', 'e'];
members[5] = 'f'; // 배열에 새로운 요소 추가
members[1] = 'new'; // 배열 요소 수정
console.log(members); // output: [ 'a', 'new', 'c', 'd', 'e', 'f' ]이 때 주의해야 할 점은, 인덱스의 순서를 뛰어넘으면서 추가하게 되면, 그 사이에는 undifined값이 들어간 요소가 자동으로 생성된다는 점이다.
let members = ['a', 'b', 'c', 'd', 'e'];
members[6] = 'g'; // 배열에 새로운 요소 추가
console.log(members); // output: [ 'a', 'b', 'c', 'd', 'e', <1 empty item>, 'g' ]📌 배열의 요소 삭제
다시, 배열은 객체라고 하였으니, 객체와 비슷한 방식으로 delete연산자를 이용해 요소를 삭제해보도록 하자.
let members = ['a', 'b', 'c', 'd', 'e'];
delete members[1];
console.log(members); // output: [ 'a', <1 empty item>, 'c', 'd', 'e' ]위의 결과를 통해 값 자체는 지워졌지만, 요소가 계속 empty로 남아있는 모습을 확인할 수 있다. lenght 또한 변하지 않은 것을 확인 가능하다.
이건 사실상 완벽하게 요소가 삭제되었다고 보기는 조금 힘들다. 그렇다면 어떻게해야 배열의 요소를 완벽하게 삭제할 수 있을까? 이는 배열의 메소드를 통해 해결 가능하다.
배열 메소드
📌 Splice 메소드
배열에서 요소를 삭제할 때 가장 많이 사용되는 메소드는 splice라는 메소드이다.
- 파라미터를 하나만 전달하는 경우: 전달된 인덱스로부터 그 이후에 모든 요소를 삭제해 버린다.
// 파라미터를 1개 전달하는 경우 let members = ['a', 'b', 'c', 'd', 'e']; members.splice(1); console.log(members); // output: ['a'] - 파라미터를 2개 전달하는 경우: 삭제할 개수를 조절 가능하다.
// 파라미터를 2개 전달하는 경우 let members = ['a', 'b', 'c', 'd', 'e']; members.splice(1,2); console.log(members); // output: ['a', 'd', 'e'] // 만약 1개의 요소만 삭제하고 싶다면, 두번째 인자를 1로 설정하면 된다. let members2 = ['A', 'B', 'C', 'D', 'E']; members2.splice(1,1); console.log(members2); // output: ['A', 'C', 'D', 'E'] - 파라미터를 3개 이상 전달하는 경우: 삭제한 요소 자리에 해당 값들이 추가된다.
// 파라미터를 3개이상 전달하는 경우 let members = ['a', 'b', 'c', 'd', 'e']; members.splice(1, 2, 'new1', 'new2'); console.log(members); // output: [ 'a', 'new1', 'new2', 'd', 'e' ] // 만일 삭제한 요소보다 더 많은 요소를 추가하는 경우, 추가된 요소는 삭제된 요소의 뒤에 위치한다. let members2 = ['A', 'B', 'C', 'D', 'E']; members2.splice(1, 2, 'NEW1', 'NEW2', 'NEW3', 'NEW4'); console.log(members2); // output: [ 'A', 'NEW1', 'NEW2', 'NEW3', 'NEW4', 'D', 'E' ] // 2번째 인자를 0으로 둠으로써, splice 메서드를 통해 값을 추가하는 것도 가능하다. let members3 = ['1', '2', '3', '4', '5']; members3.splice(1, 0, 'NEW1', 'NEW2'); console.log(members3); // output: [ '1', 'NEW1', 'NEW2', '2', '3', '4', '5' ]
📌 shift 메소드
배열의 첫 요소를 삭제하고 나머지 요소들은 앞으로 밀어준다.
let members = ['a', 'b', 'c', 'd', 'e'];
members.shift();
console.log(members); // output: [ 'b', 'c', 'd', 'e' ]
📌 unshift 메소드
배열의 첫 요소로 값을 추가한다.
let members = ['a', 'b', 'c', 'd', 'e'];
members.unshift('new1');
console.log(members); // output: ['new1', 'a', 'b', 'c', 'd', 'e']📌 pop 메소드
배열의 마지막 요소를 삭제한다.
let members = ['a', 'b', 'c', 'd', 'e'];
members.pop();
console.log(members); // output: ['a', 'b', 'c', 'd']📌 push 메소드
배열의 마지막 요소로 값을 추가한다.
let members = ['a', 'b', 'c', 'd', 'e'];
members.push('new1');
console.log(members); // output: ['a', 'b', 'c', 'd', 'e', 'new1']이 밖에 다양한 메소드들은 아래 링크를 통해 더욱 자세히 알아볼 수 있다: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
Outro
배열도 객체이므로 객체와 동일하게 값을 추가, 수정하며 다룰 수 있다. 하지만 JavaScript는 배열이라는 특별한 객체에게 사용의 용이성과 편리함을 위해 다양한 메소드들을 제공하고 있다. 이러한 메소드들을 잘 활용한다면 좀 더 코드를 간결하고 깔끔하게 구성할 수 있을 것이다.
단순히 내가 익숙한 방법, 편한 방법이 아닌 조금 더 가독성좋은 깔끔한, 그리고 더욱 안정적인 코드를 짜는 자세를 가지며 상황에 맞는 메소드를 활용할 줄 아는 능력이 기본기를 다시 배워가고 있는 나에게 가장 중요한 자세가 아닐까 싶다. 깔끔하고 유연한 개발자가 되는 그 날까지 오늘도 화이팅이다.
