배열

• 크기 조정이 가능하다.
• 다양한 데이터 형식을 혼합하여 저장할 수 있다.
• 정수의 인덱스를 사용하여 접근 가능하다.
• 첫 번째 요소의 인덱스는 0이며, 마지막 요소의 인텍스는 배열의 length에서 1을 뺀 값이다.
• 배열 복사 연산은 얕은 복사본을 생성한다.

배열 메서드

concat()

두 개 이상의 배열을 병합한다. 새 배열을 반환한다.

concat(value0, value1, ...valueN)

every()

배열의 모든 요소가 제공된 함수를 통과하는지 테스트한다. 불리언 값을 반환한다.

const array1 = [1, 30, 39, 29, 10, 13];
array1.every(currentValue => currentValue < 40); // true

some()

배열의 요소가 판별 함수를 하나라도 통과하는지 테스트한다. 불리언 값을 반환한다.

const array = [1, 2, 3, 4, 5];
array.some(element => element % 2 === 0); // true

filter()

배열에서 제공된 함수를 통과하는 요소들로 이루어진 얕은 복사본을 생성한다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter((word) => word.length > 6);

forEach()

각 배열의 요소에 제공된 함수를 한 번씩 실행한다.

const array1 = ['a', 'b', 'c'];
array1.forEach((element) => console.log(element));

map()

배열 내의 모든 요소 각각에 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

const array1 = [1, 4, 9, 16];
const map1 = array1.map((x) => x * 2); // [2, 8, 18, 32]

reduce()

배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고 하나의 결과값을 반환한다.
initialValue를 설정하면 첫 번째 인수로 제공하는 값이 되고, 설정하지 않으면 배열의 첫 번째 요소를 사용한다.
리듀서 함수는 네 개의 인자를 가진다.
누산기(accumulator), 현재 값(currentValue), 현재 인덱스(currentIndex), 원본 배열(array)

// 구문
arr.reduce(callback[, initialValue])

const array1 = [1, 2, 3, 4];
array.reduce((accumulator, currentValue) => accumulator + currentValue, 0) // 10

indexOf()

배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환한다.
검색을 시작할 색인을 설정할 수 있다.

// 구문
arr.indexOf(searchElement[, fromIndex])

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
beasts.indexOf('bison'); // 1
beasts.indexOf('bison', 2); // 4
beasts.indexOf('giraffe'); // -1

lastIndexOf()

배열에서 주어진 값을 반환할 수 있는 마지막 인덱스를 반환한다. 요소가 존재하지 않으면 -1을 반환한다. 배열 탐색은 fromIndex에서 시작하여 뒤로 진행한다.

const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
animals.lastIndexOf('Dodo'); // 3
animals.lastIndexOf('Penguin', 1); // -1

reverse()

배열의 순서를 반전한다. 첫 번째 요소는 마지막 요소가 되며, 마지막 요소는 첫 번째 요소가 된다. 원본 배열을 변형한다.

const array1 = ['one', 'two', 'three'];
const reversed = array1.reverse(); // ["three", "two", "one"]

slice()

배열의 begin 값부터 end 값 이전까지에 대한 얕은 복사본을 새로운 배열로 반환한다.
begin과 end는 옵션이며 값을 설정하지 않으면 배열 전체가 복사된다.
begin: 복사를 시작할 인덱스이며 기본값은 0이다. 음수 값을 설정하면 마지막에서 음수값의 절대값만큼을 추출한다. begin이 배열보다 큰 경우 빈 배열을 반환한다.
end: 추출을 종료할 인덱스이다. end의 인덱스를 제외하고 추출한다. 값이 음수인 경우 배열 끝에서부터의 길이를 나타낸다. end가 생략되면 배열 끝까지 추출한다.

// 구문
arr.slice([begin[, end]])

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
animals.slice(2); // ['camel', 'duck', 'elephant']
animals.slice(2, 4); // ['camel', 'duck']
animals.slice(1, 5); // ['bison', 'camel', 'duck', 'elephant']
animals.slice(-2); // ['duck', 'elephant']
animals.slice(2, -1); // ['camel', 'duck']
animals.slice(); // ['ant', 'bison', 'camel', 'duck', 'elephant']

splice()

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. 원본 배열이 변형된다.
start: 변경을 시작할 인덱스. 배열의 길이보다 큰 값이면 실제 인텍스는 배열이 길이로 설정. 음수인 경우 배열의 끝에서부터 요소를 세어나간다.
deleteCount: 배열에서 제거할 요소의 수.
item: 배열에 추가할 요소

// 구문
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');

sort()

배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다. 원본 배열이 변현된다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따른다.

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort(); // ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort(); // [1, 100000, 21, 30, 4]

배열의 복사

배열 복사 연산은 얕은 복사본을 생성한다.

복사 방법 (얕은 복사)

1. 전개구문
2. Array.form(): 유사 배열 객체
3. slice()

깊은 복사 방법

JSON.stringify()로 배열을 JSON 문자열로 변환 -> JSON.parse를 사용하여 새 배열로 다시 반환

조건문

표현식 및 연산자

truthy와 falsy

truthy

불리언을 예상하는 문맥에서 true로 평가되는 값.
falsy가 아닌 값은 모두 truthy 값으로 평가된다.

falsy

불리언을 예상하는 문맥에서 false로 평가된는 값. 아래의 값들이 falsy 값이다.

• null : 아무것도 없음. 어떤 값이 의도적으로 비어있음을 표현한다. 타입은 Null
• undifined : 선언한 후 값을 할당하지 않은 변수에 할당. 타입은 undefined
• flase : false 키워드. 타입은 Boolean
• NaN : 숫자가 아님을 의미한다. 타입은 Number
• 0 : 0.0, 0x0 포함. 타입은 Number
• -0 : 음수 0. 타입은
• 0n
• "" : 비어있는 string 값. '', `` 도 포함이다. 타입은 String
• document.all : 유일한 falsy 객체. 타입은 Object

null과 undefined

null

원시 자료형 null로 분류된다.
변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다.
변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조히지 않겠다는 의미이다.

undefined

원시 자료형 undefined로 분류된다.
아무 값도 할당받지 않은 상태를 의미한다.
변수를 선언한 이후 값을 할당하지 않으면 undefined가 할당된다.
이처럼 undefined는 개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화 할 때 사용하는 값이다.

따라서, 변수에 값이 없다는 것을 명시하고 싶을 때는 undefined가 아닌 null을 할당하는 것을 권장한다.

AND (&&)

모든 불리언 피연산자가 true가 되었을때 true를 반환한다.
왼쪽에서 오른쪽으로 평가하면서 첫 falsy 값을 만나면 즉시 그 값을 반환한다.

result = "" && "foo"; // result 에 ""(빈 문자열)이 할당됩니다
result = 2 && 0; // result 에 0 이 할당됩니다
result = "foo" && 4; // result 에 4 가 할당됩니다.

const obj = {
  name: 'lee',
  age: 30
}
console.log(obj.name && obj.name); // lee
console.log(obj.job && obj.job) // undefined

OR (||)

피연산자 중 하나 이상이 true인 경우에만 true를 반환한다.
왼쪽 값이 falsy인 경우 오른쪽 값을 테스트한다.

true || true; // t || t returns true
false || true; // f || t returns true
true || false; // t || f returns true
false || 3 === 4; // f || f returns false
"Cat" || "Dog"; // t || t returns "Cat"
false || "Cat"; // f || t returns "Cat"
"Cat" || false; // t || f returns "Cat"
"" || false; // f || f returns false
false || ""; // f || f returns ""
false || varObject; // f || object returns varObject

&& 연산자가 || 연산자보다 먼저 실행되기 때문에 함께 사용할 경우 우선순위에 유의해야 한다.

true || false && false; // &&이 먼저 실행되어 true를 반환합니다.
(true || false) && false; // 그룹화가 가장 우선순위가 높으므로, false를 반환합니다.

Nullish coalescing operator (??)

왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고 그렇지 않으면 왼쪽 피연산자를 반환한다.
OR (||) 은 falsy한 값인 경우 오른쪽 피연산자를 반환하는 것에 비해 널 병함 연산자(??)는 null과 undefined 값일 때만 오른쪽 피연산자를 반환하기 때문에 좀 더 엄격하게 처리할 수 있다.

const foo = null ?? 'default string'
console.log(foo); // default string

const baz = 0 ?? 24;
console.log(baz); // 0

const test = 0 || 24;
console.log(test); // 24

Optional chaining (?.)

체인의 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 위치한 속성 값을 읽을 수 있다. 체이닝 연산자(.)와 비슷하게 작동하지만, 참조가 nullish(null 또는 undefined)라면 에러가 발생하는 대신 리턴 값은 undefined가 된다. 함수 호출에서 사용할 때 주어진 함수가 존재하지 않으면 undefined를 리턴한다.

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah',
  },
  greet() {
    return `hi ${this.name}`
  }
};

console.log(adventurer.dog?.name); // undefined
console.log(adventurer.greet?.()); // hi Alice

비동기 처리

웹 API