JavaScript 찍먹하기 - (3) 배열

배열

// 아래의 두 방법으로 빈 배열 생성 가능
let arr1 = new Array();
let arr2 = [];

// 배열 생성과 동시에 초기화 가능
let fruits = ["사과", "바나나", "포도"];

// 배열 생성 시 쉼표로 끝날 수 있음
let vehicles = ["비행기", "자동차", "자전거", ];

//new Array()로 생성 시 주의할 점
let nums1 = new Array(1,2,3);
let nums2 = new Array(2);
console.log(nums1);  // [1,2,3]
console.log(nums2);  // [ <2 empty items> ]
// 숫자형 인수를 하나만 넣을 경우 숫자만큼의 길이를 가진 배열 생성
// 그래서 그냥 대괄호로 선언하는게 좋음

// 인덱스(index)를 통해 배열 내 특정 요소에 접근 가능
// 인덱스는 0부터 시작
console.log(fruits[0]); // 사과
console.log(fruits[2]); // 포도

// 배열 수정&추가 가능
fruits[2] = "두리안"; // ["사과", "바나나", "두리안"]
fruits[3] = "수박";  // ["사과", "바나나", "두리안", "수박"]

//배열 요소 제약 없음
let randomArr = ["물", {age: 20}, function() {console.log("test")}, true];
randomArr[0] // 물
randomArr[1] //{age: 20}
randomArr[2](); // test
 
// 배열 길이 확인 가능
randomArr.length // 4

 

push & pop

• 스택(Stack)을 구현할 때 쓰이는 배열의 내장 메소드
• push: 요소를 스택 끝에 넣는다.
  pop: 스택 끝의 요소를 빼내고 빼낸 요소를 반환한다.

let fruits = ["사과", "오렌지", "배"];

console.log(fruits.pop()); // 배열에서 "배" 제거, 콘솔에 "배" 출력
console.log(fruits); // [ '사과', '오렌지' ]

fruits.push("망고");
console.log(fruits); // [ '사과', '오렌지', '망고' ]

shift & unshift

• 큐(Queue)를 구현할 때 쓰이는 배열의 내장 메소드
• shift: 앞 요소를 제거하고 제거한 요소를 반환한다.
  unshift: 배열 앞에 요소를 추가한다.

let fruits = ["사과", "오렌지", "배"];

console.log( fruits.shift() ); // 배열에서 "사과" 제거, 콘솔에 "사과" 출력
console.log( fruits ); // ['오렌지', '배']
fruits.unshift("망고");
console.log( fruits ); // [ '망고', '오렌지', '배' ]

https://ko.javascript.info/array

 

특징

• JavaScript의 배열은 특별한 종류의 '객체'이다.
  특정 요소에 대괄호([])를 이용해서 접근하는 방식은 객체 문법에서 왔다.
  객체와 배열의 다른 점은, 배열은 객체에 접근 시 '숫자'를 사용한다.
• 객체처럼 참조를 통해 복사된다.

let fruits = ["사과", "오렌지", "배"];

console.log(fruits);  // [ '사과', '오렌지', '배' ]
let tmp = fruits;
tmp.pop();
console.log(fruits === tmp); // true
console.log(fruits);  // [ '사과', '오렌지' ]

• 자바스크립트 엔진이 배열의 요소를 인접한 메모리 공간에 차례로 저장해두기 때문에 연산 속도가 빠르다.
• 배열은 객체이기 때문에 원하는 요소를 막 추가해도 문제는 생기지 않겠지만,
  일반 객체처럼 사용한다면 배열을 사용할 이유가 없다.
  
  예를 들어,
  - arr[0] = 1, arr[10000] = 1 만 추가하고 사이엔 아무 값도 없는 경우
  - arr[99999], arr[99998] 같이 요소를 역순으로 추가하는 경우
  
  위와 같이 '순서'를 생각하지 않는 데이터라면 배열보다는 일반 객체({...})를 사용하는게 바람직하다.

 

배열을 활용한 반복문

let fruits = ["키위", "체리", "딸기"];

for(let i=0; i<fruits.length;i++) {
	console.log(fruits[i]);
}

for (let fruit of fruits) {
  console.log(fruit);
}

//두 for문은 동일한 결과를 출력한다.

아래의 코드도 위와 동일한 결과를 보여준다.

for(let key in fruits) {
	console.log(fruits[key]);
}

하지만 for in 문법은 아래와 같은 특징 때문에 배열에는 사용하지 않는 것이 좋다.

1. for in 반복문은 모든 프로퍼티(객체 내부의 속성)을 순회한다.
= 키가 숫자가 아닌 프로퍼티도 순회 대상이다.

=> 필요없는 프로퍼티들이 순회되면서 문제를 일으킬 수 있다.

 

2. for in 반복문은 객체와 함께 쓰는 것에 최적화 되어있다.
=> 배열은 일반 객체가 아니기 때문에 성능이 많이 떨어진다(객체에 비해 10~100배 정도 느림).

 

'length' 프로퍼티

• 배열에 변경사항이 생기면 자동 갱신
• 배열 내 요소 개수 ❌
  가장 큰 인덱스 +1 ⭕

let fruits = new Array();
fruits[1000] = "앱쁠";

console.log(fruits.length); // 1001

• length 변경 가능

// length를 증가시킨다고 해서 삭제된 값이 돌아오지는 않는다.
let arr = [1,2,3,4,5];

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

arr.length = 5;
console.log(arr); // [ 1, 2, <3 empty items> ]


// + arr.length = 0을 통해 배열 비우기 가능

 

2차원 배열

• 배열을 배열의 요소로 만들 수 있다.

let arr = [
	[1,2,3],
	[4,5,6],
	[7,8,9]
];

console.log(arr[1][2]); // 6

 

toString()

• 배열은 toString 메소드가 구현되어 있다. 요소를 쉼표로 구분해서 반환해준다.
• 배열을 호출하면 toString()이 자동 호출된다.

let arr = [1,2,3,4,];

console.log(arr); // [ 1, 2, 3, 4 ]
console.log(String(arr) === '1,2,3,4'); // true

console.log([] + 1);      // 1
console.log([1,2+1] + 1); // 1,31

// 배열에는 Symbol.toPrimitive나 valueOf 구현되어 있지 않음
// []는 문자열로 형변환되어 코드 실행

 

사용가능한 메소드

• splice() - 요소 삭제/추가/변경

let months = ["January", "March", "Sunday", "Monday", "Tuesday"];
let days = months.splice(2); // months[2]부터 쭉 제거하겠다!

console.log(months); // [ 'January', 'March' ]
console.log(days);   // [ 'Sunday', 'Monday', 'Tuesday' ]


let fruits = ["Melon", "Grape", "Pink"];
fruits.splice(2, 1); // fruits[2]부터 1개 제거하겠다!

console.log(fruits); // [ 'Melon', 'Grape' ]


fruits.splice(0, 1, "Mango", "Strawberry"); // fruits[0]부터 1개 제거 후 망고,스트로베리 삽입
console.log(fruits); // [ 'Mango', 'Strawberry', 'Grape' ]

fruits.splice(0, 0, "Apple"); // fruits[0]부터 0개 삭제하고 그 자리에 애플 삽입
console.log(fruits); // [ 'Apple', 'Mango', 'Strawberry', 'Grape' ]

fruits.splice(-1, 2, "Orange"); // fruits의 끝 인덱스부터 2개를 삭제하고 오렌지 삽입
console.log(fruits);

arr.splice(start, deleteCount, item1, item2, ...)

• deleteCount가 arr.length-start보다 크면 start부터 모든 요소 제거
• deleteCount가 0 이하일 경우 제거가 일어나지 않음

• slice() - 배열의 부분 복사본(얕은 복사)을 새 배열로 반환가능

let arr = [0,1,2,3,4];

let arr2 = arr.slice(1,3);
console.log(arr2);         // [ 1, 2 ]
let arr3 = arr.slice(-2);
console.log(arr3);         // [ 3, 4 ]

• concat() - 배열 연결

let arr = [1,2,3];

console.log(arr.concat([4,5]));          // [1,2,3,4,5]
console.log(arr.concat(4,5));            // [1,2,3,4,5]
console.log(arr.concat([4,5],[6,7],8));  // [1,2,3,4,5,6,7,8]

• forEach() - 반복 작업하기

["Apple", "Grape", "Peach"].forEach((item, index, array) => {
    console.log(`${item} is at index ${index} in ${array}`);
});
//Apple is at index 0 in Apple,Grape,Peach
//Grape is at index 1 in Apple,Grape,Peach
//Peach is at index 2 in Apple,Grape,Peach


let numbers = [1,2,3,4,5];
numbers.forEach(number => console.log(number));
// 1
// 2
// 3
// 4
// 5

• 배열 탐색하기
  • indexOf, lastIndexOf, includes

let arr = [1,0,false];

arr.indexOf(0)     // 1
arr.indexOf(false) // 2
arr.indexOf(null)  //-1

//lastIndexOf를 사용하면 뒤에서부터 요소를 검색한다.

let arr2 = [NaN];
arr2.indexOf(NaN); // -1
arr2.includes(NaN); // true

// 위 3개의 메소드는 '==='를 통해 검색하기 때문에,
// false를 검색했을 때 0이 검색되지 않고,
// NaN에는 ===가 동작하지 않기 때문에 NaN은 찾아지지 않지만
// includes는 NaN의 처리도 포함시켜준다.

• reverse() - 배열 뒤집기

let arr = [1,2,3];

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

• split(), join() - 문자열 나누기, 문자열 합치기

let names = "홍길동,김철수,김영희";
let arr = names.split(',');
for(let name of arr) console.log(`${name} is 한국인!`);
// 홍길동 is 한국인!
// 김철수 is 한국인!
// 김영희 is 한국인!


let word = 'APPLE';
console.log(word.split(''));
// [ 'A', 'P', 'P', 'L', 'E' ]

console.log([1,2,3].join("TTT"));
// 1TTT2TTT3

• isArray() - 배열 여부 확인

// 배열도 객체타입이라서 typeof로는 배열 구분 불가능
console.log(typeof {}); // object
console.log(typeof []); // object

//isArray 메소드로 구분 가능
console.log(Array.isArray({})); // false
console.log(Array.isArray([])); // true

• 그 외 메소드들
  • find(), filter(), map(), sort(), reduce(), some(), every(), fill(), copy() 등,,,

 

참고

https://ko.javascript.info/

모던 JavaScript 튜토리얼