배열

이론

배열 순서(index:0부터)가 있는 값(요소:element), []와 ,를 이용해서 만든다.
. : 온점(dot)을 이용해서 변수가 가지고 있는 속성(property)에 접근할 수 있다. 관련된 명령(method)도 실행할 수 있다. 명령을 실행할 때는 함수를 실행하듯 괄호를 열고 닫는 형태로 실행한다.

배열 값 변경

let 배열이름 = [0, 1, 2, 3, 4];
배열이름[index] = 할당할 값;
지정되지 않은 배열의 값은 undefined
let asd = [0, 1, 2, 3];
asd[4]; // undefined
let abc = [[0,1],[2,3],[4,5]];
abc // (3) : 3개의 length; [Array(2), Array(2), Array(2)] : 3개(2 length)의 배열
abc[2][0] // 4 // 2차원 배열
abc.length // 3

반복

배열과 반복문은 자주 조합해서 쓰인다.

let myNum = [10, 20, 40, 10];
for(let i = 0; i < myNum.length; i++){
	console.log(myNum[i]);
}
let result = 0;
for(let i = 0; i < myNum.length; i++){
	result += myNum[i];
}

메서드

split() : 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. 원본 배열 자체를 수정한다.
join() : 배열안에 있는 요소들을 합쳐준다.

const a = ["Wind", "Water", "Fire"];
a.join(); // 'Wind,Water,Fire'
a.join(", "); // 'Wind, Water, Fire'
a.join(" + "); // 'Wind + Water + Fire'
a.join(""); // 'WindWaterFire'

slice() : 배열을 복사해 붙여넣는다.(새 배열로 만든다)
splice(start, deleteCount, '넣을 요소') : 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.
Array.isArray() : ()안의 요소가 배열이 맞는지 확인해 불리언 값을 반환한다.
push() : 배열 끝에 값을 추가한다.
unshift() : 배열 앞에 값을 추가한다.
pop() : 배열 마지막 값을 삭제한다.
shift() : 배열 첫번째 값을 삭제한다.
indexOf() : 배열 내에 ()안의 요소가 존재하는지 확인하고 해당 요소의 인덱스 값을 반환한다.
includes() : 배열 내에 ()안의 요소가 존재하는지 확인해 불리언 값을 반환한다. indexOf에 비해 브라우저 호환성이 떨어진다.
배열.concat(추가할 배열) = (CONCATENATE)기존 배열을 변경하지 않고 배열을 합친 새 배열을 반환함
Object.entries()는 호출할 때 argument로 전달한 객체를 배열로 반환하는 메서드

// 아래 객체가 있을 때
const obj = {
  name: 'Jaehun',
  age: 24
};

// 배열로 반환
Object.entries(obj); // -> [['name', 'Jaehun'], ['age', 24]]

for ([key, value] of Object.entries(obj)) {
  console.log(key); // 0번째: 'name',  1번째: 'age'
  console.log(value); // 0번째: 'Jaehun', 1번쨰:; 24
}

let arr = ['code', 'states'];
console.table(example)

(index)	Value
0	'code'
1	'states'

typeof [1 ,2 ,3]; // object
arr.slice(0, n) // 0부터 n-1까지의 인덱스 배열을 복사해 붙여넣는다.
arr.slice(n) // n번째 이후의 배열을 복사해 붙여넣는다.
months.arr(1, 0, 'Feb'); //['code', 'Feb', 'states']
Array.isArray(arr); // true
Array.isArray([1,2,3]); // true
Array.isArray(123); // false
arr.push('pre'); // arr = ['code', 'states', 'pre'];
arr.pop(); // 'pre' / arr = ['code', 'states'];
arr.shift(); // 'code' / arr = ['states'];
arr.unshift('code'); // arr = ['code', 'states'];
arr.indexOf('없는단어'); // -1
arr.indexOf('code'); // 0
arr.indexOf('states'); // 1
fuction hasElement(arr, element){
  	let isPresent =  arr.indexOf(element) !== -1;
	return isPresent;
}
arr.includes('code'); // true
arr.includes('없는 단어') // false

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
array1.concat(array2); // ["a", "b", "c", "d", "e", "f"]

깊은복사 얕은복사

깊은복사 : 객체의 실제 값을 복사
얕은복사 : 객체의 참조값(주소 값)을 복사

참조

slice() vs splice()