JavaScript 배열(Array)

JavaScript 배열(Array)

 : 배열은 순서가 있는 값을 의미합니다. 대괄호를 이용해 배열을 만들고, 각각의 원소(element)는 쉼표로 구분해 줍니다. 배열 원소는 타입이 고정되어 있지 않습니다. 그리고 인덱스는 연속적이지 않을 수 있습니다.

let myNumber = [1, 2, , 4, "문자열"];

 

 : 순서는 인덱스(index)라고 부르며, 0부터 번호를 매깁니다. 인덱스를 이용해 값에 접근할 수 있습니다. 

let myNumber = [1, 2, 3, 4, 5];

myNumber[3]; // myNumber 배열의 3번째 인덱스값은? 4

 

 : 값을 변경할 때는 마찬가지 인덱스를 이용해서 할당해 줍니다.

let myNumber = [1, 2, 3, 4, 5];

myNumber[3] = 40;

myNumber; // [1, 2, 3, 40, 5]

 

 : length 속성을 이용해 배열의 길이를 계산할 수 있습니다. 마지막 요소에 접근할 때는 배열의 length -1과 같습니다. 인덱스는 0부터 시작하기 때문입니다.

let myNumber = [1, 2, 3, 4, 5];

myNumber.length // 5

myNumber[myNumber.length - 1] // 마지막 요소 5 반환.

 

 : 배열 끝에 항목을 추가할 때는 push()를. 삭제할 때는 pop()을 이용합니다.

let fruits = ['사과', '바나나']

let newFruits = fruits.push('오렌지')

// ["사과", "바나나", "오렌지"]

let newFruits = fruits.pop

// ["사과", "바나나"]

 

 : 배열 앞에 항목을 추가할 때는 unshift()를, 삭제할 때는 shift()를 이용합니다.

let newFruits = fruits.unshift('딸기') // 앞에 추가
// ["딸기", "바나나"]

let newFruits = fruits.shift() // 앞에 삭제
// ["바나나"]

 

 : 특정한 인덱스의 엘리먼트를 삭제하려면 splice()를 이용해서 시작 인덱스와 지울 갯수를 넣어줍니다. 

let vegetables = ['양배추', '순무', '무', '당근']

vegetables.splice(1, 2) // ['순무', '무']. 삭제되는 값을 반환하고 종료됨
console.log(vegetables) // ['양배추', '당근']

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
let vegetables = ['양배추', '순무', '무', '당근']

vegetables.splice(1, 2, '대파') // ['순무', '무']. 삭제되는 값을 반환하고 1번 인덱스에 '대파'가 추가됨.

vagetables // ['양배추', '대파', '당근']

 

 : 동일한 방식으로 엘리먼트 추가도 가능합니다. splice()를 이용해서 시작 인덱스와 교체할 갯수, 교체할 엘리먼트를 넣어줍니다. 

let vegetables = ['양배추', '순무', '무', '당근']

vegetables.splice(1, 2, '대파', '쪽파') // ['순무', '무']. 삭제되는 값을 반환하고 종료됨
console.log(vegetables) // ['양배추', '대파', '쪽파', '당근']

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
let vegetables = ['양배추', '순무', '무', '당근']

vegetables.splice(1, 2, '대파') // ['순무', '무']. 삭제되는 값을 반환하고 1번 인덱스에 '대파'가 추가됨.

vagetables // ['양배추', '대파', '당근']

 

 : 배열의 복사는 slice()를 이용합니다. 시작인덱스와 끝 인덱스를 넣어줍니다. 빈칸은 전체 복사됩니다.
끝 인덱스에 입력된 값은 제외 하고 그 앞의 인덱스까지 복사됩니다.

let vegetables = ['양배추', '순무', '무', '당근']

let newVegetables = vegetables.slice() // ['양배추', '순무', '무', '당근']

let newVegetables2 = vegetables.slice(0, 2) // ['양배추', '순무'], 끝 인덱스의 앞까지 복사됨.

 

 : 배열의 요소를 정렬할 때는 sort() 메소드를 사용합니다. 숫자의 경우 유니코드 순서대로 정렬되므로 sort안에 매개변수를 넣지 않으면 오름차순, 내림차순 정렬을 해야하는 경우 b - a로 실행하면 됩니다.

let myNumber = [1, 15, 4, 100, 75];

words.sort();// [1, 4, 15, 75, 100]

    words.sort(function(a, b){
        return b - a;
});
// [100, 75, 15, 4, 1]

 

 : typeof(array)의 경우 object를 반환하기 때문에 배열인지 판단을 위해서는 Array.isArray() 메소드를 사용합니다. 결과는 true 또는 false를 반환합니다.

Array.isArray([1, 2, 3]);  // true
Array.isArray("good");  // false
Array.isArray({name : "Park"});  // false
Array.isArray([undefined]);  // false

 

 : 배열 요소의 순서를 전부 반대로 바꿀 때는 reverse() 메소드를 사용합니다.

let vegetables = ['양배추', '순무', '무', '당근']

vegetables.reverse() // ['당근', '무', '순무', '양배추']

 

 : 배열의 모든 요소를 하나의 문자열로 반환할 때 join()메소드를 이용합니다. 인수로 전달받은 문자열은 배열 요소 사이를 구분짓는 구분자로 사용되며 인수를 전달받지 않으면 기본값으로 쉼표(,)를 구분자로 사용한다.

var arr = [1, true, "JavaScript"];

arr.join();      // 1,true,JavaScript

arr.join(' + '); // 1 + true + JavaScript

arr.join(' ');   // 1 true JavaScript

arr.join('');    // 1trueJavaScript

 

 : 여러 배열을 합칠 수도 있습니다. concat()메소드를 이용합니다. 이 때 배열 안에 배열이 있더라도 모두 한 배열로 합쳐집니다. 원본은 변경되지 않으므로 합친 배열을 다른 변수에 할당해야 활용할 수 있습니다.

let arr1 = [1, 2]
let arr2 = [3, 4]
let arr3 = [5, 6]

arr1.concat(arr2) // [1,2,3,4]
arr1.concat(arr2, arr3) // [1,2,3,4,5,6]

arr1.concat([[3,4],5,6]) // [1,2,3,4,5,6]

 

정리

• 배열은 순서가 있는 값
• 인덱스와 엘리먼트로 구성됨
• 마지막 요소는 length - 1
• 배열 끝 추가/삭제 push(), pop()
• 배열 앞 추가/삭제 unshift(), shift()
• 특정 위치 엘리먼트 삭제 또는 추가 splice(시작점, 지울 개수, 추가할 엘리먼트)
• 배열의 복사 slice()
• 배열의 정렬 sort()
• 배열의 판별 Array.isArry()
• 배열 요소 반전 reverse()
• 문자열로 반환 join()
• 배열간의 결합 concat()

참고

생활코딩 배열

제로초 배열

TCPSCHOOL.COM 배열

MDN Array

simjiy brunch sort()