[JavaScript] 배열(Array)

📌  배열 (Array)

- 여러 개체값을 순차적으로 나열한 선형 자료 구조를 말한다

- 배열은 가장 간단한 자료 구조 중 하나로, 동일한 이름 아래 같은 속성의 값을 저장해 관리를 편리하게 하기 위해 사용한다

 

 

 

💛  배열 선언 및 접근

// 배열 선언
let arr_1 = [ 1, 2, 3, 4, 5 ];
let arr_2 = new Array(3);

// 배열 접근 
console.log(arr_1);	// [ 1, 2, 3, 4, 5 ]
console.log(arr_2);	// [ <3 empty items> ]

console.log(arr_1[0]);	// 1
console.log(arr_1[1]);	// 2
console.log(arr_1[2]);	// 3

arr_1[2] = 999;
console.log(arr_1[2]);	// 999

 

 

 

💛  배열 크기 확인하기 

// 배열 크기 확인
let arr = [ 1, 2, 3, 4, 5 ];
console.log(arr.length);	// 5

- 배열명.length : 배열의 길이를 확인한다 

 

 

💛  배열 여부 확인하기 

// 배열 여부 확인 
let arr = [ 1, 2, 3, 4, 5 ];
let num = 1;
let str = "hello";
let bol = true;

console.log(Array.isArray(arr));	// true
console.log(Array.isArray(num));	// false
console.log(Array.isArray(str));	// false
console.log(Array.isArray(bol));	// false

- Array.isArray(확인하고자 하는 변수명이나 값) : 확인하고자하는 변수명이나 값이 배열이 맞는지 여부를 반환한다 

 

 

💛  배열에 요소 추가 및 삭제 (1) LIFO

let arr, temp
arr = [ 1, 2, 3 ];
console.log(arr);	// [ 1, 2, 3 ]

// 배열에 요소 추가 (LIFO)	
temp = arr.push(10);			
console.log(arr);	// [ 1, 2, 3, 10 ]
console.log(temp);      // 4

// 배열에 요소 삭제 (LIFO)
temp = arr.pop();		
console.log(arr);       // [ 1, 2, 3 ]
console.log(temp);      // 10

- 배열명.push(요소) : 요소를 배열의 마지막 요소 뒤에 추가하며, 추가 후의 length를 반환한다

- 배열명.pop() : 마지막 요소를 삭제하며, 삭제된 요소의 값을 반환한다

 

 

💛  배열에 요소 추가 및 삭제 (2) FIFO

let arr, temp
arr = [ 1, 2, 3 ];
console.log(arr);	// [ 1, 2, 3 ]

// 배열에 요소 추가 (FIFO)	
temp = arr.unshift(10);			
console.log(arr);	// [ 10, 1, 2, 3 ]
console.log(temp);      // 4

// 배열에 요소 삭제 (FIFO)
temp = arr.shift();			
console.log(arr);       // [ 1, 2, 3 ]
console.log(temp);      // 10

- 배열명.unshift(요소) : 요소를 배열의 첫 번째 요소 앞에 추가하며, 추가 후의 length를 반환한다

- 배열명.shift() : 첫 번째 요소를 삭제하며, 삭제된 요소의 값을 반환한다

 

 

💛  배열 자르기(1) splice (배열에 영향 O)

// 배열 자르기 
// arr.splice(start, end, ele1, ele2 ... ) 
let arr, res
arr= [1,2,3];

res = arr.splice(1);    
console.log(res);       // [ 2, 3 ]                
console.log(arr);       // [ 1 ]

arr = [1,2,3,4,5];
res = arr.splice(1, 2);
console.log(res);       // [ 2, 3 ]             
console.log(arr);       // [ 1, 4, 5 ]      

res = arr.splice(1, 1, "hello", "world");
console.log(res);       // [ 4 ]
console.log(arr);       // [ 1, "hello", "world", 5]

- 배열의 일부를 잘라낼 때 사용한다. 대상이 된 배열에 영향을 미친다. 잘라내기(ctrl + x)처럼 생각하자

- 입력받은 end에 해당하는 값은 배열을 자르는 범위에 포함한다

- 배열명.splice(start) : 매개 변수를 하나만 입력한 경우, start으로 사용하고 마지막 요소까지 잘라낸다

- 배열명.splice(start, end) : 매개 변수를 두 개 입력한 경우 입력 순서대로 satrt와 end를 의미한다 

- 배열명.splice(start, end, ele1, ele2 ... ) : 요소 값을 추가로 입력한 경우, 잘라낸 위치에 작성한 요소의 값이 추가된다

 

 

 

💛  배열 자르기(2) slice (배열에 영향 X)

// 배열 자르기 
// arr.slice(start, end) 
let arr, res
arr= [1,2,3];

console.log(arr.slice(0));       // [ 1, 2, 3 ]                
console.log(arr.slice(1));       // [ 2, 3 ]                
console.log(arr.slice(2));       // [ 3 ]                
console.log(arr);                // [ 1, 2, 3 ]

arr = [ 1, 2, 3, 4, 5 ];
res = arr.slice(1, 3);
console.log(res);       // [ 2, 3 ]             
console.log(arr);       // [ 1, 2, 3, 4, 5 ]

- 배열의 일부를 복사할 때 사용한다. 대상이 된 배열에 영향을 미치지 않는다. 복사(ctrl + c)처럼 생각하자

- 입력받은 end에 해당하는 값은 배열을 자르는 범위에 미포함한다

- 배열명.slice(start) : 매개 변수를 하나만 입력한 경우, start으로 사용하고 마지막 요소까지 잘라낸다

- 배열명.slice(start, end) : 매개 변수를 두 개 입력한 경우 입력 순서대로 start와 end를 의미한다 

 

 

💛  배열 탐색 : 요소 값으로 index 찾기 

// 배열 탐색 : 요소 값으로 index 찾기 
let arr = [ "가", "나", "다", "나", "가" ];

// 앞에서부터 찾기
console.log(arr.indexOf("가"));		// 0
console.log(arr.indexOf("나"));		// 1

// 뒤에서부터 찾기
console.log(arr.lastIndexOf("가"));	// 4
console.log(arr.lastIndexOf("나"));	// 3

- 배열의 요소 중 같은 값이 여러 개 있어도 처음 찾은 요소의 index만을 반환한다

- 배열명.indexOf(요소값) : 배열의 시작 부분부터 요소를 찾아, 처음 찾은 요소의 index를 반환한다 

- 배열명.lastIndexOf(요소값) : 배열의 마지막 부분부터 요소를 찾아, 처음 찾은 요소의 index를 반환한다 

 

 

💛  배열 탐색 : 배열에 요소가 포함되었는지 확인 

// 배열에 요소가 포함되었는지 확인 
let arr = [ 1, 2, 3, 4, 5 ];

console.log(arr.includes(3));		// true
console.log(arr.includes(999));		// false

- 배열명.include(요소값) : 배열에 같은 값의 요소가 있으면 true를 반환, 아닌 경우 false 반환

 

 

 

💛  배열 정렬 

// 배열 정렬
let arr = [ 1, 3, 2, 5, 4 ];

arr.sort();
console.log(arr);	// [ 1, 2, 3, 4, 5 ]

arr.reverse();
console.log(arr);	// [ 5, 4, 3, 2, 1 ]

- 배열명.sort() : 배열의 요소를 오름차순으로 정렬

- 배열명.reverse() : 배열의 요소를 역순으로 정렬. 오름차순 정렬 후, 사용하면 내림차순으로 정렬된다

 

 

💛  배열 정렬 : 고차 함수를 사용한 정렬

let fruits = ["apple", "Orange", "orange", "peach"];
let nums = [1, -1, 4, 0, 2, 3, 10, 20, 12];

nums.sort();
console.log(nums);	// [ -1,  0, 1, 10, 12, 2, 20, 3,  4 ]

fruits.sort();
console.log(fruits);	// [ 'Orange', 'apple', 'orange', 'peach' ]

- sort()를 사용할 때, 배열의 요소를 일시적으로 문자열로 변경해 정렬하기 때문에 요소의 일부가 제대로 정렬되지 않는다 

 

// 오름차순을 위한 콜백 함수 
let ascending_order = function (x, y) {
  if (typeof x === "string") x = x.toUpperCase();
  if (typeof y === "string") y = y.toUpperCase();
  
  return x > y ? 1 : -1 ;
}

// 내림차순을 위한 콜백 함수 
let descending_order = function (x, y) {
  if (typeof x === "string") x = x.toUpperCase();
  if (typeof y === "string") y = y.toUpperCase();
  
  return x < y ? 1 : -1 ;
}

let fruits = ["apple", "Orange", "orange", "peach"];
let nums = [1, -1, 4, 0, 2, 3, 10, 20, 12];

// 고차함수를 사용한 오름차순 정렬
nums.sort(ascending_order);
console.log(nums);	// [ -1,  0,  1,  2, 3, 4, 10, 12, 20 ]

// 고차함수를 사용한 내림차순 정렬
fruits.sort(descending_order);
console.log(fruits);	// [ 'peach', 'orange', 'Orange', 'apple' ]

- 이때, typeof 를 사용해 요소의 데이터 타입을 확인하고 String인 경우 대문자로 치환하여 대소를 비교한다

- Number 인 경우는 대소 관계를 비교하여 요소를 정렬하도록 콜백 함수를 작성한다

 

 

 

💛  배열의 요소를 하나의 문자열로 변환 

// 배열의 요소를 하나의 문자열로 변환 
let fruits = ["apple", "Orange", "orange", "peach"];

console.log(fruits.join());         // apple,Orange,orange,peach
console.log(fruits.join("-"));      // apple-Orange-orange-peach
console.log(fruits.join(" / "));    // apple / Orange / orange / peach

- 배열명.join(sep=",") : 매개변수를 구분자로 사용하여 배열의 요소를 하나의 문자열로 변환한다. 매개변수를 입력하지 않은 경우 기본 값인 , 를 사용해 구분한다 

 

 

💛  배열 반복(1) forEach

// 배열 반복 : forEach()
let arr = [ 1, 2, 3, 4, 5 ];

function print(num){ console.log(num) };
res = arr.forEach(print);
/*
1
2
3
4
5
*/

console.log(res); 	// undefined

 

- 미리 만들어 둔 함수를 콜백 함수로 사용해도 되고, 익명 함수를 사용해도 된다

- 배열명.toEach(콜백함수) : 배열 요소마다 콜백 함수를 각각 실행한다. 결과를 반환하지 않는다

- 배열명.toEach(function(item,idx,arr){ ... })  : 익명 함수를 사용하는 경우 매개변수는 item, idx, arr의 순으로 사용한다

 

 

💛  배열 반복(2) map 

// 배열 반복 : map()
let arr = [ 1, 2, 3, 4, 5 ];

function plusTen(num) {return num + 10;}
let res = arr.map(plusTen);
  
console.log(arr);   // [ 1, 2, 3, 4, 5 ]
console.log(res);   // [ 11, 12, 13, 14, 15 ]

- 배열명.map(콜백함수) : 배열의 요소마다 콜백 함수를 실행하고, 결괏값을 배열의 형태로 반환한다 

 

 

💛  배열 반복(3) find

// 배열 반복 : find()
let arr = [ 1, 2, 3, 4, 5 ];

let res = arr.find(function(item){
    return item % 2 == 0;
});

console.log(res);	// 2

- 배열명.find(콜백함수) : 콜백 함수의 조건을 만족하는 단 하나의 값만을 반환한다

- 콜백 함수를 만족하는 값이 여러 개인 경우, 처음 발견한 요소만을 반환한다 

 

 

💛  배열 반복(4) filter

// 배열 반복 : filter()
let arr = [ 1, 2, 3, 4, 5 ];

let res = arr.filter(function(item){
    return item % 2 == 0;
});

console.log(res);	// [ 2, 4 ]

- 배열명.filter(콜백함수) : 콜백 함수의 조건을 만족하는 값을 배열의 형태로 반환한다

 

 

 

💛  배열 반복(5) reduce 

// 배열 반복 : reduce()
let nums = [1, 2, 3, 4, 5];

let sum = nums.reduce(function(accumulator, item){
  return accumulator + item;
}, 0);
console.log(sum);         // 15

- 배열명.reduce(function(accumulator,item,idx,arr){}) : 요소 별 익명 함수의 수행 누적 결괏값을 반환한다

- accumulator 은 이전 함수의 결과를 누적한 값을 의미한다 

 

💛  배열의 논리 연산(1) some

// 배열 논리연산 : some()
let arr_1 = [ 1, 2, 3, 4, 5 ];
let arr_2 = [ 1, 3, 5, 7, 9 ];

function check(item){
    return item % 2 == 0;
}

console.log(arr_1.some(check));	// true
console.log(arr_2.some(check));	// false

- 배열명.some(콜백함수) : 콜백 함수의 조건을 만족하는 값이 하나라도 있는 경우 true, 없는 경우 false를 반환한다

 

 

💛  배열의 논리 연산(2) every 

// 배열 논리연산 : every()
let arr_1 = [ 1, 2, 3, 4, 5 ];
let arr_2 = [ 2, 4, 6, 8, 10 ];

function check(item){
    return item % 2 == 0;
}

console.log(arr_1.every(check));	// false
console.log(arr_2.every(check));	// true

- 배열명.every(콜백함수) : 배열의 요소가 모두 콜백 함수의 조건을 만족하는 경우 true, 없는 경우 false를 반환한다