WEB/JavaScript

[JavaScript] JS Arrays 배열에 대하여 알아보기

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>

저작자표시 비영리

'WEB > JavaScript' 카테고리의 다른 글

[JavaScript] JS String(문자열) 대 / 소 문자 변환 방법 (0)	2021.04.05
[JavaScript] JS String(문자열) 메소드 알아보기. (0)	2021.04.04
[JavaScript] JS Arrays sort() / reverse() 메소드 알아보기 (0)	2021.04.03
[JavaScript] JS 변수 키워드 let 과 var 알아보기 (0)	2021.03.21
[JavaScript] JS 변수 키워드 const 알아보기 (0)	2021.03.20

Contents

새소식

인기 검색어