배열 (Array)
자바스크립트에서 배열은 이름과 인덱스로 참조되는 값의 집합.
각 값인 element, 위치를 가리키는 index로 구성되어 있다.
배열의 특징
- 주로
const로 선언하며, 복수형으로 네이밍한다. - 같은 배열에 있는 배열 요소끼리의 타입이 다를 수도 있다.
예를들어, [1, 2, 3, fruit: banana]가 가능하다.
왜냐하면 배열은 곧 객체이기 때문이다. - 배열 요소의 인덱스가 연속적이지 않아도 된다.
따라서 특정 배열 요소가 비어 있을 수도 있다. - 하나의 이름으로 다양한 데이터를 다룰 수 있다.
- 배열의 마지막 인덱스는
array.length - 1이다.
왜냐하면 배열의 첫번째 값은 0부터 시작한다.
const fruits = ["Banana", "Melon", "Grape", "Kiwi"];
console.log(fruits[0]); // "Banana"
console.log(fruits[fruits.length-1]);// "Kiwi"배열의 생성
자바스크립트에서 배열 만드는 방식 3가지
- 배열 리터럴을 이용하는 방법
const arr1 = [a, b, c, ...];- Array 객체 생성자를 이용하는 방법
const arr2 = Array(a, b, c, ...);- new 연산자를 이용한 Array 객체 생성 방법
다만, new 연산자는 가독성이 좋지 않고, 실행 속도가 느린 단점이 있다.
const arr3 = new Array(a, b, c, ...);배열의 참조
index로 배열에 접근할 수 있다.
const emotions = []; // 비어있는 배열 생성
emotions[0] = "happy"; // 배열의 첫 번째 요소에 "happy"를 추가
console.log(emotions); // ["happy"] 출력
console.log(emotions.length); // 배열의 길이는 1
emotions[1] = "sad"; // 배열의 두 번째 요소에 "sad" 추가
console.log(emotions); // ["happy", "sad"]
cosnole.log(emotions.length); // 배열의 길이는 2
console.log(emotions[1]); // "sad"가장 마지막처럼 배열[index]로 해당 값을 출력할 수 있다.
배열 요소 추가
자바스크립트에서 배열에 새로운 배열 요소를 추가하는 방식 3가지.
- push()
push() 메서드는 배열의 마지막에 추가한다.
const colours = [];
colours.push("red");
console.log(colours); // ["red"]- unshift()
unshift() 메서드는 배열의 첫 번째에 추가한다.
const colours = ["red", "yellow"];
colours.unshift("blue");
console.log(colours); // ["blue", "red", "yellow"]- length 프로퍼티를 이용하는 방법
배열의 마지막에 추가된다.
const numbers = [1, 2, 3, 4];
numbers[numbers.length] = 5;
console.log(numbers); // [1, 2, 3, 4, 5]원본 배열을 변경하는 메서드
push() : 배열의 마지막에 요소를 추가
pop() : 배열의 마지막 요소를 제거 & 제거된 요소 반환
unshift() : 배열의 첫 번째 요소를 추가
shift() : 배열의 첫 번째 요소를 제거하고, 제거된 요소를 반환
reverse() : 배열의 순서 반대로 돌려버림
sort() : 정렬할때 사용.
const numbers = [4, 2, 6, 1, 3, 5];
numbers.sort((a,b)=> a-b); // 작은것부터 정렬. 반대는 b-a
console.log(numbers); // [1, 2, 3, 4, 5, 6]splice() : 배열의 요소를 제거 & 제거 후 해당 자리에 새로운 요소를 추가할 수 있다.
const numbers = [1, 2, 3, 4, 5, 6, 7];
numbers.splice(1, 2); // 배열의 1번째부터 2개를 없애준다.
console.log(numbers); // [1, 4, 5, 6, 7];
numbers.splice(1, 4, "일", "one"); // 1번째부터 4개를 없애주고, "일", "원" 추가
console.log(numbers); // [1, "일", "one"]배열을 참조만 하는 메서드
join() : 배열의 모든 요소를 하나의 문자열로 반환
const nums = [1, 2, 3];
nums.join("");
console.log(nums); // "123"slice() : 시작 인덱스부터 종료 인덱스 앞까지 새로운 배열로 반환
단, 종료 인덱스가 없으면 끝까지 반환한다.
const nums = [1, 2, 3, 4, 5, 6];
console.log(nums.slice(4)); // [5, 6]concat() : 배열과 배열을 연결
const arr = ["hi", "its", "me"];
arr.concat(["olivia"]);
// ["hi", "its", "me", "olivia"];toString() : 모든 요소를 쉼표(,)로 구분하여 하나의 문자열로 반환
indexOf() : 배열에서 ()안의 값을 찾아서 요소가 있으면 해당 요소의 위치를 index값으로 반환하고, 없으면 -1 반환
lastIndexOf() : 배열의 마지막 요소의 index 번호를 반환
const animals = ['c', 'a', 't'];
console.log(animals.lastIndexOf('t')); // 2반환👩🏻💻 참고자료
https://www.w3schools.com/js/js_arrays.asp
http://www.tcpschool.com/javascript/js_array_basic
