Languages/Java Script

[Js] 배열 | javascript 배열 | 배열이란?

해당 포스팅은 "생활코딩"의 이고잉 님의 강의를 기반으로 올린 게시글 입니다.

상업적인 용도가 아닌, 개인 공부 정리 목적으로 올리는 글임을 미리 알립니다.

배열

배열(array)이란 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입이다.

변수가 하나의 데이터를 저장하기 위한 것이라면

배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있다.

아래의 예제를 보자.

변수 name에는 문자 haeun이 할당되었다. 이제부터 name을 호출하면 문자 haeun을 사용할 수 있다.

<script>
    var name = 'haeun'
    alert(name);
</script>

배열의 생성

Q. 여러 개의 데이터를 하나의 변수에 담아서 관리할 수 있는 방법은 없을까?

A. 있다! 배열을 쓰면 된다.

변수 member에 회원정보를 담아보자. 대괄호([])는 배열을 만드는 기호다.

대괄호 안에 데이터를 콤마(,)로 구분해서 나열하면 배열이 된다.

<script>
	var member = ['haeun', 'admin', 'root']
</script>

하나의 변수에 3개의 데이터를 담았다.

각각의 데이터를 원소(Element)이라고 부른다.

자 그럼 이 데이터를 꺼내오려면 어떻게 해야 할까? 아래의 예제를 보자.

<script>
    var member = ['haeun', 'admin', 'root']
    alert(member[0]);
    alert(member[1]);
    alert(member[2]);
</script>

결과는 아래의 문자열을 차례로 경고창으로 출력 할 것이다.

haeun
admin
root

즉 배열에 담겨있는 값을 가져올 때는 대괄호 안에 숫자를 넣는다.

이 숫자를 색인(index)라고 부르고 0부터 시작한다.

즉 첫번째 원소(egoing)를 가져오려면 대괄호 안에 0을 넣어주어야 한다는 것이다.

두번째는 1, 세번째는 2를 입력한다. 이 값을 이용해서 배열에 저정된 값을 가져올 수 있다.

그렇다면 배열은 왜 쓰는 것일까?

배열이 없다면

그렇다면 배열이 없다면 어떻게 될까?

예를 들어 맴버의 이름을 제공하는 함수를 제공해야 한다고 해보자.

그런데 함수는 하나의 값만을 반환(return) 할 수 있다. 아래의 예를 보자.

<script>
      function get_member1(){
          return 'egoing';
      }
      document.write(get_member1());

      function get_member2(){
          return 'k8805';
      }
      document.write(get_member2());


      function get_member3(){
          return 'sorialgi'
      }
      document.write(get_member3());
</script>

하나의 함수는 하나의 값만을 반환할 수 있기 때문에 위와 같이 각각의 회원정보를 반환하는 함수를 만들었다.

이번엔 배열를 이용한 아래의 코드를 보자.

<script>
      function get_members(){
          return ['egoing', 'k8805', 'sorialgi'];
      }
      var members = get_members();
      document.write(members[0]);
      document.write(members[1]);
      document.write(members[2]);
</script>

맴버를 담고 있는 배열를 반환하고 있다.

이렇게 되면, 간단하면서도 여러 값을 반환 하는 듯한 효과를 준다.

배열의 사용

배열의 진가는 반복문과 결합했을 때 나타난다.

반복문으로 리스트에 담긴 정보를 하나씩 꺼내서 처리 할 수 있기 때문이다.

내장함수 ▼

자바 스크립트가 우리에게 기본적으로 제공해주는 함수 중,

소문자를 대문자로 바꾸어 주는 함수가 있다.

만약 내가 변수 a에 들어있는 문자열을 대문자로 바꾸고 싶다고 하자.

var a = 'haeun';

a 는 현재 haeun

a.toUpperCase();

a 는 현재 HAEUN

다음 예제를 보자

<!DOCTYPE html>
<html>
<head>
	<title>haha</title>
</head>
<body>
<script type="text/javascript">
function get_members(){
	var member = ['haeun','admin','root'];
	return member;
}

members = get_members();
// members.length는 배열에 담긴 값의 숫자를 알려준다. 
for(var i =0; i<members.length; i++){
		document.write(members[i].toUpperCase()+"<br />");	
}

</script>

</body>
</html>

결과는 아래와 같다.

위의 예제에서 주목해야 할 것은 반복문과 배열을 결합한 부분이다.

반복문을 이용해서 배열 members의 내용을 하나씩 꺼낸 후에 이름을 대문자로 변경한 후에 출력하고 있다.

정리하면, 배열이란 연관된 정보를 하나의 그룹으로 관리하기 위해서 사용한다.

그리고 그 정보를 처리 할 때는 반복문을 이용한다.

배열의 제어

배열은 복수의 데이터를 효율적으로 관리, 전달하기 위한 목적으로 고안된 데이터 타입이다.

따라서 데이터의 추가/수정/삭제와 같은 일을 편리하게 할 수 있도록 돕는 다양한 기능을 가지고 있다.

몇가지 중요한 기능들만 살펴보자.

배열의 크기

아래와 같은 방법으로 배열의 크기를 알아낼 수 있다. 결과는 5이다.

<script>
      var arr = [1, 2, 3, 4, 5];
      alert(arr.length);
</script>

배열의 조작

추가

다음은 배열의 끝에 원소를 추가하는 방법이다.

push는 인자로 전달된 값을 배열(li)에 추가하는 명령이다.

배열 li의 값은 a, b, c, d, e, f가 됐다.

<script>
		
    var li = ['a','b','c','d','e'];
    li.push('f');//push는 자바스크립트가 가지고 있는 내장함수.
    alert(li);
    
</script>

push는 한개를 추가해주는 명령이라고 한다면, concat은 여러개를 연결 해주는 명령어라고 할 수 있다.

concat은 복수의 원소를 배열에 추가하는 방법이다. concat은 인자로 전달된 값을 추가하는 명령이다.

<script>
	
    var li = ['a','b','c','d','e'];
    li = li.concat(['f','g']);
    alert(li);
    
</script>

다음은 배열의 시작점에 원소를 추가하는 방법을 알아보도록 하겠다.

unshift는 인자로 전달한 값을 배열의 첫 번째 원소로 추가하고 배열의 기존 값들의 색인을 1씩 증가시킨다.

<script>
	
    var li = ['a','b','c','d','e'];
    li.unshift('z');
    alert(li);

</script>

즉 배역은 z, a, b, c, d, e 가 됐다.

만약 두번째 인덱스 뒤에 대문자 B를 넣고 싶다면 아래와 같이한다.

splice는 첫번째 인자에 해당하는 원소부터 두번째 인자에 해당하는

원소의 숫자만큼의 값을 배열로부터 제거한 후에 리턴한다.

그리고 세번째 인자부터 전달된 인자들을 첫번째 인자의 원소 뒤에 추가한다.

아래의 예시를 본다면 2 즉 (0,1,2) 세번째 자리에 배열을 추가할 것이며,

제거할 원소는 0 개란 뜻이다.

추가하는 값은 'B'이다.

<script>
	
    var li = ['a','b','c','d','e'];
    li.splice(2,0,'B');
    alert(li);

</script>

결과는 아래와 같다.

제거를 예시로,

li.splice(2,1,'CBA');를 입력하게 되면, 3번째 자리에 추가하되,

원래 기존에 있던 3번째 배열 요소가 한개 삭제되고

그 자리에 CBA가 오게된다.

즉 c가 사라진 것이다.

꼭 다 외울필요는 없고, 메뉴얼을 찾아서 필요할 때마다 찾아 볼 수 있으면 된다.

제거

다음은 배열의 첫번째 원소를 제거하는 방법이다.

shift를 사용하면 된다.

<script>

      var li =['a','b','c','d','e'];
      li.shift();
      alert(li);

</script>

이렇게 shift를 하면, 반환해주는 return값으로 'a'를 주는데

이는 li.shift()가 반환해주는 값이며,

실제 li 변수 안에 배열은 a가 빠진 b,c,d,e가 남게 된다.

다음은 배열 끝점의 원소를 배열 li에서 제거한다. 이때는 pop를 사용한다.

결과는 a, b, c, d 다.

<script>

        var li =['a','b','c','d','e'];
        li.pop();
        alert(li);
        
</script>

정렬

다음은 정렬하는 방법이다.

정렬을 위해 사용하는 함수는 sort와 reverse가 있다.

<script>
	
    var li = ['c','e','a','b','d'];
	var sort = li.sort(); //sort라는 변수안에 li.sort를 넣는다.
    alert(sort); //정렬된 문자열 출력
    
    //역순으로 정렬하고 싶다면?
    
    var reverse = li.reverse();//reverse라는 변수안에 li.reverse를 넣는다.
    alert(reverse); //역순 정렬
    
</script>

'Languages > Java Script' 카테고리의 다른 글

[Js] 모듈 \| 모듈의 사용 \| Node.js에서의 모듈의 로드 \| javascript 모듈 \| 라이브러리 (0)	2021.02.04
[Js] 객체 \| javascript 객체 \| 객체 지향 프로그래밍 (0)	2021.02.03
[Js] 함수 \| 함수의 형식 \| 함수의 정의와 호출 \| 입력과 출력 (0)	2021.02.03
[Js] 반복문 \| javascript 반복문 \| 반복문 제어, 중첩 \| for,while (0)	2021.02.02

Contents

새소식

인기 검색어