티스토리 뷰

Programming/JavaScript, jQuery

[javascript 5강] 배열

국브 2019. 2. 10. 00:00

 [javascript 5강] 배열



이번글에서는 배열에 대해서 알아보겠습니다.

무슨 언어이든 배열은 정말 많이 사용하는 형태입니다.

배열은 쉽게 말해 변수에 여러게의 값을 담는것입니다.

변수에 inedex 를 부여하여 변수 하나에 여러게의 값을 담아 꺼내고 넣을수 있습니다.

배열 내용에 들어가기전 이전내용을 링크해 두겠습니다.


 이전 글 링크 


2019/02/07 - [Programming/JavaScript, jQuery] - [javascript 1강] 자바스크립트 개요 및 개발환경설정


2019/02/09 - [Programming/JavaScript, jQuery] - [javascript 2강] 입출력 및 기본문법


2019/02/09 - [Programming/JavaScript, jQuery] - [javaScript 3강] 변수와 자료형


2019/02/10 - [Programming/JavaScript, jQuery] - [javascript 4강] 연산자





 배열 객체 생성방법


자바스크립트 배열은 list 나 array 를 사용할수있습니다.


 사용방법 

 

1. list 를 생성하는방법


var 변수명 = []

var 변수명 = [값1, 값2, ....]


2. array 를 생성하는 방법


var 변수명 = new Array();

var 변수명 = new Array(배열크기지정);

var 변수명 = new Array(값1,값2, ...);



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            var list1 = [];
            var list2 = [1,3,4,5];
            var array1 = new Array();
            var array2 = new Array(3);
            var array3 = new Array("니나노", 3, 2);
            
            console.log(list1);
            console.log(list2);
            console.log(array1);
            console.log(array2);
            console.log(array3);
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


console.log(list1); 에서는 var list1 = []; 라고 생성한 리스트를 출력한 결과로 "[]" 가 출력되는것을 확인할수 있습니다.

console.log(list2); 에서는 var list2 = [1,3,4,5]; 라고 생성한 리스트를 출력한 결과 길이가 4이며 [1,3,4,5] 의 리스트가 출력되는것을 확인할수 있습니다.

console.log(array1); 에서는 var array1 = new Array(); 라고 생성한 어레이를 출력한 결과 "[]" 가 출력되는것을 확인할수 있습니다.

console.log(array2); 에서는 var array2 = new Array(3); 라고 생성한 어레이를 출력한결과 일이가 3이며 값은 empty x 3 이 출력된것을 확인할수 있습니다.

(empty x 3 는 비어있는값 3개 라는 뜻입니다.)

console.log(array3); 에서는 var array3 = new Array("니나노", 3, 2); 라고 생성한 어레이를 출력한 결과 길이가 3이며 ["니나노",3,2] 의 값을 갖고 있는 어레이가 출력되는것을 확인할수 있습니다.




 배열 속성


배열에서도 속성을 사용할수 있습니다.

그중에서도 제일 많이 사용하는 배열의 길이를 구하는 length 입니다.

사용방법은 다음과 같습니다.


 사용방법 


배열변수명.length 



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            var list1 = [];
            var list2 = [1,3,4,5];
            var array1 = new Array();
            var array2 = new Array(3);
            var array3 = new Array("니나노", 3, 2);
            
            console.log(list1.length);
            console.log(list2.length);
            console.log(array1.length);
            console.log(array2.length);
            console.log(array3.length);
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


console.log(list1.length); 에서는 var list1 = []; 라고 생성하였기때문에 list1 의 길이는 0입니다.

console.log(list2.length); 에서는 var list1 = [1,3,4,5]; 라고 생성하였기때문에 list2 의 길이는 4입니다.

console.log(array1.length); 에서는 var array1 = new Array(); 라고 생성하였기때문에 array1 의 길이는 0입니다.

console.log(array2.length); 에서는 var array2 = new Array(3); 라고 생성하였기때문에 array2 의 길이는 3입니다. 

(Array 생성할때 숫자값을 입력해주면 길이가 지정됩니다.)

console.log(array3.length); 에서는 var array3 = new Array("니나노", 3, 2); 라고 생성하였기때문에 array3 의 길이는 3입니다. 





 배열 메소드


배열을 사용할때 배열 내장메소드를 많이 지원합니다.

다는 소계를 못해드리고.. 많이 사용하는 배열 메소드에 대해서만 알아보겠습니다.



 사용방법 

1. 인덱스 검색


배열변수명.indexOf(검색값);


2. 배열 정렬


배열변수명.sort();


3. 배열 순서 반전


배열변수명.reverse();


4. 배열 데이터 문자로 연결


배열변수명.join("연결값"); 또는 배열변수명.toString();


5. 배열 데이터 추가


배열변수명.push(값1,값2,...);


6. 배열 첫번째 데이터 삭제


배열변수명.shift();


7. 배열 마지막 데이터 삭제


배열변수명.pop();



 예제  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
 
            var array = new Array(1,3,2,7,8);
            
            console.log(array.indexOf(2));
            console.log(array.sort());
            console.log(array.reverse());
            console.log(array.join("/"));
            console.log(array.toString());
            console.log(typeof(array.toString()));
            array.shift()
            console.log(array);
            array.pop()
            console.log(array);
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


var array = new Array(1,3,2,7,8); 라고 array 라는 변수에 [1,3,2,7,8] 의 값을 갖는 어레이로 생성하였습니다.

console.log(array.indexOf(2));  에서 indexOf 를 활용해 숫자 2가 들어있는 위치를 실행하였습니다. 그결과 2라는 숫자가 나옵니다. 3번째에 있는대 왜 2번째라고 할까요?

그것은 첫번째 인덱스 즉 첫번째 값의 시작이 0 부터 시작합니다. 그래서 3번째에 있는 값은 인텍스 2번째입니다.

그래서 2가 출력됩니다.

console.log(array.sort()); 에서 sort 함수를 활용해여 정렬한 결과 [1,2,3,7,8] 정렬된 값을 확인할수 있습니다.

console.log(array.reverse()); 에서 reverse 함수를 활용해여 역정렬한 결과 [8,7,3,2,1] 역정렬된 값을 확인할수 있습니다.

console.log(array.join("/")); 에서 join 함수를 활용해 "/" 로 값을 붙여 문자로 출력해보았습니다. 그결과 "8/7/3/2/1" 값을 확인할수 있습니다.

console.log(array.toString()); 에서는 toString 함수를 활용해 문자로 변환해보았습니다. 그결과 값의 연결이 "," 로 되었고 "8,7,3,2,1" 값이 출력되는것을 확인할수 있습니다.

console.log(typeof(array.toString())); toString 함수를 사용하여 나온값이 문자열이 맞는지 typeof 함수를 활용하여 출력해보았습니다. 그결과 string 이라고 나오는 것을 확인할수 있습니다.

array.shift() 는 array 변수에 shift 함수를 사용하여 첫번째 값을 삭제 하였습니다.

console.log(array); shift 를 사용한후 출력한값은 [7,3,2,1] 입니다.

array.pop() 는 array 변수에 pop함수를 사용하여 마지막 값을 삭제 하였습니다.

console.log(array);  pop 함수를 사용한후 출력한 값은 [7,3,2] 입니다.




 글을 마치며..


이렇게 해서 이번글에서는 자바스크립트의 배열, 배열의 속성 및 함수 에 대해서 알아보았습니다.

모두 수고하세요!



도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요! 



저작자표시 비영리 변경금지

'Programming > JavaScript, jQuery' 카테고리의 다른 글

[javascript 7강] 반복문(제어문)  (0) 2019.02.11
[javascript 6강] 조건문(제어문)  (0) 2019.02.11
[javascript 4강] 연산자  (0) 2019.02.10
[javascript 3강] 변수와 자료형  (0) 2019.02.09
[javascript 2강] 입출력 및 기본문법  (0) 2019.02.09
댓글