JavaScript Tutorial.24

ansunny1170·2021년 12월 12일

JavaScript w3schools 공부

w3schools.JS Tutorial(웹제어용)

목록 보기

24/63

JS ARRAYS

배열은 둘 이상의 값을 가질 수 있는 특수 변수이다.

Why Using an Array?

항목 목록이 있는 경우 자동차를 단일 변수에 저장하면 다음과 같을 수 있다 :

let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";

하지만 자동차를 반복해서 특정 자동차를 찾으려면 어떻게 해야 할까?
그리고 3대가 아니라 300대가 있다면 어떨까?
이때 Array[]를 사용한다.

배열은 하나의 이름으로 많은 값을 가질 수 있으며, 인덱스 번호를 참조하여 값에 접근할 수 있다.

Creating an Array

배열 리터럴을 사용하는 것이 JS배열을 만드는 가장 쉬운 방법이다 :

const array_name = [item1, item2, ...];

※ const 키워드로 배열을 선언하는 것이 일반적이다. 아래 JS Array const에서 더 자세히 알 수 있다. (참조 : https://www.w3schools.com/js/js_array_const.asp)

공백과 줄 바꿈은 중요하지 않다. 선언은 여러줄에 걸쳐 있을 수 있다.

배열을 만든 다음 요소를 제공할 수도 있다.(초기화 가능)

Using the JavaScript Keyword new

다음 예제에서는 Array를 만들고 값을 할당한다 :

위 두 예제는 동일하다. new Array()를 사용할 필요가 없다. 단순함과 가독성 및 실행속도의 유리함을 위해 배열 리터럴 방법을 사용하자.

Accessing Array Elements

인덱스 번호를 참조하여 배열 요소에 접근한다 :

참고 : 배열 인덱스는 0부터 시작한다.

Changing an Array Element

아래 예제는 car[]의 첫 번째 요소 값을 변경한다.

Access the Full Array

JS를 사용하면 배열 이름을 참조하여 전체 배열에 접근 할 수 있다 :

Arrays are Objects

배열은 특별한 유형의 객체이다. JS의 typeof연산자는 배열에 대해 object를 반환한다.
그러나 JS배열은 배열로 가장 잘 설명된다.
배열은 elements에 접근하기 위해 숫자를 사용한다.
즉 아래와 같이 person[0]은 John을 반환한다 :

개체는 이름을(속성,키) 사용하여 members에 접근하려한다. 아래 예제에서 person.firstName은 John을 반환한다 :

Array Elements Can Be Objects

JS변수는 객체가 될 수 있다. 배열은 특별한 종류의 객체다.
※이 때문에 동일한 배열에 다른 유형의 변수를 가질 수 있다.

배열에 객체를 가질 수 있다.
배열에 함수를 가질수 있다.
배열에 배열을 가질 수 있다.

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Array Properties and Methods

JS배열의 진정한 강점은 내장 배열 속성과 메서드이다 :

Array 메서드에 대한 자세한 내용은 다음장에서 다룬다.
(참조 : https://www.w3schools.com/js/js_array_methods.asp)

The length Property

배열의 length 속성은 배열(배열 요소의 수)의 길이를 반환한다.

length 속성은 항상 가장 높은 배열 인덱스 보다 하나 더 크다.

Accessing the First Array Element

Accessing the Last Array Element

Looping Array Elements

배열을 반복하는 한 가지 방법은 for루프를 사용하는 것이다.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>The best way to loop through an array is using a standard for loop:</p>

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

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;

let text = "<ul>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Array.forEach()함수를 사용할 수도 있다 :

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Array.forEach() calls a function for each array element.</p>

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

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];

let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
document.getElementById("demo").innerHTML = text;

function myFunction(value) {
  text += "<li>" + value + "</li>";
} 
</script>

</body>
</html>

Adding Array Elements

배열에 새 요소를 추가하는 가장 쉬운 방법은 push()메서드를 사용하는 것이다 :

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>The push method appends a new element to an array.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
  fruits.push("Lemon");
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

button을 누를 때마다, Lemon이 추가된다.

length속성을 사용하여 배열에 새 요소를 추가할 수도 있다 :

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>The length property provides an easy way to append new elements to an array without using the push() method.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
  fruits[fruits.length] = "Lemon";
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>