[JavaScript] 배열

---

배열

이름과 인덱스로 참조되는 정렬된 값의 집합(자료구조)

배열을 구성하는 각각의 값을 배열요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 함

let 배열명;
배열명 = [요소1, 요소2, 요소3, 요소4, ...];

const 배열명 = Array(요소1, 요소2, 요소3, ...);

let arr;
arr = [100, 200 ,300];

const Arr = Array(100, 200, 300);

자바스크립트의 배열은 요소의 타입이 같지 않아도 된다. 

let arr = [1, 1.4, 'hello', true];

---

자바스크립트의 배열은 인덱스가 연속적이지 않아도 된다.

// let arr;
// 배열을 정의하지 않고 접근하면 에러
let arr = [];
arr[0] = 10;
arr[3] = 2;
arr[5] = 10;
console.log(arr);
console.log(arr[4]);
console.log(arr.length);

---

배열의 접근

const user = [1, 'apple', '김사과', 20, '동대문구']
console.log(user);
console.log(user[0]);
console.log(user[1]);
console.log(user[2]);
console.log(user[3]);
console.log(user[4]);

---

배열 값 변경

const user = [1, 'apple', '김사과', 20, '동대문구']
console.log(user);
console.log(user[4]);
user[4] = '강남구';
console.log(user[4]);

---

Array 객체 메서드

push(): 배열의 요소를 추가
pop(): 배열의 마지막 인덱스에 있는 값을 제거
shift(): 배열의 첫번째 인덱스에 있는 값을 제거
concat(): 두 배열을 합침
join(): 배열 요소 사이에 원하는 문자를 삽입
reverse(): 배열을 역순으로 재배치
sort(): 배열을 오름차순으로 정렬

push()

let arr = [1, 2];
arr.push('hello')
console.log(arr);

---

pop()

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

let result = arr.pop()
console.log(result);

console.log(arr);

---

shift()

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

let result = arr.shift()
console.log(result);

console.log(arr);

---

concat()

let arr = [1, 2, 3, 5];
const arr2 = ['hello', 'javascript']

let result = arr.concat(arr2);

console.log(arr);
console.log(arr2);
console.log(result);

---

join()

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

let result = arr.join(' and ');

console.log(arr);
console.log(result);

---

reverse()

const arr = [1, 10, 3, 5, 2, 6, 4];

arr.reverse();
console.log(arr);

---

sort()

const arr = [1, 10, 3, 5, 2, 6, 4];

arr.sort();
console.log(arr);

자바스크립트 Array객체 sort() 메서드는 모든 요소들을 문자열로 보고 정렬함

---

배열을 이용한 반복

배열 또는 객체를 이용한 반복문

 

for in 문: 변수에 배열의 인덱스나 객체의 key가 저장되며 반복

for of 문: 변수에 배열의 value 또는 객체의 value가 저장되며 반복

forEach 문: 배열에서만 사용 가능하며, 요소의 개수만큼 반복

for in 문

✓ array

const userArr = [1, 'apple', '김사과', 20, '동대문구'];
for(let i in userArr){
    console.log(`i: ${i}, userArr[${i}]: ${userArr[i]}`);
}

 

✓ object

const userObj = {userid:'apple', name:'김사과', age:20};
for(let i in userObj){
    console.log(`i: ${i}, userObj[${i}]: ${userObj[i]}`);
}

---

for of 문

✓ array

const userArr = [1, 'apple', '김사과', 20, '동대문구'];
for(let v of userArr){
    console.log(`value: ${v}`);
}

 

✓ object

const userObj = {userid:'apple', name:'김사과', age:20};
for(let v of userObj){
    console.log(`value: ${v}`);
}

객체(Object)는 iteravle 객체가 아니다. iterable 객체는 순서가 있어야 한다. key-value 구조의 객체(Object)는 key값을 통해 value에 접근해야한다. 따라서 for of 를 사용하려면 아래와 같이 해야한다.

const userObj = {userid:'apple', name:'김사과', age:20};
for(let key of Object.keys(userObj)){
    console.log(`key: ${key}, value: ${userObj[key]}`);
}

---

forEach 문

const userArr = [1, 'apple', '김사과', 20, '동대문구'];
userArr.forEach(function(v, i, arr){
    console.log(`v: ${v}, i: ${i}, arr: ${arr}`);
})

forEach() 안에는 callback 함수를 넣어 그 함수를 배열 요소 개수만큼 반복한다.