[inflearn] javascript: Array

1. Array란?

let fruit = ['apple', 'banana', 'peach', 'strawberry'];

fruit라는 배열이 표현되어 있다.
대괄호로 묶여있으면 배열이다.
사과를 한번 꺼내보자.

document.write('${과일[0]}');
-> 사과

2. 배열 만들기

let fruit = new Array(5)
let truit = new Array('apple', 'banana', 'peach', 'strawberry');

두 줄 모두 배열을 생성하는 방법이다. 마지막 줄은 잘 사용되지는 않는다.

3. 배열의 내장함수

1️⃣ pop()

let fruit = ['apple', 'banana', 'peach', 'strawberry'];
document.write(${fruit.pop()});

위의 스니펫에서는 strawberry라는 원소가 삭제된다.

2️⃣ push()

let picked = fruit.pop()
document.write(${fruit.push(picked)});
	-> 5

위에서는 꺼낸 과일을 picked라는 변수에 할당하게 되는데, push라는 함수는 과일의 인덱스 번호를 출력한다.

3️⃣ toString()

document.write(${fruit.toString(picked)});
	-> apple banana peach strawberry

위에서 출력된 내용은 문자열이다.

4️⃣ join()

document.write(${fruit.join(!!)});
	-> apple!!banana!!peach!!strawberry

5️⃣ shift()

document.write(${fruit.shift()});
	-> apple

pop()과 반대로, 맨 앞의 원소가 삭제된다.
삭제할 원소 'apple'이 출력되고, fruit라는 배열만 출력해보면 나머지 과일들이 나온다.
fruit 배열에는 현재 banana, peach, strawberry만 찍히는 셈.

6️⃣ splice()

document.write(${fruit.splice(1, 0, orange)});
	-> banana orange peach strawberry

splice 함수의 인자는 각각 '인덱스값', '대체할 요소의 갯수', '대체할 값'이다.
따라서, 위의 코드는 '1번째 인덱스에서 요소는 대체하지 않고 orange라는 값만 넣는다'는 의미이다.

7️⃣ splice()

document.write(${fruit.slice(0, 2)});
	-> banana, orange

slice는 인덱스값을 지정해서 자른다는 의미이다. 두번째 인자값의 인덱스는 제외한다.
즉, 세번째 원소였던 peach의 인덱스가 2이기 때문에 그 이전의 값만 출력한다는 의미이다.

7️⃣ concat()

let newFruit = ['cherry', 'melon'];
document.write(${fruit.concat(newFruit)});
	-> banana, orange, peach, strawberry, cherry, melon

체리와 멜론이 추가되었다! 그러나, 기존 fruit 배열에는 추가되지 않는다.

8️⃣ sort()

document.write(${fruit.sort()});
	-> banana, orange, peach, strawberry

이름순으로 정렬된다. (=사전식 정렬)
1, 11, 2, 22라는 문자열로 구성된 배열에서 sort()를 사용하면 순서가 바뀌지 않는다.

9️⃣ reverse()

document.write(${fruit.reverse()});
	-> strawberry, peach, orange, banana

정렬되지는 않지만, 원래 순서에서 역순으로 나열해준다.

🔟 length

document.write(${fruit.length});
	-> 4

길이를 구해준다. 소괄호는 사용하지 않는다.

1️⃣1️⃣ unshift()

document.write(${fruit.unshift('chocolate')});
	-> chocolate, banana, orange, peach, strawberry

shift가 맨 앞 원소를 삭제하는 것과 반대로, 맨 앞에 원하는 원소를 추가한다.