[Java Script] 배열

배열

Java Script 에서 여러개의 변수를 담을 수 있는 것은 배열과 Object 가 있다.

Java Script 에서 변수는 크기를 지정하지 않고, 무한대로 늘어난다는 특징을 가지고 있고, 배열의 index는 0부터 시작해 1씩 증가한다.
(크기를 지정하지 않기 때문에 당연히 효율은 떨어진다.)

배열 선언

배열을 선언하는 방법은 2가지가 있다.
1) var arrNum = []; → 이걸 더 많이 사용한다.
2) var arrString = new Array();

Java Script 에서는 배열과, 오브젝트만이 여러 데이터를 담을 수 있기 때문에 만약 다른 기능이 필요하다면 직접 만들어서 사용해야 한다.

배열에 값 넣고, 빼기

배열에 값 넣기
1) arrNum = [1,2,3,4,5]; : 한번에 넣기
2) arrNum[5] = 6; : 특정 인덱스 지정해서 넣기
3) arrNum.push(7); : 맨 뒤에 넣기
4) unshift(value) : 앞으로 넣기

배열에도 당연히 어떠한 값이어도 들어갈 수 있다.
그말은 즉 함수도 들어갈 수 있다는 것이다. (변수에도 함수가 들어갈 수 있다.)

arrString.push(1);
arrString.push('A');
arrString.push(false);
arrString.push([10,20,30]); // 배열에 배열 넣기
arrString.push(function(){console.log('함수실행');}); // 배열에 함수 넣기

배열에 있는 값 출력
console.log(arrString); : 전체 값 출력
pop() : 뒤에서부터 하나씩 꺼내기
shift() : 앞에서부터 꺼내기

인덱스에 있는 값 하나씩 가져오기

console.log(arrString[0]);
console.log(arrString[1]);
console.log(arrString[2]);
console.log(arrString[3]);
console.log(arrString[4]());

여기서 arrString[4] 에는 함수가 들어가 있기 때문에 ()을 적어 함수를 실행해준 것이다.
() 을 사용하지 않을 경우 함수의 내용만 보여준다.

🔽 실제 사용 예시를 살펴보자!

※ 아래 코드들은 함수를 실행하는 버튼(button) 과 클릭이벤트(onclick)이 있다고 가정하고, console.log 은 개발자 모드 확인용이다.

push() 는 뒤에 밀어 넣고 pop() 은 뒤에서 부터 꺼내온다.

var arr = [];
var i = 1;
function arrPush(){ 
    arr.push(i);
    i++;
    console.log(arr); // 1씩 증가해 배열에 담긴다.
}

function arrPop(){
    var num = arr.pop();
    console.log('빠진값 : ', num, arr); // 뒤에서부터 1개씩 꺼낸다.
}

unshift() 는 앞 부분에 값을 넣고 shift() 은 배열의 앞부분 부터 값을 빼낸다.

function arrUnshift(){ 
	arr.unshift(i);
    i++;
    console.log(arr);
}

function arrShift(){ 
    var num = arr.shift();
    console.log('빠진값 : ', num, arr);
}

기타 함수

배열에 값을 넣고, 출력했다면 중간에 값을 추가하거나 삭제하는 등을 지원하는 함수들도 있다.

slice(a, b) 는 a 인덱스 부터 보여주고, b 인덱스 부터는 버리는 함수이다.
잘라낸 배열은 반환하고 원본은 훼손하지 않는다는 특징이 있다.

만약 값이 하나만 들어갈 경우 특정 인덱스 부터 보여주게 된다.

function arrSlice(){ 
	var numArr = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
    console.log(numArr);
    var newArr = numArr.slice(3, 8); 
    console.log('slice 결과 : ', newArr); // [3, 4, 5, 6, 7] 출력
}

splice() : 값을 삭제하거나 추가하는게 가능하다.

• splice(a, b) : a 인덱스부터 b개의 값을 삭제 (원본을 훼손한다.)
• splice(a, b, c, .···) : a 인덱스 부터 b개의 값을 삭제하고 c 부터 넣어준다.
  ※ 삭제하지 않고 값만 넣고 싶을 경우 b에 0을 주면 된다.

var array = ['가','나','다','라','마','바','사'];

function SpliceDel(){ 
    console.log('실행 전', array); // ['가', '나', '다', '라', '마', '바', '사']
    array.splice(2,2); 
    console.log('실행 후',array); // ['가', '나', '마', '바', '사']
}

function SpliceAdd(){ 
    console.log('실행 전', array);
    array.splice(2, 2, 'H','I');
    console.log('실행 후',array);
}

concat() 은 2개 이상의 배열을 합쳐주는 기능을 하며 원본을 훼손하지 않고 새로운 배열을 만든다.

function concatEx(){
    var arr1 = [1,2,3,4,5];
    var arr2 = ['a','b','c','d'];
    var newArr = arr1.concat(arr2);
    console.log(newArr); //  [1, 2, 3, 4, 5, 'a', 'b', 'c', 'd']
}

delete() 는 특정 인덱스의 값을 지우는 기능을 하고, 지워진 값에는 empty(null) 이 들어간다.
※ 그렇기 때문에 차라리 공백으로 처리해주는 것을 더 추천한다.

var array = ['가','나','다','라','마','바','사'];

function delEx(){ 
    console.log(array);
    delete array[2];
    console.log(array);
}

join() 은 배열의 값을 문자열로 표현해준다. ▶ 값 사이의 연결자를 지정할 수 있다.

var array = ['가','나','다','라','마','바','사'];

function joinEx(){
    console.log('valueOf' + array.valueOf()); // 어떤 값이 들어있는지 보여준다.
    console.log('join' + array.join('_')); // 가_나_다_라_마_바_사
}

2차원 배열

Java Script 에서는 3차원 배열도 사용할 수 있지만 공식적으로는 2차원 배열까지만 지원한다.

만드는 방법은 배열 안에 배열을 만들어주면 된다.

var apt = [
    [0,1,2,3,4],
    [10,11,12,13,14],
    [20,21,22,23,24],
    [30,31,32,33,34]
];
apt = []; // 배열을 하나 만든다.

apt.push([0,1,2,3,4]);
apt.push([10,11,12,13,14]);
</script>