프로그래밍에서 데이터를 정리하는 것은 중요한 일이다.
Array는 데이터를 List로 만들어 관리하는 방법으로 순서에 따라 번호를 매겨 관리할 수 있으며 모든 유형의 데이터를 저장할 수 있다.
변수가 하나의 데이터를 저장하기 위함이라면 배열은 여러개의 데이터를 하나로 묶어 저장하기 위함이다.
1. 배열 생성
: Array를 만드는 방법은 element를 square bracket[]에 넣는 것만으로 쉽게 만들 수 있다.
[1, 'ash', true]- 위의 Array에는 숫자, String, Boolean이 모두 들어가 있다.(즉, 모든 유형의 데이터를 넣을 수 있다)
- 각각의 항목을 Element라고 한다.
''와 같이 비어있는 Element도 배열에 들어갈 수 있다.
var newArray = [1, 'ash', true];
console.log(newArray); // Output: [1, 'ash', true]- Array는 변수에 넣어 사용할 수 있다.
2. 배열 접근 방법
: 각각의 데이터(엘리먼트)를 묶어만 둔다면 묶는 의미가 없다. 이것을 꺼내서 사용할 수 있어야 한다.
배열의 Element에는 인덱스라는 각각의 위치 번호가 존재한다.
이것을 통해 Element에 접근해서 여러가지 기능을 수행할 수 있다.
var newArray = [1, 'ash', true];- 첫번째 엘리먼트의 인덱스는 '0'에서 시작한다.(1에서 시작하는 것이 아님을 명심하자, 항상 length보다 1 작다)
1의 index는 0,'ash'는 1,true는 2가 된다.
var newArray = [1, 'ash', true];
console.log(newArray[0]) // Output: 1- 배열은 객체에 저장해서 쓸 수 있다.
- 접근하는 방법은
배열이 저장된 객체명[인덱스 번호]으로 접근할 수 있다. - square bracket
[]안에는 인덱스 번호를 넣으면 된다.
newArray[newArray.length - 1]- 아래 나올 Property 인
.length를 이용해서 접근도 가능하다.(왜냐하면 length가 number를 반환하기 때문이다.) - 위의 코드는 newArray의 마지막 엘리먼트로 접근시켜준다.
3. 배열 요소 변경
: Element는 언제든 변경이 가능하다.
var newArray = [1, 'ash', true];
newArray[0] = 2- 엘리먼트에 접근하는 방법과 동일하게 square bracket
[]을 사용하여 접근한 후 초기화 해주면 된다. - 위와 같이 입력후 로그를 찍어보면 0번 인덱스는
2로 변경된 것을 확인할 수 있다.
4. 배열 요소 추가
: 엘리먼트를 추가하는 방법은 사실 아래 나올 push 메서드로 가능하다.
하지만 다른 방법으로도 가능하다.
cities[0] = "서울"; // ["서울"]
cities[1] = "대전"; // ["서울", "대전"]
cities[2] = "대구"; // ["서울", "대전", "대구"]- 엘리먼트는 존재하는 공간에서는 채인지가 되지만 이렇게 길이를 늘려서 추가할 수도 있다.
cities[5] = "제주도"- 그렇다면 3,4번 인덱스가 없는 어레이에 5번부터 집어넣으면 어떻게 될까?
["서울", "대전", "대구", undefined, undefined, "제주도"]- 정답은 들어간다. 비어있는 인덱스는 undefined로 채워지고 원하는 위치에 넣을 수 있다.
4. let 또는 const로 선언한 배열
: const로 선언된 변수는 재할당 할 수 없다. (참조 : Scope)
그러나 const로 선언된 배열의 Element는 언제든 변경이 가능하다.
즉, 새로운 배열을 할당하거나 다른 변수로 초기화 하는 것은 불가능 하지만 Element는 변경할 수 있다는 의미
5. 배열의 Property
: 배열은 기본 Property와 Mathod를 가진다.
그중 Property는 .length 라는 기본 속성이 있다.
const newName = ['Sang Hyuk', 'Gyon'];
console.log(newName.length); // Output: 2- 엘리먼트의 길이가 아닌 배열의 갯수라고 보면 된다.
- Length에서 1을 빼면 인덱스와 동일해진다.(물론 인덱스로 배열에 접근 할때도 Length를 사용할 수 있다.)
6. 배열의 Method
1) Array.push()
: 배열의 가장 마지막에 새로운 엘리먼트 1개 이상을 추가 시킨다.
const animals = ['pigs', 'goats', 'sheep'];
const count = animals.push('cows');
console.log(count); // output: 4
console.log(animals); // output: ["pigs", "goats", "sheep", "cows"]
animals.push('chickens', 'cats', 'dogs');
console.log(animals); //output: ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]- Return :
길이를 반환한다. - 형식 : push(
마지막에 추가시킬 엘리먼트들) - 새로운 변수에 초기화할 경우 기존 배열에 합쳐진
길이만큼 output된다. - 여러개의 엘리먼트를 inpiut 하는 것도 가능하다.
- 원본 배열은 변경된다.
2) Array.concat()
: push는 한개의 엘리먼트만 추가시켰다면 여러개의 엘리먼트를 추가시키고 싶을때는 concat을 사용한다.
const abc = ['a', 'b', 'c', 'd', 'e'];
const li = abc.concat('f', 'g');
console.log(li); // output: ['a', 'b', 'c', 'd', 'e', 'f', 'g']- Return : concat이 적용된 복사된 원본 배열이 반환된다.
- 형식 : concat(엘리먼트'들' 또는 배열)
- 원본 배열은 변경되지 않는다.
3) Array.pop()
: 배열에서 마지막 엘리먼트를 제거한다.
const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
console.log(plants.pop()); // output: "tomato"
console.log(plants); // output: ["broccoli", "cauliflower", "cabbage", "kale"]
plants.pop();
console.log(plants); // output: ["broccoli", "cauliflower", "cabbage"]- Return : 배열에서 제거된
엘리먼트를 반환한다. - 형식 : pop()
파라미터는 없다 - 비어있는 배열을 제거할 경우
undefined를 반환한다. - 원본 배열은 변경된다.
4) Array.shift()
: 배열의 맨 앞 엘리먼트를 제거한다.
const newArray = [1, 2, 3];
const firstElement = newArray.shift();
console.log(newArray); // output: [2, 3]
console.log(firstElement); // output: 1- Return : 배열에서 제거된
엘리먼트를 반환한다. - 형식 : shift()
파라미터는 없다 - 비어있는 배열을 제거할 경우
undefined를 반환한다. - 원본 배열은 변경된다.
5) Array.unshift()
: 배열의 맨 앞에 새로운 엘리먼트 1개 이상을 추가 시킨다.
const newArray = [1, 2, 3];
console.log(newArray.unshift(4, 5)); // output: 5
console.log(newArray); // output: [4, 5, 1, 2, 3]- Return :
길이를 반환한다. - 형식 : unshift(
맨앞에 추가시킬 엘리먼트들) - 새로운 변수에 초기화할 경우 기존 배열에 합쳐진
길이만큼 output된다. - 여러개의 엘리먼트를 input 하는 것도 가능하다.
- 원본 배열은 변경된다.
6) Array.slice()
: 배열의 원하는 시작점부터 끝점까지를 복사해 새로운 배열로 반환한다.
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2)); // output: ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4)); // output: ["camel", "duck"]
console.log(animals.slice(1, 5)); // output: ["bison", "camel", "duck", "elephant"]- Return : 복사한 엘리먼트를 담은 새로운
배열을 반환한다. - 형식 : Slice(
시작점,끝점) - 파라미터에는
인수가 아닌인덱스가 위치한다. - 시작점이 length보다 큰 경우 빈 배열을 반환한다.
- 끝점이 length보다 크거나, b는 생략될 경우 마지막까지 복사한 배열을 반환한다.
- 원본 배열은 변경되지 않는다.
7) Array.splice()
: 배열의 기존 엘리먼트를 삭제, 교체하거나 추가하여 기존 배열을 변경합니다.
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months); // output: ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, 'May');
console.log(months); // output: ["Jan", "Feb", "March", "April", "May"]- Return : 제거한 엘리먼트를 담은
배열을 반환한다. - 형식 : Splice(
변경 시작점,제거할 엘리먼트 수,추가시킬 엘리먼트들) - 하나의 요소만 제거한 경우 길이가 1인 배열을 반환한다.
- 아무 것도 제거하지 않았으면 빈 배열을 반환한다.
- 원본 배열은 변경된다.
8) Array.indexOf()
: 배열 내에서 찾고자 하는 엘리먼트를 서칭하여 첫번째로 발견된 인덱스를 반환한다.
const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison')); // output: 1
console.log(beasts.indexOf('bison', 2)); // output: 4
console.log(beasts.indexOf('giraffe')); // output: -1- Return : 발견된 엘리먼트의
인덱스를 반환한다. - 형식 : Splice(
찾고자 하는 엘리먼트,몇번째 위치에 있는지) - 위치 미지정시, 배열 내에
최초 엘리먼트의인덱스를 반환한다. - 서칭해서 동일한 엘리먼트가 없을 경우
-1을 반환한다.
9) Array.some()
: 배열 안의 엘리먼트가 주어진 조건을 통과하는지 테스트한다.
function isBiggerThan10(element, index, array) {
return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10); // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true- Return : True, false를 반환한다.
10) Array.every()
: 배열 안의 엘리먼트가 모두 주어진 조건을 통화하는지 테스트한다.
11) Arrat.sort()
: 배열 안의 엘리먼트를 정렬하고 싶을때 사용한다.
12) Arrat.reverse()
: 배열 안의 엘리먼트를 역순으로 정렬하고 싶을때 사용한다.
8. Nested Arrays
: 배열 안에 배열을 만들 수 있다.
const nestedArr = [[1], [2, 3]];
console.log(nestedArr[1]); // Output: [2, 3]
console.log(nestedArr[1][0]); // Output: 2- 접근 하는 방법은 square bracket을 여러개 써서 원하는 엘리먼트에 접근할 수 있다.
.jpg)
"꾸준한 삽질과 우연한 성공"