2021-04-02
배열은 js 변수에 여러 가지 값을 저장할 수 있도록 하는 데이터 형태이다. 이러한 배열을 대하여 알아보도록 하자.
예제로는 사람의 이름을 저장하는 name라는 배열을 만들어 사용할 것이다.
- 선언
방법1. 변수에 바로 배열 대입하기
배열을 선언 시 [ ]로 각 항목을 감싸주어 선언을 하면 된다. 배열에서 시작 값은 항상 0부터 시작하는 점도 알아두자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var name1 = ["Abc", "King", "You"]
console.log(name1)
</script>
</head>
<body>
Hello World
</body>
</html>
방법 2. new Array( ) 연산자를 이용한 선언
사실 방법 2는 잘쓰지 않는다. 그 이유는 아무래도 코드에서 작성하는 양이 늘어나고, 실제 동작은 차이가 없기 때문이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var name1 = new Array("Abc", "King", "You")
console.log(name1)
</script>
</head>
<body>
Hello World
</body>
</html>
- 배열에 요소에 접근하는 방법
선언된 배열에 ["인덱스 번호"]를 주는 방식으로 각 인덱스에 접근할 수 있다. 예제에서는 name1 [0] / name1 [1]... 이런 식으로 접근할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var name1 = ["Abc", "King", "You"]
console.log(name1)
console.log(name1[0])
console.log(name1[1])
console.log(name1[2])
</script>
</head>
<body>
Hello World
</body>
</html>
결과를 보면 아래와 같이 각 인덱스 값이 String 형식으로 console에 출력되는 것을 확인할 수 있다.
- 배열에 요소를 수정하는 방법
예제에서의 두번째 값 King의 이름은 KingKing으로 변경한다고 해보자. 그러면 name1의 두 번째 인덱스 값에 변경하고자 하는 값을 대입해주면 된다. 코드는 아래와 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var name1 = ["Abc", "King", "You"]
console.log(name1)
console.log(name1[0])
console.log(name1[1])
console.log(name1[2])
console.log("----------------------------------------------")/* 경계선 */
name1[1] = "KingKing" // 원소값 변경
console.log(name1[0])
console.log(name1[1])
console.log(name1[2])
</script>
</head>
<body>
Hello World
</body>
</html>
결과를 확인해보면 변경된 인덱스 값이 정상적으로 console에 출력되는 것을 확인 할 수 있다.
- 배열의 길이 확인
현재 선언된 배열의 길이를 알고 싶을 경우 length라는 메소드를 사용하면 된다. 현재 name1의 인덱스는 총 3개로 3이라는 값이 출력될 것이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var name1 = ["Abc", "King", "You"]
console.log(name1)
console.log(name1.length) // 배열의 길이 확인
</script>
</head>
<body>
Hello World
</body>
</html>