[JS] #4-1 배열(array)

1. 배열이 뭐야?

 

 배열은 다양한 자료를 일정 형태로 그룹화하는 것을 말한다.

 배열은 연속성을 띈 자료들을 나열하기에 열거형이라 부르기도 하고 컬렉션(collection)이라고 부르기도 한다.

 

 배열은 하나의 변수에 1개 이상의 값을 저장할 수 있는 공간을 만들어주며

 element(요소)와 index(순서)로 구분되어있다.

 index를 먼저 나누어준 뒤(주로 0부터 시작한다) 그 안에 element를 채워넣는다.

 

 만약 kor이라는 변수를 선언하고 그 안에 10, 20, 30의 데이터를 저장했다고 하자.

 그리고 그 각각의 데이터들을 나눠서 각각 저장한다.

 이 과정을 배열이라고 부른다.

 배열에서는 kor[]안에 순서를 정하여 값을 넣어 놓는다.

 이 때 kor[0]이 index, 10이 element가 된다.

 

 

 참조 사이트 : https://www.w3schools.com/js/js_arrays.asp

JavaScript Arrays

 

 

2. 우선 코딩해보자

 

 1) kor 변수 배열 만들기

 위의 그림처럼 코딩을 해보자!

let kor=[];
kor[0]=10;
kor[1]=20;
kor[2]=30;

 먼저 kor이란 변수를 선언해주고 이 kor이란 변수가 배열임을 선언해준다(kor=[ ]).

 그리고 kor[] 안에 인덱스를 나눈 뒤 element를 선언해준다.

 출력값을 보아보자.

출력된 모습

 

 우리가 보기에는 102030 이다. 십만 이천 삼십으로 보인다.

 하지만 프로그램상으론 절대 그렇게 인식되어지지 않고 10 | 20 | 30 으로 구분되어 인식이 되는 것이다.

 

 * 자바와 자바스크립트에서 배열에 대한 문법은 차이가 있으니 헷갈리지 않도록 각각 잘 알아두자

 

 2) names 변수 배열 만들기

 배열에 익숙해지기 위해 이번에는 names 변수를 만들어보자.

let names=[];
names[0]="무궁화"
names[1]="개나리"
names[2]="진달래"

document.write(names[0]);
document.write(names[1]);
document.write(names[2]);

 

 3) 배열을 선언하는 두 가지 문법

let points=[];
let points=new Array();

 

 과거에는 하단의 문법으로 배열을 많이 선언했지만 요즘 추세는 상단의 문법으로 배열을 선언한다.

 그리고 자바에서는 여전히 하단의 문법으로 사용하기도 한다.

 그럼에도 상단에 있는 문법을 더 자주 사용하길 권한다.

 

 4) 배열 선언 및 초기화

 - 동시 선언

 배열은 동시에 선언할 수도 있다.

 아래의 코드를 확인해보자.

let points = [40, 100, 25, 3, 7];
document.write(points[0]); // 40
document.write(points[1]); // 100
document.write(points[2]); // 25
document.write(points[3]); // 3
document.write(points[4]); // 7
document.write("<hr>");

 

 points 라는 변수에 여러 배열을 선언하였다.

 이 때 0번째 배열은 숫자 몇일까?

 그렇다, 40이다.

 

 이런 식으로 여러 배열을 동시에 선언하면 자바 스크립트가 알아서 인덱스를 붙여준다.

 

 - 요소와 관련된 문법들

 배열 안에서도 다양한 문법들을 사용할 수 있다.

 배열명 뒤에 " . " 을 붙이면 수많은 목록들이 나온다.

 이것들을 메소드(기능) 라 부른다.

 

 다 알아볼 순 없지만 자주 쓰이는 것들을 다음 게시물에서 몇 가지 알아보려한다.

 우선적으론 아래의 length 메소드만 알아두자!

 

 * 배열명.length : 변수가 총 몇 개의 배열로 나누어져 있는지 알려준다.

 * 배열명 : 변수가 가지고 있는 배열을 모두 알려준다.

 

 

3. 수많은 배열 한번에 지정해주기

 

 배열을 나열하다보니 100개의 배열이 생겼다고 해보자.

 우리가 그 배열들을 하나 하나 일일이 나열하기엔 너무나 어렵다.

 그래서 위에서 언급했던 length문법을 활용하여 배열을 손쉽게 나열한다.

 

 아래의 코드를 확인해보자.

for(let i=0; i<points.length; i++) {
	document.write(points[i]);
}

 i의 범위를 points.length 미만으로 주었다.

 * 여기서 꼭 미만으로 주어야 한다!! 왜냐하면 배열은 자동으로 0번째부터 계산하지만 length는 1번째부터 계산하기 때문이다.

 

 그리고 points 변수의 배열 값에 i를 대입하면 변수가 가진 모든 배열을 지정할 수 있는 것이다.

 배열에서 흔히 쓰이는 문법이다.

 

 

4. 자바는 안되지만 자바 스크립트는 된다요~

 

 먼저 아래의 코드를 확인해보자.

let fruits=["Banana", "Orange", "Apple", "Mango"];
fruits[6]="lemon";

 

 위의 문법은 다른 프로그래밍 언어에서는 허용이 되지 않는 문법이다.

 한번 선언한 배열에 이런 식으로 6번째 요소를 추가해주지 않는 곳이 많기 때문이다.

 

 현재 fruits의 배열의 수는 4개이므로 length값을 출력시키면 4가 나오지만,

 fruits[6] 의 인덱스 값을 또 하나 선언해주었으므로 length값을 출력시키면 7이 나와버린다.

 (왜 7일까! 다시 한 번 말하지만 인덱스는 0번째부터 시작됨을 잊지 말자!)