자바스크립트 정리하며 배우기[13] - 배열(array) length 와 배열 메소드 push , pop, delete 요소 삭제

안녕하세요. Tay 입니다.

순차적으로 JS 게시물을 보고계시다면 배열의 length 가 무엇인지 아실겁니다.

배열 메소드는 이 length 를 기반으로 동작하고 있기때문에 매우 length 는 매우 중요한 프로퍼티 입니다.

이번에는 length 프로퍼티에 다시한번 다루면서 배열 메소드와 어떻게 관계가 있는지 알아보겠습니다.

length 프로퍼티

배열의 길이를 나타낸다.
모든 배열은 length 프로퍼티가 있다.
배열의 가장 큰 인덱스 + 1 값을 갖는다.

length 프로퍼티는 배열의 길이(원소 개수) 를 나타내지만, 실제로 원소개수와 일치 하는 것은 아니다.

단순히 배열 내에 가장 큰 인덱스 값에 1을 더한 값이다. 때문에 가장 큰 인덱스가 변경되면 length 또한 변경 된다.

즉, 빈 배열을 선언하고 배열 10번째 인덱스에 값을 저장하는 순간 length 는 11 이 된다.

아래 예제로 확인 해보자.

1) index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <!-- <script src="array.js"></script> -->
    <script src="length.js"></script>
  </body>
</html>

2) length.js

// array length test
var arr = [];
console.log(arr);

arr[10] = 10;
console.log(arr);

빈 배열 arr 를 생성 후 콘솔로 확인 했다. 그 후 arr[10] 에 10을 할당 했다.

각각의 결과는 어떻게 출력 될까?

Github Commit

결과 :

빈 배열은 요소가 아무것도 없다. 그렇기 때문에 length 가 0 이다.
10번 인덱스에 10을 넣었더니 0~9 까지가 undefined 이다. 그리고 length 는 11 이다.

위에서 설명 한 것 처럼, 빈 배열을 선언하고 어느 위치의 인덱스에 값을 할당하는 순간 length 는 변했다.

중요한 점은, length 가 변경 되었어도 실제 메모리는 배열 요소의 값을 실제로 넣은 경우만 발생한다.

length 프로퍼티는 동적으로 변하고, 그것을 우리가 직접 변경 할 수도있다. 아래 코드로 확인해보자.

1) length.js

// array length test
var arr = [];
console.log(arr);

arr[10] = 10;
console.log(arr);

// push and pop length test
var number = ["one", "two", "three"];
console.log(number);

number.length = 5;
console.log(number);

기존 코드에 push and pop length test 코드만 추가했다.

3개의 요소를 가진 배열의 length 를 임의로 5로 변경했다. 어떤 결과가 출력 될까?

Github Commit

결과 :

두번째 출력결과를 보면 length 길이가 5로 변경됐다.

또한, 배열의 길이가 변경 되면서 자동으로 할당되지 않은 인덱스를 undefined로 표기해준다.

이 length 프로퍼티는 일부 배열 메소드와 관계가 있고 결과에 영향을 미친다.

push 와 pop 이 대표적인 예시이다.

Push and Pop

자바스크립트는 배열에서 사용가능한 다양한 표준메서드를 제공한다.

배열 메소드 중에는 push 와 pop 이 있고 이 메서드들은 length 와 관계가 있다.

먼저 push 와 pop 이 뭔지 아래 사진을 통해 알아보자.

pop : Removes the last element from an array and returns it.

- 배열의 마지막 요소를 제거한다.
push : Appends new elements to an array, and returns the new length of the array.

- 배열 끝에 item(요소) 를 추가한다.

이해를 돕기 위해 아래 예제로 확인해보자.

1) length.js

// array length test
var arr = [];
console.log(arr);

arr[10] = 10;
console.log(arr);

// push and pop length test
var number = ["one", "two", "three"];
console.log(number);

number.length = 5;
console.log(number);

number.push("four");
console.log(number);

number.length += 1;
console.log(number);

number.pop();
console.log(number);

위에서 생성한 number 배열에 이어서 작성했다.

요소가 3인 배열을 생성한다.
length 를 5로 변경한다.
push 로 요소를 추가한다.
length + 1 을 한다.
pop( ) 을 실행한다.

위 예제의 내용은 이렇다. 과연 결과는 어떻게 출력 될까?

Github Commit

결과 :

위 내용만 봐도 파악이 가능하다. 우선 크롬에서 prototype 을 확인해봤다.

프로토타입을 보면 pop 과 push 가 있는 것을 확인할 수 있다. 그 외 메소드들도 있는 것을 알 수 있다.

익스플로러 콘솔을 확인했다. 이 사진에서는 length 의 변화를 봐주길 바란다.

데이터가 추가 되고 제거 되면서 length 가 변하는 것을 알 수 있을 것이다.

이처럼 배열에서 사용가능한 표준 메소드 중에서는 length 기반으로 동작하는 메소드들이 있다.

그러므로, length 프로퍼티는 배열 메서드의 동작에 영향을 줄 수 있을만큼 배열에서 중요한 프로퍼티이다.

delete - 배열 요소 삭제

delete 를 통해서 배열의 요소를 삭제할 수 있다.

1) length.js

// array length test
var arr = [];
console.log(arr);

arr[10] = 10;
console.log(arr);

// push and pop length test
var number = ["one", "two", "three"];
console.log(number);

number.length = 5;
console.log(number);

number.push("four");
console.log(number);

number.length += 1;
console.log(number);

number.pop();
console.log(number);

delete number[1];
console.log(number);

Github Commit

결과 :

delete number[1]; 을 수행했더니, 인덱스 1번의 값(two) 가 삭제되는 것을 확인했다.

하지만, 배열의 크기가 변동된 것은 아니므로 length 는 6인 것을 확인할 수 있다.

정리 :

length 는 배열의 길이를 나타내고, 모든 배열은 length 프로퍼티가 있다.
length 의 값은 배열의 가장 큰 인덱스 + 1 이다.
배열에서 사용하는 표준 메소드 중에서는 length 기반으로 동작한다.
length 만큼 메모리가 발생되는 것이 아니라, 배열 내에 실제로 값을 가진 요소들만 메모리가 발생된다.
delete 배열이름[인덱스] 를 통해서 배열요소를 삭제할 수 있다.

이 글은 개인 공부목적으로 작성되었습니다.

정보가 잘못 되거나 궁금한 사항은 댓글로 부탁드립니다!! 읽어주셔서 감사합니다.

'JavaScript > Basic-Javascript' 카테고리의 다른 글

자바스크립트 정리하며 배우기[15] - 함수(function) 생성방법 3가지 (0)	2020.01.22
자바스크립트 정리하며 배우기[14] - 연산자(Operators) (0)	2020.01.21
자바스크립트 정리하며 배우기[12] - 배열 개념 및 특성, 배열 선언 방법, 요소 생성, 프로퍼티 생성과 삭제 (0)	2020.01.07
자바스크립트 정리하며 배우기[11] - 프로토타입 객체(prototype), 부모객체 상속 (0)	2020.01.07
자바스크립트 정리하며 배우기[10] - 참조(reference) 타입 비교(compare) (0)	2020.01.07

그렇게 개발자가 된다

자바스크립트 정리하며 배우기[13] - 배열(array) length 와 배열 메소드 push , pop, delete 요소 삭제

length 프로퍼티

Push and Pop

delete - 배열 요소 삭제

정리 :

'JavaScript > Basic-Javascript' 카테고리의 다른 글

티스토리툴바

자바스크립트 정리하며 배우기[13] - 배열(array) length 와 배열 메소드 push , pop, delete 요소 삭제

length 프로퍼티

Push and Pop

delete - 배열 요소 삭제

정리 :

'JavaScript > Basic-Javascript' 카테고리의 다른 글

'JavaScript/Basic-Javascript' Related Articles

티스토리툴바