[CS] 배열 Day-12

배열과 객체를 통해 대량의 데이터를 쉽게 다룰 수 있습니다.

배열과 객체를 다루기 위해서는 참조 타입(reference type)데이터에서 배워야 합니다.
참조 타입은(숫자, 문자열, boolean, undefined 등)과 다른 성격을 가지고 있습니다.

배열 (Array)

배열은 중요하기 때문에 요소를 추가하거나 변경, 삭제하는 방법을 잘 배워야 합니다.

배열의 기초

index, element, length
arr[0], push, pop
배열에서 특정 인덱스(index)의 요소(element)를 조회하거나 변경할 수 있습니다.

배열의 반복

배열의 각 요소에 대해 반복 코드를 실행시킬 수 있습니다.
기본적인 for문 (let i = 0; i < 5; i++)을 활용하여 다양한 for문을 만들 수 있고, 조건문을 응용하여 특정 조건에서만 코드를 실행시킬 수 있습니다.

배열의 기초 Method

배열 요소(element)를 조회할 수 있습니다. bracket notation
배열을 복사, 분리하는 법을 이해해야 합니다. slice, splice
변수, 데이터 또는 특정 값이 배열인지 아닌지 판별할 수 있습니다. Array.isArray
배열의 요소(element)를 추가 및 삭제할 수 있습니다. push, unshift, pop, shift
배열의 길이를 구할 수 있습니다. Length
변수, 데이터 또는 특정 값이 배열에 포함되어 있는지 확인할 수 있습니다. indexOf, includes

배열

배열이란 순서가 있는 값을 의미합니다.
배열에서는 값을 요소(element)라고 부릅니다.

배열에서는 순서를 index(인덱스)라고 부릅니다.
순서는 1이 아닌 0부터 시작됩니다.

배열은 대괄호(square bracket)을 이용해서 만듭니다.
요소(element)는 쉼표(comma)로 구분해줍니다.

배열의 길이를 알아보는 .length

let myNumber = [[13, 30], [73, 8], [44, 17]];

console.log(myNumber.length); // 3을 출력하게 된다.

위와 같이 .length를 입력해 배열의 길이가 3이라는 것을 알 수 있다.

배열에 값을 추가하거나 삭제하는 .push .pop

배열에 값을 추가하는 .push
.push를 사용할 경우 배열 마지막에 추가된다.

반대로 배열에 값을 제거하는 .pop
.pop을 사용할 경우 배열의 마지막 값을 제거한다.

배열인지 확인 할 때는 typeOf가 아닌 Array.isArray를 사용해야한다.

배열에 typeOf를 사용할 경우 object를 반환한다.
따라서 배열에는 Array.isArray({배열 이름});
Array.isArray를 통해 true, false 반환을 보고 배열인지 아닌지를 확인할 수 있다.
ex)

let words = ['배', '꿀', '사과'];

console.log(typeof(words));
console.log(Array.isArray(words)); // 배열이 경우 true를 반환한다.

배열 method 정리

1. 배열 뒤에 element를 추가할 때 => push
2. 배열 뒤에 element를 삭제할 때 => pop
3. 배열 앞에 element를 추가할 때 => unshift
4. 배열 앞에 element를 삭제할 때 => shift

let arr = ['code', 'states'];

arr.push('pre'); // states 뒷쪽에 pre가 추가된다.
arr.push('full'); // pre 뒷쪽에 full이 추가된다.

console.log(arr);
// 배열에 데이터를 추가하는 건 push 였지만


// 반대로 삭제하는 건 pop 이다.
arr.pop();
console.log(arr); // 상단의 pop을 통해 뒷쪽에서 삭제할 수 있다.



// 앞에서부터 삭제할  수 있다.
// shift 를 통해 0번 째부터 삭제할 수 있다.
arr.shift();
console.log(arr);



// 앞에서부터 추가할 수도 있다. push 는 뒷쪽에서부터 추가한다.
// 따라서 앞에서부터 추가할 때는 Unshift를 사용하면 된다.
arr.unshift('hello');
console.log(arr);

배열 요소 포함 여부 확인하기 (indexOf, includes)

indexOf 배열에 들어있는지 여부를 확인하고 index를 출력한다.

let words = ['Radagast', 'the', 'Brown'];

// 특정 단어가 words 배열 안에 들어있는지 확인을 할 때

words.indexOf('the');
console.log(words.indexOf('the'));
// 1을 출력한다.

indexOf에 없는 단어를 입력할 경우 -1을 출력합니다.

let words = ['Radagast', 'the', 'Brown'];
console.log(words.indexOf('hello')); // -1 을 출력

indexOf를 통해 단어가 존재하는지 확인할 수 있습니다.

console.log(words.indexOf('Brown') !== -1);
// true를 출력합니다.  !== -1 에 대한 이해가 필요합니다.

includes 를 통해서 존재 여부를 확인 할 수 있습니다.

let words = ['Radagast', 'the', 'Brown'];

console.log(words.includes('the'));
// the 가 있기 때문에 true를 반환합니다.

그럼에도 불구하고 includes 대신 indexOf를 사용하는 이유는 indexOf를 통해서는 정보도 얻을 수 있지만 includes는 존재 여부만 알 수 있고, 호환성 문제가 있다.