배열
배열 : 대괄호 두 개로 이루어져 있으며, 특정한 요소를 담는 데이터 타입
JavaScript에서는 배열(Array)을 통해 여러개의 데이터를 한 곳에 저장할 수 있다. 배열에 문자열을 넣을 때는 쉼표로 구분해준다. 순서가 있는 컬렉션이 필요할때 배열을 이용할 수 있다.
index number은 0부터 시작한다.
let Arr = [21, 365, "Nice", true]; // 인덱스 [0] [1] [2] [3]
01. 배열의 길이
let Arr = [21, 3657, "Nice", true];
console.log(Arr.length); // 4💡 괄호 없이 단독으로 length으로 쓰인다.
- 인덱스의 개수 : (배열의 길이 - 1)
- 배열의 길이 : (인덱스의 개수 + 1)
02. 중첩 배열
- 배열 요소 안에 배열을 추가할 수 있다.
let Arr=[21, 365, "Nice", [10, 20, 30], true];
console.log(Arr[0]); // 21
console.log(Arr[1]); // 365
console.log(Arr[2]); // "Good"
console.log(Arr[3]); // [10, 20, 30]
console.log(Arr[4]); // true- 다차원배열(multi-dimensional array)의 요소에 접근하고 싶을 때
// 배열 안에는 또 다른 배열이 요소로 포함될 수 있다.
let Arr=[21, 365, "Nice", [10, 20, 30], true];
console.log(Arr[3][0]); // 10
console.log(Arr[3][1]); // 20
console.log(Arr[3][2]); // 3003. 배열의 요소 수정 (Array Methods)
배열에서는 인덱스 번호를 이용하여 요소를 수정한다.
let Arr=[21, 365, "Nice", true];
Arr[0] = 37; // 21 -> 37
Arr[3] = false; // true -> false
console.log(Arr); // [37, 365, "Nice", false]push,pop: 배열의 맨 끝에 item을 더하고 빼는 method
let fruits = ["사과", "오렌지"];
fruits.push("배");
alert( fruits ); // 사과, 오렌지, 배
let fruits = ["사과", "오렌지", "배"];
alert( fruits.pop() ); // 배열에서 "배"를 제거하고 제거된 요소를 얼럿창에 띄움.
alert( fruits ); // 사과, 오렌지- 배열의 요소가 하나 남았어도, 요소가 아예 없어져도 Arr 자체는 여전히 배열이다.
✨ 추가 공부 사항 : .push()와 .pop()은 스택에서 데이터를 추가 및 삭제 할 때 쓰이는 메소드
Why?
A. 자바스크립트는 스택과 큐와 관련이 있다.⦁ 스택에서도 동일하게 데이터를 추가할 때는 push(), 데이터를 삭제할 때는 pop()을 쓴다.
⦁ 자바스크립트 배열은 스택의 특성을 그대로 살린 push()와 pop() 메소드를 제공한다. 따라서 자바스크립트 배열을 이용하면 손쉽게 스택을 구현할 수 있다.
⦁ 자바스크립트에서 모든 함수 호출은 스택 자료 구조로 이루어져 있다.
⦁ 자바스크립트 배열로 스택뿐만 아니라 큐도 만들 수 있다.
shift,unshift: 배열의 맨 앞 item부터 빼고 더하는 method
let fruits = ["사과", "오렌지", "배"];
alert( fruits.shift() ); // 배열에서 "사과"를 제거하고 제거된 요소를 얼럿창에 띄움.
alert( fruits ); // 오렌지, 배
let fruits = ["오렌지", "배"];
fruits.unshift('사과');
alert( fruits ); // 사과, 오렌지, 배💡 push와 unshift는 요소 여러 개를 한 번에 더해줄 수도 있다.
let fruits = ["사과"]; fruits.push("오렌지", "배"); fruits.unshift("파인애플", "레몬"); // ["파인애플", "레몬", "사과", "오렌지", "배"] alert( fruits );
-
indexOf: 아이템의 인덱스를 찾는다. 없으면-1을 출력한다. -
Slice: array의 부분을 복사하는 method
fruits.slice(1,3); // 시작과 끝 입력
fruits.slice() // 전체 복사length: length property는 배열 내 요소의 개수가 아니라 가장 큰 인덱스에 1을 더한 값이다. 따라서 배열에 요소가 하나 있고, 이 요소의 인덱스가 아주 큰 정수라면 배열의 length property도 아주 커진다.
let fruits = [];
fruits[123] = "사과";
alert( fruits.length ); // 124- length property의 또 다른 독특한 특징 중 하나는 쓰기가 가능하다는 점이다.
length의 값을 수동으로 증가시키면 아무 일도 일어나지 않는다. 그러나 값을 감소시키면 배열이 잘린다. 짧아진 배열은 다시 되돌릴 수 없다.
let arr = [1, 2, 3, 4, 5];
arr.length = 2; // 요소 2개만 남기고 자름.
alert( arr ); // [1, 2]
arr.length = 5; // 본래 길이로 되돌림.
alert( arr[3] ); // undefined --> 삭제된 기존 요소들이 복구되지 않음.이런 특징을 이용하면 arr.length = 0;을 사용해 아주 간단하게 배열을 비울 수 있다.
.length - n: 배열의 길이를 사용하여 인덱스 구하기
- .length - n 사용.
- 배열의 길이보다 더 많은 정수를 뺀다면 undefiend가 리턴됨.
let Arr=[21, 365, "Nice", [10, 20, 30], true];
console.log(Arr[Arr.length - 1]); // 마지막 요소 출력 --> true
console.log(Arr[Arr.length - 2]);
console.log(Arr[Arr.length - 3]);
console.log(Arr[Arr.length - 4]);
console.log(Arr[Arr.length - 5]);
console.log(Arr[Arr.length - 6]); // undefined💡 When?
- 배열의 요소들이 많아 가늠하기 어려울 경우, 배열의 길이를 따로 구할 수 있다.
.length를 사용하면 배열에 요소가 얼만큼 들어있는지 확인할 수 있다.- 배열의 길이에서 - 1을 한다면, 마지막 요소에 어떤 값이 들어있는지 확인할 수 있다.
let Arr=[25, 1004, "Good", [20, 40, 60], true, 3, 342, 2534, 6345235, 234, 62342, 23754, 7657, 7523, 23, 745, 453]; console.log(Arr.length); // 17 -> Arr의 길이 출력 = Arr의 요소가 몇 개나 들어 있는지 console.log(Arr[Arr.length - 1]); // 453 -> Arr의 마지막 요소 출력
toString: 배열엔toString메소드가 구현되어 있어 이를 호출하면 요소를 쉼표로 구분한 문자열이 반환된다.
let arr = [1, 2, 3];
alert( arr ); // 1, 2, 3
alert( String(arr) === '1, 2, 3' ); // truealert( [] + 1 ); // "1"
alert( [1] + 1 ); // "11"
alert( [1,2] + 1 ); // "1,21"배열엔 Symbol.toPrimitive나 valueOf 메소드가 없다. 따라서 위 예시에선 문자열로의 형 변환이 일어나 []는 빈 문자열, [1]은 문자열 "1", [1,2]는 문자열 "1,2"로 변환된다.
💡 이항 덧셈 연산자
"+"는 피연산자 중 하나가 문자열인 경우 나머지 피연산자도 문자열로 변환한다. 따라서 위 예시는 아래 예시와 동일하게 동작한다.alert( "" + 1 ); // "1" alert( "1" + 1 ); // "11" alert( "1,2" + 1 ); // "1,21"
