숫자, 불리언, 문자열은 자료 구조를 구성하는 최소 단위이다.

하지만 정보는 하나 이상의 단위로 이루어지기 때문에 값을 그룹화해서 복잡한 구조를 만들 수 있다.

배열은 기본적인 자료 구조 중 하나이다.

데이터 세트

데이터의 모음을 처리할 수 있는 데이터 유형을 배열이라고 하며 대괄호 사이에 콤마로 구분한 값을 나열한다.

let listOfNumbers = [2, 3, 5, 7, 11];
console.log(listOfNumbers[2]);
// -> 5

여기서 표현식 바로 다음에 대괄호 쌍을 이용하여 인덱스로 해당 요소를 찾을 수 있다. 인덱스는 첫번째 요소가 0부터 시작하는 전통적인 표현방식이다.

속성에 접근하기

자바스크립트에서 속성에 접근하는데 사용하는 두 가지 방법은 점과 대괄호를 사용하는 것이다.

value.x 와 value[x] 는 값의 속성에 접근할 때 사용된다.

하지만 이 둘의 차이점은 value[x]는 표현식 x를 평가하고 그 결과를 문자열로 변환해서 해당값을 가져오고 value.x 는 해당값을 바로 가져온다.

점 표기법에서는 유효한 바인딩 이름만 사용할 수 있기 때문에 대괄호 표기법으로 값을 가져와야하는 경우가 있다. 예를 들어 숫자 2를 가져오려면 점 바인딩에서는 숫자 요소를 사용할 수 없기 때문에 value[2] 의 형태로 값을 가져와야 한다.

배열 메서드

배열의 끝에 요소를 추가하기

todoList.push(‘pigs‘);

배열의 끝의 요소를 제거하고 그 요소를 반환하기

todoList.pop(‘rabbit‘)

배열의 시작부분의 첫번째 요소를 제거하고 제거된 요소를 반환하기

todoList.shift(‘tomato‘);

배열의 첫번째 요소를 배열의 맨 앞쪽에 추가하고 새로운 길이를 반환하기

todoList.unshift(‘apple‘)

배열의 특정 값을 검색하고 요청한 값을 찾으면 해당 인덱스를 반환하기

todoList.indexOf(‘apple‘);

요청한 값이 없으면 -1을 반환한다.

배열 자르기 slice : 시작과 마지막 인덱스를 사용해서 둘 사이에 있는 요소를 배열로 반환한다. 마지막 인덱스의 값은 포함하지 않는다.

console.log([0, 1, 2, 3, 4].slice(2, 4));
// -> [2, 3]

시작 인덱스와 마지막 인덱스는 포함하거나 생략할 수 있다. 마지막 인덱스를 생략하면 시작 인덱스 이후 모든 요소를 반환한다. 시작 인덱스까지 생략하면 전체 배열을 복사한다.

console.log([0, 1, 2, 3, 4].slice(2));
// -> [2, 3, 4]

concat : 배열을 묶어서 새 배열을 만들기

console.log([0, 1].concat([2, 3]));
// -> [0, 1, 2, 3]

배열과 유사한 문자열 메서드

slice : 해당 문자열을 잘라서 반환

indexOf : 해당 문자의 인덱스를 반환. 두 개 이상의 문자열도 검색 가능.

console.log("coconuts").slice(4, 7);
// -> nut
console.log("coconut".indexOf("u"));
// -> 5
console.log("one two three").indexOf("ee");
// -> 11

trim : 문자열의 시작과 끝에서 공백 (공백과 개행 문자, 탭 등)을 제거한다.

split : 특정 문자열이 나타날 때마다 해당 문자열을 분할하고, join 메서드로 다시 결합 가능.

let sentence = ['startup service note'];
let words = sentence.split(" ");
console.log(words);
// -> ['startup', 'service', 'note'];
console.log(words.join(". "));
// -> startup. service. note

나머지 매개변수

함수는 여러 개의 인수를 받아서 사용할 수 있다. 주어진 모든 인수를 계산하려면 마지막 매개 변수 앞에 점을 3개를 넣는다.

function max (...numbers) {
  let result = -Infinity;
  for (let number of numbers) {
    if(number > result) result = number;
  }
  return result;
}
console.log(max(4, 1, 9, -2));
// -> 9

이와 유사하게 3점 표기법과 배열 인수를 사용해 함수 호출이 가능하다.

let numbers = [5, 1, 7];
console.log(max(...numbers));
// -> 7

이 때 중요한 것은 함수 호출 시 배열을 “분산“하여 각 요소를 인수로 전달한다는 것이다.

이는 대괄호 배열 표기법에서 3점 연산자를 사용하면 특정 배열을 새 배열에 분산시킬 수 있는 것과 유사하다.

let word = ["never", "fully"];
console.log(["will", ...words, "understand"]);
// -> ["will", "never", "fully", "understand"]

이렇게 나머지 연산자로 함수나 배열에 배열 인수를 분산시킬 수 있다는 것을 알게 되면 굉장히 요긴하게 쓸 수 있다.