06_JS_배열 내장함수

추가적으로 정리해야할 내용이 있다!!

 

1. 비구조화 할당

 

 

객체를 만들고 함수를 통해서 그 객체를 불러낼 때 보통 객체의 이름을 항상 앞에 붙여두어야 하는데, 그걸 쉽게 해주는 것이다.

 

const ironMan = {
  name: "토니 스타크",
  actor: "로버트 다우니 주니어",
  alias: "아이언맨"
};

const captainAmerica = {
  name: "스티브 로저스",
  actor: "크리스 에반스",
  alias: "캡틴 아메리카"
};

function print(hero) {
  const { alias, name, actor } = hero;
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다`;
  console.log(text);
}

print(ironMan);
print(captainAmerica);

 

즉 위에서 hero.alias , hero.name 등처럼 사용할 필요가 없다.

 

결과

 

 

2. 화살표 함수

 

화살표 함수를 사용하면, this안을 가르키지 않는다.

 

 

const dog = {
  name: "멍멍이",
  sound: "멍멍",
  say: function say() {
    console.log(this.sound);
  }

  // say:() => {
  //   console.log(this.sound);
  // }  //불가능

  // say() {
  //   console.log(this.sound);
  // } //가능
};

dog.say();

즉 위처럼 설정하면 this가 가르키지 않는다.

 

 

 

3. 배열

 

자바스크립트의 배열은 굳이 안이 모두 같은 자료형일 필요는 없다.

 

 

const array = [1, "blabla", {}, 4];
console.log(array[1]);

 

배열의 크기를 알고싶으면 length 내장함수를 사용하면 된다.

 

 

const objects = [
  { name : '멍멍이'},
  { name : '야옹이'}
];

objects.push({
  name : '멍뭉이'
});

console.log(objects);


console.log(objects.length);

 

4. 배열의 내장함수들

 

entries

전체 배열값을 가져옴

keys

key 값만 가져옴

values

value 값만 가져옴

 

const dog = {
  name: "멍멍이",
  sound: "멍멍",
  age: 2
};

console.log(Object.entries(dog));
console.log(Object.keys(dog));
console.log(Object.values(dog));

 

즉, 배열에서 원하는 값을 가져오는데 사용하는 내장함수이다.

 

 

forEach

배열안의 값을 가지고 일괄적인 작업을 할때 유용하다.

 

const superheroes = ["아이언맨", "캡틴 아메리카", "토르"];

superheroes.forEach(function (hero) {
  console.log(hero);
});

superheroes.forEach((hero) => {
  console.log(hero);
});

 

map

배열 안의 모든값을 변환하고 싶을때 유용하다.

 

const array = [1, 2, 3, 4, 5, 6, 7, 8];

const squared = [];
for (const i of array) {
  squared.push(i * i);
}

console.log(squared);

배열 안의 값을 모두 제곱으로 바꾸고 싶을때 위처럼 for문을 사용하여 바꿀 수 있을 것이다.

 

const array = [1, 2, 3, 4, 5, 6, 7, 8];

const square = n=> n*n;
const squared = array.map(square)

//const squared = array.map(n=> n*n)

console.log(squared);

 

map을 사용하여 모두 바꾸어주었다. 특히, 주석처리된 부분처럼 한줄로 깔끔하게 만드는 것도 가능하다.

 

 

indexOf

배열의 index값을 가져온다.

const superheroes = ['아이언맨','토르','캡틴아메리카'];
const index = superheroes.indexOf('토르');
console.log(index)

 

findIndex

배열 안에 다른 파라미터 들이 있는 경우 배열의 index를 가져온다.

 

find

findIndex와 유사하지만 찾은 그 값을 반환하게 된다.

 

 

const array = [
  {
    id: 1,
    text: "hi",
    done: true
  },
  {
    id: 2,
    text: `i'm`,
    done: true
  },
  {
    id: 3,
    text: "mingyu",
    done: false
  }
];

const index = array.findIndex((array) => array.id === 3);
console.log(index); //2
const index_find = array.find((array) => array.id === 3);
console.log(index_find) // {id: 3, text: "mingyu", done: false}

 

filter

특정 조건을 만족하는 원소들을 찾아 그것으로 배열을 새로 만듬.

 

const array = [
  {
    id: 1,
    text: "hi",
    done: true
  },
  {
    id: 2,
    text: `i'm`,
    done: true
  },
  {
    id: 3,
    text: "mingyu",
    done: false
  }
];

const tasksNotDone = array.filter((array) => !array.done);
console.log(tasksNotDone);

위처럼 사용할 수 있다. 

 

여기서 !array.done 은 array.done === false 와 같다!

 

즉 array를 인자로 받아온 후에 뒤의 조건식이 맞으면 새 배열로 추가하는 것이다.

 

 

splice

배열의 해당 원소를 제거

 

slice

배열의 해당원소를 제거하지만 원 배열을 건드리지 않음

 

const numbers = [10, 20, 30, 40];

const index = numbers.indexOf(30);
console.log(index); //2


const spliced = numbers.splice(index, 2);
console.log(numbers); //[10, 20]
console.log(spliced); //[30, 40]


const numbers2 = [10,20,30,40]

const sliced = numbers.slice(0,2);
console.log(sliced) //[10, 20]
console.log(numbers2)  //[10, 20, 30, 40]

둘다 해당 인덱스부터 얼마나 잘라낼지 보는 것지미나, slice 는 원 배열을 건드리지 않는것이 특징이다.

 

shift

배열의 왼쪽 값을 가져옴

pop

배열의 맨 오른쪽 값을 가져옴

unshift

배열의 왼쪽 값을 입력

push

배열의 오른쪽 값을 입력

 

 

const numbers = [10, 20, 30, 40, 50];

const value = numbers.shift();
console.log(value); //10
console.log(numbers); //[20, 30, 40, 50]


const numbers2 = [10, 20, 30, 40, 50];

const value2 = numbers2.pop();
console.log(value2); //50
console.log(numbers2); //[10, 20, 30, 40]

 

 

concated

두개의 배열을 합칠 때 사용

 

join

배열을 문자열로 합쳐줄 때 사용

파이썬에서와 똑같다!

 

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

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

const array = [1, 2, 3, 4, 5];
console.log(array.join(" ")); //1 2 3 4 5

 

reduece

 

누적값(accumulator) 현재값(current) 등의 값을 이용하여 편리하게 계산을 할 수 있다.

 

아래는 합, 평균을 구하는 방법이다.

 

 

const numbers = [1, 2, 3, 4, 5];

let sum = 0;

numbers.forEach((n) => {
  sum += n;
});
console.log(sum); //15

const sum2 = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); //15

//accumulator : 누적값 , current : 현재값

const average = numbers.reduce((accumulator, current, index, array) => {
  if (index === array.length - 1) {
    return (accumulator + current) / array.length;
  }
  return accumulator + current;
}, 0);
console.log(average); //3

 

위 reduce 내장함수를 이용하여 배열내 개수를 카운트 해주는 기능을 사용할 수 있다.

 

const alphabets = ["a", "a", "a", "b", "c", "c", "d", "e"];

const counts = alphabets.reduce((acc, cur) => {
  if (acc[cur]) {
    acc[cur] += 1;
  } else {
    acc[cur] = 1;
  }
  return acc
}, {});

console.log(counts);

includes

 

배열의 includes 내장함수를 사용하면 조금 더 똑똑하게 함수를 쓸 수 있다.

 

function isAnimal(text) {
  return (
    text === "고양이" || text === "개" || text === "거북이" || text === "너구리"
  );
}

console.log(isAnimal("개")); //True

const isAnimal2 = (text) => ["고양이", "개", "거북이", "너구리"].includes(text);
console.log(isAnimal2("개")); //True