차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:javascript:javascript_note:js_arrays [2021/04/26 13:28]
emblim98 [Avoid new Array()]
+++ wiki:javascript:javascript_note:js_arrays [2023/01/13 18:44] (현재)
@@ 줄 13: / 줄 13: @@
 \\
 <code javascript>
-  <script>
+let cars = ["Saab", "Volvo", "BMW"];
-    let cars = ["Saab", "Volvo", "BMW"];
+document.getElementById("demo").innerHTML = cars;
-    document.getElementById("demo").innerHTML = cars;
-  </script>
 </code>
@@ 줄 50: / 줄 48: @@
 공백과 줄 바꿈(line breaks)은 중요하지 않습니다. 선언은 여러 줄에 걸쳐있을 수 있습니다.\\
 <code javascript>
-    let cars = [
+let cars = [
-      "Saab",
+  "Saab",
-      "Volvo",
+  "Volvo",
-      "BMW"
+  "BMW"
-    ];
+];
 </code>
@@ 줄 200: / 줄 198: @@
 ''%%Array.forEach()%%'' 메서드를 사용할 수도 있습니다.\\
 <code javascript>
-    let fruits, text;
+let fruits, text;
-    fruits = ["Banana", "Orange", "Apple", "Mango"];
+fruits = ["Banana", "Orange", "Apple", "Mango"];
-    text = "<ul>";
+text = "<ul>";
-    fruits.forEach(myFunction);
+fruits.forEach(myFunction);
-    text += "</ul>";
+text += "</ul>";
-    document.getElementById("demo").innerHTML = text;
+document.getElementById("demo").innerHTML = text;
-    function myFunction(value) {
+function myFunction(value) {
-      text += "<li>" + value + "</li>";
+text += "<li>" + value + "</li>";
-    }
+}
 </code>
@@ 줄 319: / 줄 317: @@
 \\
 <code javascript>
-// let points = new Array(40, 100, 1, 5, 25, 10);
+//
-    let points = [40, 100, 1, 5, 25, 10];
+let points = new Array(40, 100, 1, 5, 25, 10);
-    document.getElementById("demo").innerHTML = points[0];
+let points = [40, 100, 1, 5, 25, 10];
-    console.log(points);    // 40
+document.getElementById("demo").innerHTML = points[0];
+console.log(points);    // 40
 </code>
+\\
+''new'' 키워드는 코드를 복잡하게 만듭니다. 또한 예상치 못한 결과가 발생할 수 있습니다.\\
+\\
+<code javascript>
+let points = new Array(40, 100);  // Creates an array with two elements ( 40 and 100)
+</code>
+\\
+위의 요소 중에서 하나를 제거하면 아래와 같이 됩니다.\\
+<code javascript>
+let points = new Array(40);
+document.getElementById("demo").innerHTML = points[0];
+// Creates an array with 40 undefined elements!!!
+</code>
+=====How to Recognize an Array=====
+일반적인 질문: 변수가 배열인지 어떻게 알 수 있습니까?\\
+\\
+문제는 %%JavaScript%% 연산자 ''%%typeof%%''가 "''object''"를 반환한다는 것입니다.\\
+\\
+<code javascript>
+let fruits = ["Banana", "Orange", "Apple", "Mango"];
+document.getElementById("demo").innerHTML = typeof fruits;  // object
+</code>
+\\
+%%typeof%% 연산자는 %%JavaScript%% 배열이 오브젝트이기 때문에 오브젝트를 반환합니다.\\
+\\
+====Solution 1:====
+이 문제를 해결하기 위해, %%ECMAScript 5%%는 새로운 메서드 ''%%Array.isArray()%%''를 정의합니다.\\
+\\
+<code javascript>
+let fruits = ["Banana", "Orange", "Apple", "Mango"];
+    document.getElementById("demo").innerHTML = Array.isArray(fruits);  // true
+</code>
+\\
+이 솔루션의 문제점은 %%ECMAScript 5%%가 구번전의 브라우저에서 지원되지 않는다는 것입니다.\\
+\\
+====Solution 2:====
+이 문제를 해결하기 위해, 고유한 ''%%isArray()%%'' 함수를 만들 수 있습니다:\\
+<code javascript>
+let fruits = ["Banana", "Orange", "Apple", "Mango"];
+document.getElementById("demo").innerHTML = isArray(fruits);
+function isArray(myArray) {
+return myArray.constructor.toString().indexOf("Array") > -1;
+} // true
+</code>
+\\
+위의 함수는 인수가 배열이면 항상 true를 반환합니다.\\
+\\
+또는 더 정확하게는, 오브젝트 프로토 타입에 %%"Array"%%라는 단어가 포함되어 있으면, true를 반환합니다.\\
+====Solution 3:====
+''instanceof'' 연산자는 주어진 생성자에 의해 오브젝트가 생성된 경우 true를 반환합니다.\\
+\\
+<code javascript>
+let fruits = ["Banana", "Orange", "Apple", "Mango"];
+document.getElementById("demo").innerHTML = fruits instanceof Array;  // true
+</code>

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구