배열

1. 요소 분할/반환(from)

const str = '1234';
const fromStr = Array.from(str);
console.log(fromStr); // [ '1', '2', '3', '4' ]
console.log(Array.from(fromStr,el=>el*2)); // [ 2, 4, 6, 8 ]

• 대입된 문자열을 구분자 없이 분할하고 배열로 반환
• 두번째 인자로 callback 함수 대입하여 값을 변환

2. 특정 구분자(split)

const str1 = 'JavaScript, HTML, CSS';
const str2 = 'Sky';
console.log(str1.split(',')); // [ 'JavaScript', ' HTML', ' CSS' ]
console.log(str2.split('')); // [ 'S', 'k', 'y' ]

• 인자로 받은 구분자로 문자열을 분리 후 배열에 넣음
• 구분자가 빈 문자열일 경우 모든 문자 분할

3. 요소 추가(push/unshift)

const student1 = 'Seung ok';
const student2 = 'Alice';
const room = ['Max'];
room.push(student1);
console.log(room); // [ 'Max', 'Seung ok' ]
room.unshift(student2);
console.log(room); // [ 'Alice', 'Max', 'Seung ok' ]

• push 메소드는 배열 뒤에 요소를 추가
• unshift 메소드는 배열 앞에 요소를 추가

4. 배열 길이 구하기(length)

const house = ['mom','dad','son'];
console.log(house.length); // 3

• length 속성으로 배열의 길이를 확인

5. 배열 합치기(concat)

const first = ['John'];
const second = ['Max'];
console.log(first.concat(second)); // [ 'John', 'Max' ]

• 여러 배열을 하나로 합칠 수 있음
• 문자형의 concat과 다름

6. 특정 구분자를 넣어 문자형으로 변환(join)

const study = ['JavaScript', 'HTML', 'CSS'];
console.log(study.join('/'));

• join 메소드는 배열 요소 사이에 구분자를 넣어 하나로 병합

7. 요소 추출

1) pop/shift

const number = [1,2,3];
console.log(number.pop()); // 3
console.log(number.shift()); // 1

• pop 메소드는 배열의 마지막 요소 추출
• shift 메소드는 배열의 맨 앞 요소 추출
• 원본 배열도 함께 수정됨

2) slice

const number = [1,2,3];
console.log(number.slice(0,1)); // [1]
console.log(number); // [1,2,3]

• slice 메소드는 시작 인덱스부터 끝 인덱스 전까지의 배열 요소를 추출
• 원본 배열은 수정되지 않음

8. 특정 요소 삭제 / 수정(splice)

const number = [1,2,3];
console.log(number.splice(0,1)); // [ 1 ]
console.log(number.splice(0,0,0)); // []
console.log(number); // [ 0, 2, 3 ]

• splice 메소드는 특정 위치의 요소를 삭제하거나 수정
• 첫번째 인자는 시작 인덱스, 두번째 인자는 삭제할 요소의 개수
• 세번째 인자는 추가할 요소들
• 원본 배열도 함께 수정됨

9. 특정 요소의 위치 확인(indexOf)

const number = [1,2,3];
console.log(number.indexOf(0)); // -1
console.log(number.indexOf(1)); // 0
console.log(number.indexOf(2,2)); // -1

• indexOf 메소드는 대입되는 값을 배열 내부에서 검색해 해당 인덱스를 반환
• 없을 경우 -1을 반환
• 두번째 인자는 시작 인덱스를 의미

10. 배열 순환하기(forEach)

const number = [1,2,3];
number.forEach(number=>console.log(number)); // 1 2 3

• forEach 메소드는 배열 내부 요소를 순환하며 callback 함수 실행
• 원본 배열은 수정되지 않고 어떤 값도 반환하지 않음

11. 배열 정렬하기(sort)

const score = [60,55,72,40];
console.log(score.sort((a,b)=>a-b)); // [ 40, 55, 60, 72 ]
console.log(score.sort((a,b)=>b-a)); // [ 72, 60, 55, 40 ]

• sort 메소드는 인자로 비교함수를 대입하여 배열을 정렬
• 정렬 기준
  👉 비교값 > 0 : a가 b보다 작은 숫자의 인덱스를 가짐
  👉 비교값 < 0 : b가 a보다 작은 숫자의 인덱스를 가짐
  👉 비교값 = 0 : 변경하지 않음
• a-b 는 오름차순, b-a 는 내림차순 정렬
• 원본 배열도 수정됨

12. 순서 반대로 나열(reverse)

const study = ['JavaScript', 'HTML', 'CSS'];
console.log(study.reverse()); // [ 'CSS', 'HTML', 'JavaScript' ]

• reverse 메소드는 배열의 순서를 반대로 나열
• 원본 배열도 수정됨

13. 특정 조건 만족

1) some

const study = ['JavaScript', 'HTML', 'CSS'];
console.log(study.some(value=>value === 'HTML')); // true
console.log(study.some(value=>value === 'React')); // false

• some 메소드는 callback 함수가 true를 반환할 때까지만 순환
• 배열의 요소들 중 하나라도 true를 반환
• 배열의 마지막 요소까지 true가 없으면 false 반환

2) every

const study = ['JavaScript', 'HTML', 'CSS'];
console.log(study.every(value=>value === 'HTML')); // false
console.log(study.every(value=>typeof value === 'string')); // true

• every 메소드는 some 메소드와 정반대
• 하나라도 false면 false 반환
• 마지막 요소까지 true 면 true 반환

3) filter

const number = [1,2,3,4];
console.log(number.filter(e=>e%2 === 0)); // [ 2, 4 ]
console.log(number.filter(e=>e%2 === 1)); // [ 1, 3 ]

• filter 메소드는 callback 함수로 배열 내부를 순환하면 특정 조건을 만족하는지 확인
• 만족하는 요소들만 새로운 배열에 담아 반환

4) find

const number = [1,2,3,4];
console.log(number.find(e=>e<3)); // 1

• find 메소드는 callback 함수로 배열 내부를 순환하며 특정 조건을 만족하는 첫번째 요소를 반환

14. 일괄 변경하기(map)

const number = [1,2,3,4];
const newNumber = number.map(e=>e+1);
console.log(newNumber); // [ 2, 3, 4, 5 ]

• map 메소드는 반환되는 값들을 재조합하여 새로운 배열을 반환
• forEach 메소드와 구분하기

15. 값 누적시키기(reduce)

const number = [1,2,3,4];
number.reduce((acc,cur,index)=>{
    console.log(acc+cur); // 1 3 6 10
    return acc + cur;
},0)

• reduce 메소드는 callback 함수로 배열 내부를 순환하며 단일 값을 누적
• 인자로 callback 함수와 초기값을 받음
• callback 함수의 인자로 누적값, 현재 요소값, 인덱스, 원본 배열을 받음
• 처음 실행될 때 누적값은 초기값을 할당받음

const multiArr = [1,2,[3,4],[5,6],7,8];
console.log(multiArr.reduce((acc,cur)=>{
    return acc.concat(cur);
},[])) // [ 1, 2, 3, 4, 5, 6, 7, 8 ]

• 중첩된 배열을 단일 배열로 만들때 reduce 메소드 이용