[ 자바스크립트 ] 빈칸이 들어있는 배열( Javascript: The blanks in array )

아래 예문에서,
배열의 길이(length)가 3이 나올 거라고 예상하게 되지만, 실제 결과는 2이다.

In the example below,
the length of array seems to be 3, but the actual length is 2.

 
<button onclick="testing()"> Click me </button>

<p id="arrLength"> </p>
<p id="arrValue"> </p>

<p id="item0"> </p>
<p id="item1"> </p>
<p id="item2"> </p>

<script type="text/javascript">
function testing () { 

    var myArray = [ , , ]; 

    arrLength.innerHTML = myArray.length; 

    arrValue.innerHTML = "[ " + myArray + " ]"; 

    item0.innerHTML = "" + myArray[ 0 ]; 
    item1.innerHTML = "" + myArray[ 1 ]; 
    item2.innerHTML = "" + myArray[ 2 ]; 
} 
</script>
 

배열의 끝부분에 빈칸이 연달아서 들어가 있을 경우,
마지막 빈칸은 삭제된다고 보면 된다.

참고로, 위에서 볼 수 있듯이,
배열에 있는 빈칸 myArray[1]의 값도 "undefined"이고,
배열에 들어있지 않은 myArray[2]의 값도 "undefined"이다.

That is, if there are multiple blanks at the end of the array, the last blank is deleted.

And as you can see above,
a myArray[1], blank in array, is "undefined",
and so does myArray[2], that not included in array.

하지만, 아래 예문처럼 배열의 length를 직접 지정해주었을 때에는,
결과가 달라진다.

But as shown in the examples below,
if you specify directly the length of array, the result is different.

 
<button onclick="testing()"> Click me </button>

<p id="arrLength"> </p>
<p id="arrValue"> </p>

<p id="item0"> </p>
<p id="item1"> </p>
<p id="item2"> </p>

<script type="text/javascript">
function testing () { 

    var myArray = [ , , ]; 

    myArray.length = 3; 

    arrLength.innerHTML = myArray.length; 

    arrValue.innerHTML = "[ " + myArray + " ]"; 

    item0.innerHTML = "" + myArray[ 0 ]; 
    item1.innerHTML = "" + myArray[ 1 ]; 
    item2.innerHTML = "" + myArray[ 2 ]; 
} 
</script>
 

 
<button onclick="testing()"> Click me </button>

<p id="arrLength"> </p>
<p id="arrValue"> </p>

<p id="item0"> </p>
<p id="item1"> </p>
<p id="item2"> </p>

<script type="text/javascript">
function testing () { 

    var myArray = [ ]; 

    myArray.length = 3; 

    arrLength.innerHTML = myArray.length; 

    arrValue.innerHTML = "[ " + myArray + " ]"; 

    item0.innerHTML = "" + myArray[ 0 ]; 
    item1.innerHTML = "" + myArray[ 1 ]; 
    item2.innerHTML = "" + myArray[ 2 ]; 
} 
</script>
 

 
<button onclick="testing()"> Click me </button>

<p id="arrLength"> </p>
<p id="arrValue"> </p>

<p id="item0"> </p>
<p id="item1"> </p>
<p id="item2"> </p>

<script type="text/javascript">
function testing () { 

    var myArray = new Array( 3 ); 

    arrLength.innerHTML = myArray.length; 

    arrValue.innerHTML = "[ " + myArray + " ]"; 

    item0.innerHTML = "" + myArray[ 0 ]; 
    item1.innerHTML = "" + myArray[ 1 ]; 
    item2.innerHTML = "" + myArray[ 2 ]; 
} 
</script>
 

---

두 배열을 하나로 합쳐주는 concat을 사용해본다면, 다음과 같다.
If you use "concat" to join two arrays, the results are below.

var arrA = [ 4 ,  ]; 
var arrB = [  , 1 ]; 

var arrC = [ 4 ,  , ]; 
var arrD = [  ,  , 1 ]; 

	예상했던 결과 ( Expected results )	실제 결과 ( Actual results )
arrA.concat( arrB )	length : 4 value : [ 4 , , , 1 ]	length : 3 value : [ 4 , , 1 ]
arrB.concat( arrA )	length : 4 value : [ , 1 , 4 , ]	length : 3 value : [ , 1 , 4 ]
arrC.concat( arrD )	length : 6 value : [ 4 , , , , , 1 ]	length : 5 value : [ 4 , , , , 1 ]
arrD.concat( arrC )	length : 6 value : [ , , 1 , 4 , , ]	length : 5 value : [ , , 1 , 4 , ]

---

var arrA = [ ]; 
      arrA.length = 2; 
      arrA [ 0 ] = 4; 

var arrB = [ ]; 
      arrB.length = 2; 
      arrB [ 1 ] = 1; 

var arrC = [ ]; 
      arrC.length = 3; 
      arrC [ 0 ] = 4; 

var arrD = [ ]; 
      arrD.length = 3; 
      arrD [ 2 ] = 1; 

실행한 결과 ( Executed results )

arrA.concat( arrB ) ⇒ length: 4 , value: [ 4 , , , 1 ]

arrB.concat( arrA ) ⇒ length: 4 , value: [ , 1 , 4 , ]

arrC.concat( arrD ) ⇒ length: 6 , value: [ 4 , , , , , 1 ]

arrD.concat( arrC ) ⇒ length: 6 , value: [ , , 1 , 4 , , ]

---

var arrA = new Array( 2 ); 
     arrA[ 0 ] = 4; 

var arrB = new Array( 2 ); 
     arrB[ 1 ] = 1; 

var arrC = new Array( 3 ); 
     arrC[ 0 ] = 4; 

var arrD = new Array( 3 ); 
     arrD[ 2 ] = 1; 

실행한 결과 ( Executed results )

arrA.concat( arrB ) ⇒ length: 4 , value: [ 4 , , , 1 ]

arrB.concat( arrA ) ⇒ length: 4 , value: [ , 1 , 4 , ]

arrC.concat( arrD ) ⇒ length: 6 , value: [ 4 , , , , , 1 ]

arrD.concat( arrC ) ⇒ length: 6 , value: [ , , 1 , 4 , , ]

---

이번에는 indexOf를 이용하여, 배열에서 undefined를 검색해보자.
Using "indexOf" of array, let's search "undefined".

 
<button onclick="testing()"> Click me </button>

<p id="resultA"> </p>
<p id="resultB"> </p>
<p id="resultC"> </p>

<script type="text/javascript">
function testing () { 

    var arrA = [ , , ]; 

    var arrB = new Array( 3 ); 

    var arrC = [ ]; 
         arrC.length = 3; 

    resultA.innerHTML = arrA.indexOf( undefined ); 
    resultB.innerHTML = arrB.indexOf( undefined ); 
    resultC.innerHTML = arrC.indexOf( undefined ); 
}
</script>
 

배열 안에 undefined를 직접 넣어줬을 때에는 제대로 찾아온다.
If you put directly "undefined" in the array, it searches correctly.

 
<button onclick="testing()"> Click me </button>

<p id="demo"> </p>

<script type="text/javascript">
function testing () { 

    var myArray = [ , , undefined ]; 

    demo.innerHTML = myArray.indexOf( undefined ); 
} 
</script>
 

---

빈칸이 들어있는 배열에서, every, some, reduce 등을 실행해보시라.
결과가 생각했던 것과 다를테니까 말이다.

On the array that includes blanks, try running every, some, reduce and etc.
The result will be different from what you expected.

함께 볼만한 글 (Reference) :

• 한글 (Korean site) ☞ 18 배열의 새 기능
• 영문 (English site) ☞ 18. New Array features

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요 *^^*
If this article is helpful to you, please click the heart button below. *^^*