-
자바스크립트 기본 - 배열JavaScript/생활코딩 2018. 11. 16. 14:47
배열 - https://opentutorials.org/course/743/4736
배열(array)은 연관되어있는 데이터들을 모아서 통으로 관리하기 위해서 사용하는 데이터의 형식
배열은 데이터들을 담는 그릇이다. 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이다.
a. 배열의 생성
배열을 만드는 방법은 아래와 같다.
변수를 선언하고 변수안에 대괄호를 이용하여 배열을 만들어 준다.
회원들의 정보를 각 각 다른 변수에 저장하는 것보다 하나의 변수에 한꺼번에 저장할 때 아래와 같이 배열을 사용할 수 있다.
'' 안에 있는 각 각의 값들은 원소라고 부른다.
var member = ['egoing', 'k8805', 'sorialgi']
배열을 생성하게 되면 순서대로 원소마다 고유한 번호, 즉 식별자를 갖게 된다.
식별자는 색인, index라고 부른다.
배열에서 특정한 원소를 부르고 싶을 때 색인을 부르면 된다.
egoing
k8805
sorialgi
0
1
2
member[0]을 부르면 egoing
member[1]을 부르면 k8805
member[2]을 부르면 sorialgi 를 반환하게 된다.
b. 배열의 필요성
함수를 사용 하여 return 값을 반환 할 때, 여러 개의 인자를 받을 수 있지만 return값은 한 개의 값만 반환 할 수 있다.
하지만 return값에 배열을 넣게 될 경우 return값으로 여러 개의 값을 반환 할 수 있다.
예제
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
function get_members(){
return ['egoing', 'k8805', 'sorialgi']; //return값을 배열형식으로 만든다.
}
var members = get_members(); //함수를 변수안에 넣는다.
document.write(members[0]); //색인을 부름으로써 각 각의 원소값을 가져올 수 있다.
document.write(members[1]);
document.write(members[2]);
</script>
</body>
</html>
예제를 크롬에서 열게 되면 document.write의 결과 값이 나타난다.
결과값
egoingk8805sorialgi
c. 배열의 사용
배열에 담겨 있는 값인 색인,index값을 모두 기억할 수 없다. 그 값들이 100개, 1000개가 될 수도 있기 때문이다.
색인 값들은 불러올 수 있는 방법은 반복문을 통해서 할 수 있다.
배열은 반복문과 함께 사용할 때 효율적으로 사용할 수 있다.
위의 예제처럼 document.write를 사용하여 원소값을 불러 올 수 있지만 만약 원소값이 추가되거나 삭제되는 경우 document.write값도 같이 추가하거나 삭제해야 한다. 이런 상황을 없게 하기 위해 반복문이 필요하다.
예제2
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
function get_members(){
return ['egoing', 'k8805', 'sorialgi']; //원소값이 추가, 삭제되도 for구문의 members.length로 인해 결과 값은 원소값에 따라 달라 질 수 있다.
}
members = get_members();
// members.length는 배열에 담긴 값의 숫자를 알려준다.
for(i = 0; i < members.length; i++){
// members[i].toUpperCase()는 members[i]에 담긴 문자를 대문자로 변환해준다.
document.write(members[i].toUpperCase());
document.write('<br />');
}
</script>
</body>
</html>
예제를 크롬에서 열게 되면 for문을 통한 document.write의 결과 값이 나타난다.
결과값
EGOING
K8805
SORIALGI
d. 배열의 추가 및 삭제
배열의 원소 추가
배열의 내장함수 중에 push를 사용하면 배열 안에 담겨 있는 원소 중 맨 마지막에 새로운 원소를 추가할 수 있다.
push는 하나의 원소만 추가할 수 있다.
var li = ['a', 'b', 'c', 'd', 'e'];
li.push('f');
alert(li);
결과값 - a,b,c,d,e,f
여러 개의 원소를 마지막에 추가하려면 concat 이라는 내장함수를 사용하면 된다.
var li = ['a', 'b', 'c', 'd', 'e'];
li = li.concat(['f', 'g']);
alert(li);
결과값 - a,b,c,d,e,f,g
배열 안에 맨 앞쪽에 새로운 원소를 추가하려면 unshift를 사용하면 된다.
앞쪽에 원소를 추가하게 되면 색인, index값도 하나씩 뒤로 밀리게 된다.
var li = ['a', 'b', 'c', 'd', 'e'];
li.unshift('z');
alert(li);
결과값 - z,a,b,c,d,e
배열의 원하는 곳, 즉 맨앞 맨뒤가 아닌 중간 어떤 곳에 원소를 넣고 싶다면 splice를 사용하면 된다.
splice를 사용하는 방법은 조금 복잡하다. 물론 사용방법을 다 외울필요는 없다.
아래의 표는 splice를 사용하는 방법이다.
인자명 데이터형 필수/옵션 설명 index number 필수 배열에 추가할 특정 배열의 위치를 가르키는 index howmany number 필수 index에서부터 제거될 원소들의 수. index부터 index+howmany에 해당하는 원소들은 삭제된다. 이 값이 0이면 어떠한 원소도 삭제되지 않는다. element1,...,elementN number 옵션 index와 index+howmany 사이에 추가될 값 var li = ['a', 'b', 'c', 'd', 'e'];
li.splice(2, 0, 'B'); //2번째 원소인 'c'의 자리에 어떤 원소도 삭제하지 않고 'B'를 추가해라// li.splice(2, 1, 'B'); 만약 구문이 이렇게 바뀌었다면 2번째 원소인 'c'의 자리에 'c'를 삭제하고 'B'를 추가해라 로 바뀝니다. 이때는 결과값이 a,b,B,d,e로 변합니다.
alert(li);
결과값 - a,b,B,c,d,e
- 배열의 원소 삭제 및 정렬
배열의 첫번째 원소를 삭제하려면 shift를 사용하면 된다.
var li = ['a', 'b', 'c', 'd', 'e'];
li.shift();
alert(li);
결과값 - b,c,d,e
배열의 마지막 원소를 삭제하려면 pop을 사용하면 된다.
var li = ['a', 'b', 'c', 'd', 'e'];
li.pop();
alert(li);
결과값 - a,b,c,d
배열을 정렬할 수 있는 함수가 있다.
일반 정렬을 하고 싶을 때는 sort를 사용하면 된다.
결과값은 정렬상태로 바뀌는데 정렬 후에 배열변수인 li를 호출해보면 기존상태가 아닌 정렬로 바뀌어 있다.
var li = ['c', 'e', 'a', 'b', 'd'];
li.sort();
alert(li);
결과값 - a,b,c,d,e
정렬을 역순으로 할 수도 있는데 이때는 reverse를 사용하면 된다.
역순의 기준은 배열의 현재상태를 기준으로 역순이므로 문자상 역순으로 정렬하고 싶을 때는 sort를 사용한 뒤에 reverse를 사용해야 한다.
var li = ['c', 'e', 'a', 'b', 'd'];
li.reverse();
alert(li);
결과값 - d,b,a,e,c
'JavaScript > 생활코딩' 카테고리의 다른 글
자바스크립트 기본 - 모듈 (0) 2018.11.19 자바스크립트 기본 - 객체 (0) 2018.11.16 자바스크립트 기본 - 함수 (0) 2018.11.15 자바스크립트 기본 - 반복문 (0) 2018.11.15 자바스크립트 기본 - 조건문 (0) 2018.11.14 댓글