모던 자바스크립트 정리

배열

• 객체는 순서를 고려하지 않고 만들어진 자료구조
• 배열은 순서가 있는 컬렉션을 저장할 때 쓰는 자료구조!

  배열 요소로 모든 자료형이 올 수 있다!

let arr = [ '사과', { name: '이보라' }, true, function() { alert('안녕하세요.'); } ];

이런 형태도 가능

배열 선언

//1번 방법
let arr = new Array();

//2번 방법
let arr = [];

2번 방법이 가장 자주 쓰이고, 선언과 동시에 초기 요소를 넣어줄 수도 있다.

let kopi = ["승희", "은빈", "연서", "지민"];

new Array()

• 이 방법으로도 선언과 동시에 초기값을 넣어줄 수 있다.

let arr = new Array("숭", "혜","은", "연", "지");

• 배열의 요소는 지정해주지 않고 길이만 설정해줄 수도 있다.

let arr = new Array(5);
console.log(arr[1]);
//output -> undefined
console.log(arr.length);
//5

길이만 지정되고, 각 요소는 비어있기 때문에 출력을 할 경우 undefined로 나온다.

인덱스

• 배열 내 순서를 의미
• 배열[인덱스] 를 통해 배열의 특정 요소에 접근할 수 있다.

요소 읽기

console.log(kopi[0]);
// output : 승희

요소 쓰기

kopi[0] = "숭이";

-> ["숭이", "은빈", "연서", "지민"] 으로 바뀜

요소 추가

kopi[4] = "혜인";

-> ["숭이", "은빈", "연서", "지민", "혜인"] 으로 바뀜

배열의 길이

console.log(kopi.length);
// output : 5

배열 전체 출력

console.log(kopi);
// output : 숭이, 은빈, 연서, 지민, 혜인

trailing 쉼표
배열의 마지막 요소도 쉼표로 끝날 수 있다.
let kopi = ["승희", "지민", "은빈", "혜인", "연서",];
-> 배열의 요소를 추가하거나 삭제하기 용이하다.

pop / push / shift / unshift

• 배열을 통해서 Queue와 Stack를 구현할 수 있다.
• 따라서 Queue와 Stack의 대표적인 연산도 배열의 메소드로 구현할 수 있다.

push

• 큐의 맨 뒤에 요소를 추가

shift

• 큐의 맨 앞 요소 제거 후 한칸씩 앞으로 당김

push

• 스택에 요소를 추가 (맨 위에)

pop

• 스택의 마지막 요소를 추출

  Queue는 FIFO(First In First Out), Stack은 LIFO(Last In First Out)

arr.pop()

• 배열의 마지막 요소를 제거하고 반환

arr.push(요소)

• 배열의 끝에 새로운 요소를 추가

arr.push("숭이");

arr[arr.length] = "숭이";

둘은 같은 역할을 수행하는 코드이다.

arr.shift()

• 배열의 첫번째 요소를 제거하고 이를 반환

let kopi = ["숭이", "은빈", "연서", "혜인", "지민"];
kopi.shift();
console.log(kopi);
// output -> 은빈, 연서, 혜인, 지민

arr.unshift(요소)

• 배열의 맨앞에 요소를 추가한다

let kopi = ["숭이", "은빈", "연서", "지민"];
kopi.unshift("혜인");
console.log(kopi);
// output -> 혜인, 숭이, 은빈, 연서, 지민

push, unshift 연산은 한번에 여러개의 요소를 더해줄 수 있다.
arr.push(요소1, 요소2);, arr.unshift(요소1, 요소2);

배열은 사실 객체다?

• 배열은 key가 0부터 시작하는 숫자인 객체다.
• 따라서 배열은 원시자료형이 아닌 객체형이다.
  -> 객체형에서 배웠을 때처럼 대입연산을 실행할 경우 참조를 통한 복사가 된다.

배열의 성능

• 배열의 앞에 요소를 추가하거나 삭제하는 shift, unshift는 느리다
• 배열의 뒤에 요소를 추가하거나 삭제하는 push, pop은 비교적 빠르다

예를 들어, shift 연산을 할 경우,

• 맨 앞의 요소를 제거하고
• 두번째 요소부터 마지막 요소까지 한칸씩 앞으로 당겨줘야한다.
• 마지막으로 length 프로퍼티의 값을 -1만큼 갱신시켜준다.

이렇게 3단계의 연산을 필요로하기 때문에 나머지 요소를 이동시켜줄필요 없는 뒤에서 일어나는 연산보다 속도가 느릴 수 밖에 없다!

배열의 반복문

• 배열을 순회할 땐 for 반복문을 많이 쓴다.
• 우리가 흔히 아는 for (let i=0; i<arr.length; i++)를 사용해도 되지만, 다음의 순회 문법도 활용해보자

for / of

let kopi = ["숭", "혜","은", "지","연"];

for (let ko of kopi) {
  console.log(ko);
}

위의 코드로 kopi배열의 각 요소를 출력시킬 수 있다.

for / in

let kopi = ["숭", "혜", "은", "지", "연"];

for (let i in kopi) {
  console.log(kopi[i]);
}

for of와 달리, for in을 썼을 때 순회되는 각 요소는 배열의 인덱스이다.
따라서 i는 직접적인 요소의 값을 담게 되지 않기 때문에 값에 접근하기 위해서는 대괄호를 사용해야 한다.

하지만 for in은 문제를 일으킬 가능성도 있고, 속도도 매우 느리기 떄문에 객체가 아닌 배열을 순회할 땐 자제하는 것이 좋다

arr.length

• 배열의 property
• 배열의 길이, 요소 개수를 구하는게 아니다????!?!?!?!?!
• 가장 큰 인덱스 + 1 값이 length!!!

let kopi = [];
kopi[999] = "숭';

console.log(kopi.length); 
// output -> 1000

💡 length property는 쓰기가 가능하다!!!!!!!!!
length보다 큰값으로 update하면 undefined요소가 그만큼 추가되고,
length보다 작은 값으로 update하면 기존 배열이 잘리게 된다.!!!!!!!!!!!!

다차원배열

• multidimensional array
• 이차원 배열로 행렬을 저장할 수 있다.

let matrix = [
  [1,2,3],
  [4,5,6],
  [7,8,9]
];

console.log(matrix[1][1]);
// output -> 5

toString

• 배열을 출력하면 문자열로 변환이 된다.
• 배열에toString 메서드가 내장되어있기 때문
• 반환된 문자열을 출력하면 각 요소가 ,쉼표로 구분되어 나온다.

let arr = [1,2,3];
console.log(arr); 
// output -> 1,2,3

alert( [] + 1 ); // "1"
alert( [1] + 1 ); // "11"
alert( [1,2] + 1 ); // "1,21"

위의 예시를 보면 배열 내에 있는 요소의 사이에만 쉼표가 삽입되어 출력된다는 것을 알 수 있다.