Unit.8 배열

자바스크립트 배열 메소드

arr = Array(51).fill().map((_, i) => i)  = 0에서 50까지 배열을 만들어줘라! 

arr.length

배열의 길이를 반환해준다.

let arr = [감자, 고구마, 호박]
arr.length // 3

arr.push ()

배열의 맨 뒤에 targrt요소를 넣어준다.

let arr = ['감자', '고구마', '호박']
arr.push('애호박') // arr 배열의 맨 뒤에 '애호박'요소를 넣어줌/

return arr
arr = ['감자', '고구마', '호박', '애호박'] // 맨뒤에 애호박 요소가 추가됨

 

 

 

arr.pop()

배열의 맨 뒤에 요소를 삭제한다.

let arr = ['감자', '고구마', '호박', '애호박']
arr.pop() // 배열의 맨 뒤를 삭제해줌.  push와 묶어서 기억하면 좋다.

return arr
arr = ['감자', '고구마', '호박'] // 배열의 맨 뒤 요소인 '애호박'이 삭제됐다.

 

arr.unshift()

배열의 맨 앞에 target요소를 넣어준다.

let arr = ['감자', '고구마', '호박']
arr.unshift('애호박') // arr 배열의 맨 앞에 '애호박'요소를 넣어줌/

return arr
arr = ['애호박', '감자', '고구마', '호박'] // 맨앞에 애호박 요소가 추가됨

 

arr.shift()

배열의 맨 앞에 요소를 삭제한다.

let arr = ['감자', '고구마', '호박']
arr.shift() // arr 배열의 맨 앞에 요소를 삭제해줌

return arr
arr = ['고구마', '호박'] // 배열의 맨앞에 있던 '감자' 요소가 삭제됨

 

arr.indexOf()

배열에서 찾고 싶은 target을 입력하면 해당 배열에서 몇 번째 인덱스 위치에 있는지 알려준다.

let arr = ['감자', '고구마', '호박']
arr.indexOf('고구마') // arr 배열에서 '고구마'요소가 있는 인덱스 위치를 알려준다.
결과값 : 1
//target 요소가 해당 배열에 존재하지 않는다면 -1을 반환한다.

 

arr.include()

배열에서 찾고 싶은 target을 입력하면 존재여부를 Boolean 타입으로 반환해준다.

let arr = ['감자', '고구마', '호박']
arr.include('고구마') // arr 배열에서 '고구마'요소가 있는는 불린타입으로 알려준다.
결과값 : true

let arr = ['감자', '고구마', '호박']
arr.include('호박고구마') 
결과값 : false

 

arr.join()

.join()은 배열의 요소들을 연결하여 하나의 값으로 만든다.

let arr = ['감자', '고구마', '호박']
let arr1 = arr.join('');
let arr2 = arr.join('/');

return arr1 : ['감자고구마호박']
return arr2 : ['감자/고구마/호박']

 

 

arr.sort ()

배열을 오름차순 내림차순으로 정렬한다.

const arr = [5, 3, 2, 4, 6, 1];

const res = arr.sort((a, b) => a - b);
console.log(res);
// [1, 2, 3, 4, 5, 6]

res = arr.sort((a, b) => b - a);
console.log(res);
// [6, 5, 4, 3, 2, 1]

 

arr.reverse()

배열의 요소 순서를 뒤집는다.

const array = [1, 2, 3, 4, 5];
const res = array.reverse();

console.log(res);
// [5, 4, 3, 2, 1]

console.log(array); // 원래 배열도 변경이 되어있다.
// [5, 4, 3, 2, 1]

 

 

 

 

arr.slice()

slice() 함수는 배열로 부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용합니다. 첫번째 인자로 시작 인덱스(index), 두번째 인자로 종료 인덱스를 받으며, 시작 인덱스부터 종료 인덱스까지 값을 복사하여 반환한다

arr = Array(20).fill().map((_, i) => i)
return arr : [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

return arr.slice(0, 7) // arr의 0번째 인덱스부터 7번째인덱스 앞까지 잘라서 복사해준다.
return arr.slice(0, 7) : [0, 1, 2, 3, 4, 5, 6]
slice 메서드는 복사개념이기 때문에 arr을 변경하지 않음.
slice 로 잘라냈다고해도 return arr 을 하면 0~20사이 배열이 그대로 리턴됨

return arr : [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
보다시피 arr.slice로 잘라냈지만 arr은 변경되지않는다.

 

 

arr.splice()

 

slice() 함수의 이름에서 알파벳 p가 하나 더 있는 splice() 함수는 다목적으로 사용할 수 있는 함수다. 이 함수로는 배열로 부터 특정 범위를 삭제하거나 새로운 값을 추가 또는 기존 값을 대체할 수 있다. 첫번째 인자로 시작 인덱스(index), 두번째 인자로 몇개의 값을 삭제할지, 그리고 세번째 인자부터는 추가할 값을 가변 인자로 넘길 수 있으며, 삭제된 값을 담고 있는 배열을 반환한다.

arr = Array(20).fill().map((_, i) => i)
return arr : [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

return arr.sㅔlice(5, 4) // arr의 5번째 인덱스부터 4만큼 우측에 있는 인덱스의 앞까지 잘라준다.
return arr.slice(5, 4) : [5, 6, 7, 8]
splice 메서드는 편집개념이기 때문에 arr을 변경함
splice 메서드를 이용해 잘라냈다면 arr은 변경됨.

return arr : [0, 1, 2, 3, 4, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
보다시피 arr.splice로 잘라 낸 배열만큼 arr배열이 사라짐

 

---

Array.from()

Array.from은 target으로 받은 문자열을 배열의 요소로 반환해준다

let arr = Array.from('박수범돌맹이')
return arr
결과값:['박','수','범','돌','맹','이'] //타겟으로 받은 문자열을 한 문자씩 배열의 요소로 반환해준다.

let arr = Array.from([5,6,7]x => x+2)
return arr
결과값:[7,8,9] //첫번째 인자를 배열로, 두번쨰 배열을 배열에 적용할 함수로 반환하여주었다.

 

 

Array.isArray()

Array.isArray는 target이 배열인지 아닌지 Boolean타입으로 반환해준다.

let arr = [1, 3 ,4 ,8] 
Array.isArray(arr) : true

let arr = '나는박수범'
Array.isArray(arr) : false

 

Object.prototype.toString.call()

target의 타입을 모두 알아 낼 수 있다.

다만 리턴했을때 'object type' 으로 나오기때문에 타입의 종류만 리턴해야 하는 경우에는

.slice(8 , -1)을 붙여 타입만 잘라 낼 수 있다.

let arr = [1,2,3,4,5]
let str = '박수범가끔천재'
let boolean = true

Object.prototype.toString.call(arr)
결과값 : object Array
Object.prototype.toString.call(str)
결과값 : object String
Object.prototype.toString.call(boolean)
결과값 : object Boolean

object 타입(맨앞이 대문자) 로 출력되기때문에 slice(8 -1)을 사용하여 타입만 잘라 낼 수 있다.

.

.find

배열의 모든 요소들을 돌면서 전달한 콜백함수의 인자로 넣고 호출한다.

콜백 함수의 반환값이 true이면 그 즉시 멈추고 해당 요소를 리턴한다.

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student('A', 29, true, 45),
  new Student('B', 28, false, 80),
  new Student('C', 30, true, 90),
  new Student('D', 40, false, 66),
  new Student('E', 18, true, 88),
];

// Students 배열에서 점수가 90점인 학생을 찾아라.
const res = students.find((student) => student.score === 90); 

console.log(res);
// Student {name: "C", age: 30, enrolled: true, score: 90}

 

.filter

배열의 모든 요소들을 돌면서 전달한 콜백함수의 인자로 넣고 호출한다.

콜백 함수의 반환값이 true인 요소들을 모아 새로운 배열을 만들어서 리턴한다.

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student('A', 29, true, 45),
  new Student('B', 28, false, 80),
  new Student('C', 30, true, 90),
  new Student('D', 40, false, 66),
  new Student('E', 18, true, 88),
];

//등록된 학생들로만 이루어진 배열을 만들어라.
const res = students.filter((student) => student.enrolled); // enrolled가 true인 요소들을 모아 배열로 리턴

console.log(res);
// (3) [Student, Student, Student]
// 0: Student {name: "A", age: 29, enrolled: true, score: 45}
// 1: Student {name: "C", age: 30, enrolled: true, score: 90}
// 2: Student {name: "E", age: 18, enrolled: true, score: 88}

 

.map

배열의 모든 요소들을 돌면서 전달한 콜백함수의 인자로 넣고 호출한다.

콜백함수의 반환된 값들을 모두 요소로 담아 새로운 배열을 리턴한다.

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student('A', 29, true, 45),
  new Student('B', 28, false, 80),
  new Student('C', 30, true, 90),
  new Student('D', 40, false, 66),
  new Student('E', 18, true, 88),
];

//학생들의 점수 배열을 만들어라
const res = students.map((student) => student.score);

console.log(res);
//  [45, 80, 90, 66, 88]

 

.some/ every

 

• some

배열의 모든 요소들을 돌면서 전달한 콜백함수의 인자로 넣어 호출한다.

콜백함수의 결과가 하나라도 true가 있으면 true를 반환한다.

• every

배열의 모든 요소들을 돌면서 전달한 콜백함수의 인자로 넣어 호출한다.

콜백함수의 결과가 모두 true일때만 true를 반환한다.

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student('A', 29, true, 45),
  new Student('B', 28, false, 80),
  new Student('C', 30, true, 90),
  new Student('D', 40, false, 66),
  new Student('E', 18, true, 88),
];

//50점보다 적은 점수를 받은 학생이 있는지 확인하라.
const res1 = students.some((student) => student.score < 50);

console.log(res1);
true

모든 학생이 50점 이상인지 확인하라.
const res2 = students.every((student) => student.score >= 50);

console.log(res2);
false

 

.reduce/reduceRight

• reduce

원하는 시작점부터 모든 배열의 요소들을 돌면서 어떤 값을 누적할 때 사용한다.(앞 요소부터)

• reduceRight

배열의 제일 뒤(오른쪽)부터 시작하여 모든 배열의 요소를 돌면선 어떤 값을 누적한다.

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student('A', 29, true, 45),
  new Student('B', 28, false, 80),
  new Student('C', 30, true, 90),
  new Student('D', 40, false, 66),
  new Student('E', 18, true, 88),
];


const res = students.reduce((prev, curr) => {return prev + curr.score;}, 0);
// prev는 이전의 콜백함수의 리턴값이 저장된다.
// curr은 배열의 아이템을 순차적으로 전달 받는다.

console.log(res / students.length);
// 73.8


const res = students.reduce((prev, curr) => prev + curr.score, 0);
// prev는 이전의 콜백함수의 리턴값이 저장된다.
// curr은 배열의 아이템을 순차적으로 전달 받는다.


console.log(res / students.length);
// 73.8

---

활용

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student('A', 29, true, 45),
  new Student('B', 28, false, 80),
  new Student('C', 30, true, 90),
  new Student('D', 40, false, 66),
  new Student('E', 18, true, 88),
];


50점 이상인 점수들로 이루어진 배열을 문자열로 바꾸어라
const res2 = students
    .map((student) => student.score) //학생들의 점수로 배열을 만들고
    .filter((score) => score >= 50) // 점수배열에서 50점 이상인 학생들을찾아서,
    .join(); // 문자열로 만들어라.

console.log(res2);
// "80,90,66,88"

학생들의 점수를 오름차순으로 정렬하고 문장열로 바꾸어라.
const res = students
    .map((student) => student.score) //학생들의 점수로 배열을 만들고
    .sort() //오름차운으로 정렬해서
    .join(); // 문자열로 만들어라.

console.log(res);
// '45,66,80,88,90'