[js 독학백서] 4. 배열 심화

// 배열 심화

 

// Array.isArray(변수명);

배열이면 true

객체를 생성하지 않고 사용할 수 있는 메서드 : 정적 메서드 (Static Method)

// Array.isArray()
// 배열이면 true
const arr = [1, 2, 3, 4, 5];
Array.isArray(arr); // true

 

 

// 배열 생성

// Array.from();

두번째 인자에 mapping함수를 지정

배열을 복사할 때 각 요소에 함수를 실행 > 그 결과를 새로운 배열로 반환  

// Array.from(배열, 맵핑함수);
const arr = [1, 2, 3];
function plus_two(num) {
  return num + 2;
}
const new_arr = Array.from(arr, plus_two);
console.log(new_arr); // [3, 4, 5]

 

// Array(), Array.of() 의 차이점 

Array.of() : 인자 갯수 데이터타입에 무관하게 가변적인 인자를 가지는 새로운 배열 생성

// 3개의 빈요소를 가진 배열
const arr = Array(3); // [empty × 3]

// 3을 요소로 가진 배열
const arr = Array.of(3); // [3]

const arr = Array.of(); // []

 

// 배열 조작

push() : 배열의 끝에 요소 추가 > 변경된 배열의 길이를 반환한다.

pop() : 배열 끝에서 하나의 요소를 제거 > 해당 요소를 반환

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

// pop()
arr.pop(); // 7 (제거된 요소)
arr.pop(); // 6
console.log(arr); // [1, 2, 3, 4, 5]

 

 

unshift() : 배열 앞에 요소 추가 > 변경된 배열의 길이를 반환  

shift() : 배열 첫번째 요소를 제거 > 해당 요소를 반환

// unshift()
const arr = [1, 2, 3, 4, 5];
arr.unshift(6, 7); // 7(length)
console.log(arr); // [6, 7, 1, 2, 3, 4, 5]

// shift()
arr.shift(); // 6 (제거된 요소)
arr.shift(); // 7
console.log(arr); // [1, 2, 3, 4, 5]

 

 

// 배열과 반복

forEach() : 주어진 함수를 배열 요소 각각에 실행하는 메서드

원본 배열을 값을 변경하거나 값을 리턴하지 않는다.

실행할 콜백함수(해당 함수)는 필수 인자로 현재 요소(값)을 가진다. 선택적으로 현재 요소의 인덱스와 forEach()를 호출한 배열을 가질 수 있다.

// 콜백함수 : 함수의 인자로 주어지는 함수

// forEach()
const array = [1, 2, 3];

array.forEach((number, idx) => {
  console.log(number, idx);
  // 1 0 [0] == 1
  // 2 1 [1] == 2
  // 3 2 [2] == 3
  
  console.log(`${idx + 1}번째 요소: ${number}`);
});
// 1번째 요소: 1 // 2번째 요소: 2 // 3번째 요소: 3

 

// 배열 요소 검색과 정렬

includes() : 주어진 요소를 포함하면 t

// const array = [1, 2, 3];
array.includes(1); // true
array.includes('h'); // false

 

find()

// 주어진 판별 함수를 만족하는 첫번째 요소를 반환한다. 반환할 값을 찾지 못하면 undefined

const find_array = ['hello', 'world', 'hi', 'friend'];

// 판별함수를 화살표함수로 작성
const key = find_array.find((value) =>
  value.length < 3);
console.log(key); // hi

 

findIndex()

// 주어진 판별 함수를 만족하는 첫번째 요소의 인덱스를 반환, 요소가 없으면 -1 반환

// const array = [1, 2, 3];
console.log(array.findIndex((number) =>
  number > 2)); // 2보다 큰 수 3이 위치한 인덱스값 2가 출력된다.

 

sort()

// 배열을 정렬 > 정렬된배열을 반환 (원본배열 수정)

// 유니코드 순서에 따르기 때문에 숫자 정렬의 경우 정확하지 않을 수도 있다.

// 숫자 정렬 
array = [10, 3, 50, 23, 11, 1, 2, 3];
array.sort(); // [1, 10, 11, 2, 23, 3, 3, 50]

array = ['a', 'z', 'b', 'g'];
array.sort(); // ['a', 'b', 'g', 'z']

 

 

// 배열 요소 수정

fill()

// arr.fill() : 배열을 지정한 값으로 채운다.

// arr.fill(채울값, 시작인덱스)

// arr.fill(채울값, 시작인덱스, 끝인덱스); 시작idx ~ 끝idx-1

const arr = [1, 2, 3, 4, 5]
arr.fill(10); // [10, 10, 10, 10, 10]

arr.fill(1, 3);
// 1로채운다. 3번째 인덱스부터 끝까지 
// [10, 10, 10, 1, 1]

arr.fill(0, 1, 3); // 0으로 채운다 1 ~ 2
// [10, 0, 0, 1, 1]

 

slice()

// 배열의 복사본을 조각 내 새로운 배열로 반환

// 시작인덱스 종료인덱스를 가질 수 있음

const arr = [10, 0, 0, 1, 1];
arr.slice(1, 3); // [0, 0], 1~2까지 자르고 반환

 

splice(시작인덱스 필수, 제거할 개수, 배열에 추가할 요소)

// 원본배열 수정됨 

// 시작인덱스 ~ 마지막요소까지 제거  

const arr = [10, 0, 0, 1, 1];
arr.splice(2); // [0, 1, 1] 삭제됨 
arr // [10, 0]

// splice(시작인덱스, 제거할 갯수);
arr = [10, 0, 0, 1, 1];
arr.splice(2, 2); // [0, 1] 삭제
arr // [10, 0, 1]

// splice(시작인덱스, 제거할 갯수, 추가할 요소);
arr // [10, 0, 1]
arr.splice(1, 0, 10); 
// 인덱스 1자리에 0개 제거후 10 추가
arr // [10, 10, 0, 1]

 

 

 

// 기타 배열 메서드

1. join

배열의 모든 요소를 이어붙여 하나의 문자열로 반환, 구분할 문자를 인자로 가질 수 있다. (디폴트 : , )

 

2. concat()

// 인자로 주어진 배열,값을 기존 배열에 합쳐 새로운 배열로 반환한다.

 

3. map() : 배열의 모든 요소에 함수 실행 그 결과를 모아 새로운 배열로 반환한다.

const arr = [10, 10, 0, 1];
arr.join('/');
arr // "10/10/0/1"

arr.concat('a'); // [10, 10, 0, 1, 'a']

// map()
// forEach()와 동일한 종류의 인자를 가지고 
// 거의 동일하게 동작하는데 map()은 반환값이 있다.
const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((value) => value * 5);
// [5, 10, 15, 20, 25]

 

 

*연습 문제* 배열의 모든 요소에 제곱근을 새로운 배열 sqrt로 만들고 출력

const array = [4, 9, 16];
const sqrt = array.map((value) => Math.sqrt(value));

 

4. filter()

// 판별 함수의 결과값이 참인 요소들만 모아 새로운배열로 반환한다.

// map은 기존배열에 어떠한 처리를 거쳐 새로운 배열을 만들고 filter는 배열에서 어떠한 조건을 통과하는 요소만을 모아 새로운 배열로 만든다.

const arr = [10, 20, 100, 40, 2, 33, 235, 11];
const newArr = arr.filter((number) => number > 99);

 

5. reduce()

// 필수인자로 reducer함수를 선택 인자로 리듀서함수에 제공할 초깃값을 가질 수 있으며 배열의 각 요소에 대해 주어진 리듀서함수를 실행한 뒤 하나의 값을 반환한다.

// 리듀서함수 : accumulator 누산기와 현재값을 가진다. 선택인자로 현재 요소의 idx와 reduce()를 호출한 원본 배열을 가질 수 있다.

const arr = [1, 2, 3, 4, 5];
const reducer = (acc, value) => acc + value;

// acc 리듀서함수의 반환 값들을 누적하는 대상
// value 현재 처리할 요소  

arr.reduce(reducer); // 15
arr.reduce(reducer, 10); // 15 + 10 = 25

// acc의 초기값이 10이다.

 

 

*연습 문제* reduce()를 사용해 객체배열내에 point항목의 값들을 합산 결과 출력

const user = [
  {
    name: "John",
    point: 35
  },
  {
    name: "Jane",
    point: 40
  },
  {
    name: "Jack",
    point: 100
  }
];

const reducer = (acc, obj) => acc + obj.point;
user.reduce(reducer, 0); // 175
// 객체배열에 reduce()를 사용할 때는 반드시 초기값을 지정해야한다.

 

 

 

※ 자바스크립트 독학백서 정리