005. JavaScript : 배열

배열은 동일 자료형의 데이터를 묶어서 관리하는 자료형으로 JavaScript에서는 객체(Object)입니다.
객체 순회(Iterate)를 할 때 for in사용하면 for문 보다 느립니다. for in은 프로토타입 체인에 있는 프로퍼티를 모두 훑는(enumerate)데다가 객체 자신의 프로퍼티만 훑으려면 hasOwnProperty를 사용해야 하기 때문입니다.

배열을 만들 때 배열 생성자에 파라미터를 넣어 만드는 방법은 헷갈릴수 있으므로 항상 각 괄호([]) 노테이션을 이용해 배열을 만들 것을 권합니다.

push, pop 보다 unshift, shift가 느립니다.

---

1. 배열에 값 표시 하기 

for 반복문을 사용해서 배열 요소 값을 참조 할 수 있습니다.

var lists = [1, 2, 3, 4, 5];

// ⓐ for ( ; ; )  type
for(let i = 0; i < lists.length;  i++) {
    console.log(lists[i]);  
}

// ⓑ foreach type
for(let list of lists) {
    console.log(list);
}

// ⓒ forEach
lists.forEach(function(item, index, array) {
    console.log(item, index, array);
})

// ⓓ 화살표 함수
lists.forEach((item, index) =>  console.log(item, index ));
lists.forEach((item) =>  console.log(item));

---

2. push, pop, unshift, shift

push는 배열의 마지막 요소에 데이터를 추가 하고 unshift는 데이터를 앞에 추가 합니다.
pop, shift는 요소의 값을 빼오는 것 입니다.

 

let arrs = [1, 2];

// 뒤에서 작업 
arrs.push(3,4);
console.log(arrs);  // (4) [1, 2, 3, 4]
arrs.pop();
console.log(arrs);  // (2) [1, 2, 3]

// 앞에서 작업
arrs.unshift("앞1","앞2");
console.log(arrs); // (5) ['앞1', '앞2', 1, 2, 3]
arrs.shift();
console.log(arrs); // (4) ['앞2', 1, 2, 3]

---

var list = [1, 2, 3, 4, 5];
for(var i = 0, l = list.length; i < l; i++) {
    console.log(list[i]);     // ⓐ 배열의 index 찾아옴 
}

var arr = [1, 2, 3, 4, 5, 6];
arr.length = 3;
console.log(arr);             // ⓑ (3) [1, 2, 3]

arr.length = 6;
arr.push(4);
console.log(arr);             // ⓒ (7) [1, 2, 3, empty × 3, 4]
arr[5] = 10;
console.log(arr);             // ⓓ (7) [1, 2, 3, empty × 2, 10, 4]
arr[6] = 20;
console.log(arr);             // ⓔ (7) [1, 2, 3, empty × 2, 10, 20]
arr[10] = 200;
console.log(arr);             // ⓕ (11) [1, 2, 3, empty × 2, 10, 20, empty × 3, 200]
console.log(arr[9])           // undefined

---

- ⓐ : 결과 1 2 3 4 5 가 표시됩니다, for 문을 사용해서 표시한 예제입니다.
- ⓑ : arr변수에 1,2,3,4,5,6을 배열로 저장하고 나서 길이를 3으로 설정하면 [1,2,3]의 배열만 남고 나머지는 버려집니다. 그렇기 때문에 배열에 값을 할당하고 길이(length)를 변경하면 데이터가 변경이 되므로 사용하지 말아야 하는 코드 스타일입니다. 특히 for, while문에서 사용하는 의도하지 않는 결과가 나오게 됩니다.
- ⓒ : arr변수 길이을 6으로 설정하고 push(4)를 넣으면 뒤에서 4칸이 추가되고 마지막에 4를 추가합니다. 이것은 길이를 6으로 지정을 하여도 지정된 크기보다 배열 요소가 커지면 자동으로 배열의 크기가 커집니다.
- ⓓ : 5번째 요소 위치에 10을 변경하면 6번째 위치의 값이 변경됩니다. 배열의 요소는 0부터 시작이 되기 때문입니다.
- ⓔ : 10번째 요소 위치에 200을 저장하면 배열의 길이가 늘어나고 비어있는 요소 위치의 값은 undefined로 되어집니다.

3. splice, concat, indexof, lastIndexOf, includes

const lists = [];
lists.push(1, 2, 3); // (3) [1, 2, 3]
console.log(lists);


// 지정한 index를 제외한 모두 삭제 
lists.splice(1);
console.log(lists); // [1]

lists.push(2,3);
console.log(lists); (3) [1, 2, 3]

// 지정한 index를 삭제 하고 해당 index에 삽입 
lists.splice(1, 1, 4, 5, 6);
console.log(lists); // (5) [1, 4, 5, 6, 3]

// 합치기const addLists = [10, 11, 10];
const newLists = lists.concat(addLists);
console.log(newLists); // (8) [1, 4, 5, 6, 3, 10, 11, 10]

// index 찾기console.log(newLists.indexOf(10)); // 5 :: 중복이 있으면 앞에 있는 것의 index
console.log(newLists.lastIndexOf(10)); // 7 :: 중복이 있으면 뒤에 있는 것의 index
console.log(newLists.indexOf(2)); // -1

// 포함 
console.log(newLists.includes(10));  // true
console.log(newLists.includes(2));   // false

---

4. join, split

const cars = ['소나타', 'SM5', '그랜저'];

// 문자열 변환 
let convertString = cars.join();
console.log(convertString); // 소나타,SM5,그랜저

// 구분자 추가 하여 문자열 변환
convertString = cars.join("#"); 
console.log(convertString); // 소나타#SM5#그랜저

// string를 array로 변환 
const carString = '소나타,SM5,그랜저';

// , 로 분리 하여 array로 변경
let convertArray = carString.split(",")
console.log(convertArray); // (3) ['소나타', 'SM5', '그랜저']
onvertArray = carString.split(",", 2);
console.log(onvertArray); // (2) ['소나타', 'SM5']

---

5. reverse

const cars = ['소나타', 'SM5', '그랜저'];
let carsReverse = cars.reverse();
console.log(carsReverse); // (3) ['그랜저', 'SM5', '소나타']
console.log(cars); // (3) ['그랜저', 'SM5', '소나타']

---

6. splice와 slice 의 차이점

let cars = ['소나타', 'SM5', '그랜저'];
let newCars = cars.splice(0,1); // 원본이 외곡됨 
console.log(newCars); // ['소나타'] -> 삭제 된 값
console.log(cars);    // (2) ['SM5', '그랜저'] -> 남아 있는 값 

cars = ['소나타', 'SM5', '그랜저'];
newCars = cars.slice(1,3); // 원본이 외곡 되지 않음 
console.log(newCars);      // (2) ['SM5', '그랜저']
newCars = cars.slice(0,1);
console.log(newCars);      // ['소나타']
newCars = cars.slice(1,2);
console.log(newCars);      // ['SM5']
console.log(cars);         // (3) ['소나타', 'SM5', '그랜저']