07. 배열 (Array)

배열 (Array)

배열은 공통된 관심사의 하나의 묶음이라고 입니다. 제육볶음을 만드려고 합니다. 제육볶음에는 [고기, 양파, 마늘, 고추장, 파 등등…] 이 필요합니다. [고기, 양파, 마늘, 고추장, 파 등등…] 안에 요소들은 제육볶음을 만들기 위한 재료들입니다. 위처럼 관심사와 관련 있는 값들을 모아서 사용할 수 있도록 도와주는 것이 배열입니다.

선언법

크게 []를 통한 리터럴선언법, new Array를 통한 선언법이 존재합니다.

리터럴 방식

가장 많이 사용하게 될 방법 입니다.

var arr = []; // 이런식으로 선언해줘요
// 값을 넣어주면서 만들 수 있어요. 
// tip) 1, 2, => , 뒤에는 공백을 하나 넣어주세요 가독성이 좋아집니다.
var arr = [1, 2, 3, 4, 5];

new Array

new Object 형태처럼 new Array로도 배열을 만들 수 있습니다.

// 빈 배열이 하나 생성됩니다.
var arr = new Array(); 
// 마찬가지로 값을 넣어주면서 생성할 수 있습니다.
var arr = new Array(1, 2, 3, 4, 5); 
// 이렇게 하나의 값만 덩그러니주면 숫자만큼의 크기를 가진 배열이 생겨요 
// 10 개의 빈 공간을 가진 배열이 생기게 됩니다
var arr = new Array(10); 

배열 특징

자바스크립트의 배열은 다른 언어들과는 달리 타입에 상관없이 모든 요소를 넣어줄 수 있습니다.

var arr = [function(){}, 5, 'string', null, undefined];

배열 다뤄보기

인덱스로 접근하기

배열안에 값들은 각자 번호표를 가지고 있습니다. 번호표를 호출하면 해당 번호표의 값이 불러지겠죠?

var arr = [1, 2, 3]; // 번호표는 0번 부터 시작합니다.
console.log(arr[0]); // 1
console.log(arr[1]); // 2
console.log(arr[2]); // 3

length를 사용하여 크기 알아내기

배열은 length 라는 속성에 자신의 크기를 가지고있어요. 순서는 0부터 시작하지만 크기는 1 부터 시작합니다.

var arr = [1, 2, 3];
console.log(arr.length); // 3

배열 값 추가하기

배열에 값을 추가하는 방법은 여러개가 있지만, 기본적으로 인덱스(번호표)를 통한 추가와 push라는 메서드를 통해 추가할 수 있습니다.

push

var arr = []; // 빈 배열 생성 
arr[0] = 1; // 첫번째 자리에 1를 추가했습니다.
arr.push(2); // 그 뒤에 2를 추가했습니다.
console.log(arr); // 1, 2 가 찍히겠죠!

해체 할당자를 이용하여 새로운 값을 push 하는 방법도 있습니다

var arr = [1, 2]
var newArr = [...arr, 3] // 1, 2, 3

unshift

맨 앞에 추가하고 싶을 때는 unshift를 사용하시면 됩니다.

var arr = []; // 빈 배열 생성 
arr[0] = 1; // 첫번째에 1를 추가했습니다.
arr.push(2); // 그 뒤에 2를 추가했습니다.
arr.unshift(0);
console.log(arr); // 0, 1, 2 가 찍히겠죠

배열 값 삭제

pop

맨 마지막 요소를 삭제하고 싶으시다면 pop을 사용하시면됩니다.

var arr = [1, 2, 3];
arr.pop();
console.log(arr); // 1, 2

shift

맨 앞의 요소를 제거하고 싶으시다면 shift를 사용해주세요

var arr = [1, 2, 3];
arr.shift();
console.log(arr); // 2, 3

splice

삭제에 있어 정말 중요한 splice 와 slice 가 있습니다. 먼저 splice 부터 알아보겠습니다.

var arr = [1, 2, 3];

// 기본적으론 아래와 같이 생겼어요 
// 시작인덱스 = 몇번째부터, 몇개는 시작 인덱스로부터 몇개를 제거할 것이냐는 뜻 입니다.
arr.splice(시작인덱스,몇개);
  
// 위의 배열에서 1 을 제거해볼게요
arr.splice(0, 1); // 0 번째부터 1개라는 뜻입니다
console.log(arr); // 1 이 제거된 2, 3 이 출력됩니다.

// 잘린 값을 변수에 담을 수 도 있습니다.  
var cut = arr.splice(0, 1); // [2, 3]에서 첫번째 값을 짤랐습니다.
console.log(cut); // cut 에는 위에서 잘린 2가 들어있습니다.
console.log(arr); // 배열 안에 남은 값은 3 이겠군요!

// splice의 또다른 능력이있는데요 
// 삭제된 자리에 새로운 값을 추가하거나 중간에 값을 끼워넣을 수 있어요
var arr = [1, 2, 4]; // 3이 빠져있네요? 우리는 3 을 넣어 줄거에요 
// 2 = 몇번째 인덱스, 0 = 0개를 삭제할 것이고, 3 을 추가로 넣을거에요 라는 의미입니다.
arr.splice(2, 0, 3); 
console.log(arr); // [1, 2, 3, 4] 가 찍힙니다

splice를 통한 배열처리는 원본 배열에 영향을 줍니다. 위 코드에서는 arr 가 원본 배열입니다. 우리가 값을 추가하거나 삭제할때 arr 는 계속 바뀌고 있습니다. 만약에 arr 을 다른 곳 에서도 사용하고 있다면 다른 곳 에서는 의도하지 않은 값을 얻을 수 있습니다. splice 를 사용할 때는 원본이 손상이 가기 때문에 잘 고려하여 써주셔야 됩니다. slice

slice는 기존의 배열을 잘라 새로운 배열을 만들어 줍니다. 원본 배열이 손상되지 않습니다.

var arr = [1, 2, 3, 4]; // 원본 배열 
var newArr = arr.slice(시작인덱스, 몇개); // 사용법 

// 1 번째 인덱스부터 2개 를 넣었죠? 
// 우리가 생각하기론 인덱스 1에는 2가 들어있어요 
// 2부터 2개 2, 3 이 나올거라고 생각하실거에요
var newArr = arr.slice(1, 2); 

// 하지만 결과는 2 만 들어있습니다. slice는 맨앞 0 번부터 시작하거든요
console.log(newArr); // 복사된 newArr
console.log(arr); // 1, 2, 3, 4 원본은 멀쩡합니다 
// 만약에 통째로 복사해야 한다면
var newArr = arr.slice(); // 이렇게 인자로 아무것도 안주시면되요 
console.log(newArr); // 1, 2, 3, 4

Filter

filter 를 이용하여 삭제 값을 삭제 할 수 있어요

var arr = [1, 2, 3]

// 3 을 삭제하고 싶을때
var newArr = arr.filter(function(num) {
  return num !== 3 
}) 
console.log(newArr) // 1, 2

배열 검색

indexOf

내가 쓰고있는 배열에 값이 존재하는지 않하는지 알고싶을때가 있죠? 그 때는 indexOf 를 사용합니다.

var arr = [1, 2, 3, 4];
// 2가 존재하나요? 2가 존재한다면 2의 인덱스값을 아니면 -1을 리턴해줍니다. 
console.log(arr.indexOf(2)); // 결과값 1이 찍히는걸 보실 수 있을거에요

lastIndexOf

indexOf는 중복된 값이 있어도 첫번째 찾은 인덱스의 값을 리턴해줍니다. 그런데 중복된 값들 중 마지막 인덱스가 궁금하다면 어떻게 해야될까요? 이때 사용하는 것이 lastIndexOf 입니다

var arr = [1, 2, 3, 4, 2]; 
console.log(arr.indexOf(2)); // 1 이 찍히는군요 ... 첫번째 애밖에 못찾나봐요 ㅠㅠ...
console.log(arr.lastIndexOf(2)); // 4가 찍힙니다. 맨뒤에 녀석을 찾아줘요

Find

find 는 값을 찾으면 해당 값을 아니면 undefined 를 return 합니다

var arr = [1,2,3]

var num = arr.find(function(num) {
	return num === 3
})

console.log(num) // 3

FindIndex

findIndex 는 해당 값의 인덱스 번호를 return 합니다

var arr = [1, 2, 3]

var idx = arr.findIndex(function(num){
  return num === 3
})

console.log(idx) // 2

새로운 배열 만들기

map

map 은 새로운 배열을 return 합니다. 우리가 원하는 추가 작업이 가능합니다.

var arr = [1, 2, 3] 

var newArr = arr.map(function(num){
  return num * 2
})

console.log(newArr) // 2, 4, 6

reduce

reduce 는 값을 누적합니다. 최댓 최솟 값, 정렬, 새로운 값을 만든다던가 여러가지 작업을 할 수 있습니다.

배열의 모든 값을 더해보겠습니다.

var arr = [1, 2, 3]

var total = arr.reduce(function(accm, num){
    return num += accm
}, 0)

console.log(total) // 6

배열을 문자열로 표현하기

join, toString

join , toString 을 이용하여 배열을 문자열로 표현할 수 있습니다.

var arr = ["안녕","하세요","olaf","입니다"];
var arrayJoin= arr.join(); // 안녕,하세요,olaf,입니다
var arrayToString= arr.toString(); // 안녕,하세요,olaf,입니다

문자를 배열로 바꾸기

split

특정한 문자로 String을 Array로 바꿀 수 있습니다.

var str = '안녕,하세요,olaf,입니다';
// split에 인자를 주면 인자로 값을 쪼개서 배열로 만들어줍니다.
var arr = str.split(','); 
console.log(arr); // ["안녕", "하세요", "olaf", "입니다"]

배열 정렬하기

sort

sort 는 기본적으로 오름차순 입니다.

var arr = [3, 2, 1, 4]; 
arr.sort(); // [1 2 3 4] 기본적으로 오름차순으로 정렬됩니다.

// 하지만 sort에 문제가 하나있습니다. 
// sort함수는 요소를 모두 문자열로 간주하기 때문에 의도치 않는 결과 값을 가져올 수 있어요
var arr = [1, 3, 200, 10, 300, 5];
console.log(arr.sort()); // [1, 10, 200, 3, 300, 5] 오잉 ......

// 해결방법이있습니다.
// sort 가 실행되고 내부적으로 로직이 발생되고 그 값을 함수에 넣어주고 있는거에요
arr.sort(function(num1, num2){ // num1, num2 는 제가 임의로 지어준 이름입니다.
  return num1 - num2; // num1 - num2는 오름차순 num2 - num1은 내림차순입니다.
});

reverse

현재 배열의 값을 뒤집을때 쓰는 함수입니다.

var arr = [1, 3, 5, 10, 200, 300];
arr.reverse(); // [300, 200, 10, 5, 3, 1]
arr.reverse(); // [1, 3, 5, 10, 200, 300]

팁

저번에 반복문 수업을 할때 아직 배열을 배우지않은 상태라 넘어간 내용이 있습니다. 현재는 브라우저가 너무 좋아져서 성능의 차이는 느끼지 못하지만 IE8 까지 대응을 해야한다면 아래와 같은 세세한 요소들이 성능에 영향을 줄 수 있습니다 :)

var arr = [1, 2, 3, 4, 5]; // 배열을 반복문을 돌릴때

// arr.length 이런식으로 접근했었죠? 
// 이렇게 바로 적어버리면 반복문 돌때 마다 매번 arr.length 를 찾아야 합니다.
for(var i = 0; i < arr.length; i++){ 
  // 내부 로직
}

// var len = arr.length 처럼 변수에 담아놓고쓰는걸 캐싱한다고해요. 
// 캐싱해놓고 쓰시면 최초 한번만 arr.length 를 찾습니다.
for(var i = 0, len = arr.length; i < len; i += 1){ // i++ 보단 i += 1 이 좋은 방법입니다.
  // 내부로직 
}

마무리

배열에 대해서 한번에 많은걸 알아보다보니 혼란이 올 수 있습니다. 하지만 다 외우지 않으셔도 됩니다. 이런게 있다 정도만 알아두시고 쓰실 때마다 찾아 쓰셔도 무방합니다.