🟩 Array Methods

자바스크립트 배열은 다중 요소를 저장하는 단일 변수이다.

.map()

배열 내 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열 반환

let arr = [1, 2, 3, 4, 5];
let arr2 = arry.map(x => x * x);
console.log(arr2);//[1, 4, 9, 16, 25]

.filter()

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

let arr = [1, 2, 3, 4, 5];
let result = arr.filter(x => x > 2);
console.log(result);//[3, 4, 5]

.sort()

배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환, 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따름.

let customers = ['dabin', 'joy', 'jocob', 'helena'];
customers.sort();
console.log(customers);//["dabin", "helena", "jocob", "joy"]

let arr = [1, 324, 34541, 58, 11];
arr.sort();
console.log(arr);//[1, 11, 324, 34541, 58]

.forEach()

배열의 항목들을 순환하며 처리하기

let arr = [1, 2, 3, 4, 5];
arr.forEach(function (item, index, array) {
	console.log(item, index);
});
/*
1 0
2 1
3 2
4 3
5 4
*/

.concat()

인자로 주어진 배열이나 값들을 기존 배열에 합쳐 새 배열 반환. 기존 배열 변경하지 않고, 추가된 새로운 배열 반환.

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = arr1.concat(arr2);
console.log(arr3);//[1, 2, 3, 4, 5, 6]

.every()

배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트. boolean 값을 반환.

let isBelowTwo = (currentValue) => currentValue > 2; 
let arr = [1, 2, 3, 4, 5, 6];
console.log(arr.every(isBelowTwo));
//false

.some()

배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트. 빈 배열에서 호출하면 무조건 false 반환.

let isBelowTwo = (currentValue) => currentValue > 2; 
let arr = [1, 2, 3, 4, 5, 6];
console.log(arr.some(isBelowTwo));
//true

.includes()

배열이 특정 요소를 포함하고 있는지 판별

let arr = [1, 2, 3, 4, 5, 6];
console.log(arr.includes(4));//true
console.log(arr.includes(7));//false

.join()

배열의 모든 요소를 연결해 하나의 문자열로 만든다.

let arr = [1, 2, 3];
console.log(arr.join());//"1,2,3"
console.log(arr.join(''));//"123"
console.log(arr.join('-'));"1-2-3"

.reduce()

배열의 각 요소에 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환

//구문 : arr.reduce(callback[, initialvalue])
let arr = [1, 2, 3];

let reducer = (accumulator, currentValue) => accumulator * currentValue;
console.log(arr.reduce(reducer)); //6

let reducer2 = (accumulator, currentValue) => accumulator + currentValue;
console.log(arr.reduce(reducer2)); //6
//accumulator(누산기)는 콜백의 반환값을 누적

.find()

주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환. 없으면 undefined 반환.

let arr = [1, 2, 3, 4, 5];
let isLargeNumber = (x) => x > 4;
console.log(arr.find(isLargeNumber)); //5
            
let isLargerNumber = (x) => x > 7;
console.log(arr.find(isLargerNumber)); //undefined

.findIndex()

주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환. 만족하는 요소 없으면 -1 반환.

let arr = [1, 2, 3, 4, 5];
let isLargeNumber = (x) => x > 4;
console.log(arr.findIndex(isLargeNumber)); //4
            
let isLargerNumber = (x) => x > 7;
console.log(arr.findIndex(isLargerNumber)); //-1

.indexOf()

배열 안 항목의 인덱스 찾기

let arr = [1, 2, 3, 4, 5];
let a = arr.indexOf(2)
console.log(a); // 1

.fill()

배열의 시작 인덱스부터 끝 익덱스의 이전까지 정적인 값 하나로 채운다.

//arr.fill(value[, start[, end]])
//value 필수, start는 시작인덱스/end는 끝인덱스
let arr = [1, 2, 3, 4, 5];
console.log(arr.fill(0, 1, 4));//[1, 0, 0, 0, 5]
console.log(arr.fill(4));//[4, 4, 4, 4, 4]
console.log(arr.fill(3, 1));//[4, 3, 3, 3, 3]

.slice()

배열 복사하기

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.slice();
console.log(arr2); //[1, 2, 3, 4, 5]

.reverse()

배열의 순서를 반전한다.

let arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); //[5, 4, 3, 2, 1]

.push()

배열 끝에 항목 추가하기

let arr = [1, 2, 3, 4, 5];
arr.push(6);
console.log(arr); // [1, 2, 3, 4, 5, 6]

.pop()

배열 끝에서부터 항목 제거하기

let arr = [1, 2, 3, 4, 5];
arr.pop();
console.log(arr); // [1, 2, 3, 4]

.shift()

배열 앞에서부터 항목 제거하기

let arr = [1, 2, 3, 4, 5];
arr.shift();
console.log(arr); //[2, 3, 4, 5]

.unshift()

배열 앞에 항목 추가하기

let arr = [1, 2, 3, 4, 5];
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3, 4, 5]

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

🟦 For in / for of

Iteration이란?

사전적으로 되풀이를 의미하며, while문이나 for문과 같은 문법이다. Iteration을 수행하기 위해 Iterable과 Iterator 두 프로토콜이 모두 존재해야한다

• Iterable : 반복될 수 있는 조건을 뜻한다. 조건은 객체에 Symbol.iterator이 존재하는 것이다. 참고로, Symbol.iterator이 없어도 prototype chain에 의해 부모에 존재하면 그 객체는 Iterable.
• Iterator : Iterable한 객체가 순서대로 열겨될 수 있는지를 의미

for in과 for of는 반복이 가능한 객체의 모든 원소를 하나씩 추출해 변수에 담아 반복문을 수행하는 문법이다.

//for in
for(let value in arr) {
  console.log(value)
}
//for of
for(let value of arr) {
  console.log(value)
}

for in/for of의 차이점

이 둘은 반복하는 대상과 변수에 차이가 있다.
for in
1. Iterable object 모두가 반복대상
2. value에는 index가 달려있음
for of
1. Iterable object 이지만, prototype chain에 의해 부모에 존재하는 Iterable 제외하고 반복대상
2. value에는 실제 원소의 값만 순서대로 담김

https://victorydntmd.tistory.com/89

🟪 var/let/const

• var : 변수 재선언 가능
• let : 변수 재선언 불가능, 변수 재할당 가능
• const : 변수 재선언 불가능, 변수 재할당 불가능

var (function-scoped)

편리하지만, 같은 변수명을 사용할시 문제를 야기하기 쉽다. 이를 보완하기 위해 ES6부터 let과 const가 추가되었다.

var a = 'today';
console.log(a) //"today"

var a = 'yesterday';//변수 재선언
console.log(a) //"yesterday"

let (block-scoped)

let b = 'a'
console.log(b) //"a"

b = 'b'//변수 재할당
console.log(b)//"b"

let b = 'c'
console.log(b) //error, 변수 재선언 불가능

const (block-scoped)

const c = 'c'
console.log(c) //"c"

const c = 'b'
console.log(c) //error, 변수 재선언 불가능

c = 'b'
console.log(c) //error, 변수 재할당 불가능

https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d