211006 JS 스터디 - 보충 공부 내용 정리

화살표 함수

• function 키워드 대신 ⇒ 사용

const add = (a, b) => {
  return a + b;
};

console.log(add(1, 2));

• 일반 function과의 주요 차이점: this가 가리키는 것이 function과 다름

객체 비구조화 할당

• 객체 구조 분해라고도 함

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);

• 이 코드가 객체에서 값들을 추출해서 새로운 상수로 선언해주는 역할을 함
• parameter 단계에서 비구조화 할당 가능

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

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

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

print(ironMan);
print(captainAmerica);

for...of문

사용할 일이 별로 없음. 배열 반복 시 배열 내장함수를 주로 사용

let numbers = [10, 20, 30, 40, 50];
for (let number of numbers) {
  console.log(number);
}

for...in문

• 객체의 정보를 배열 형태로 받아올 수 있는 함수
  • Object.entries: [[키, 값], [키, 값]] 형태의 배열로 변환
  • Object.keys: [키, 키, 키] 형태의 배열로 변환
  • Object.values: [값, 값, 값] 형태의 배열로 변환
• 객체가 지니고 있는 값에 대한 반복 for...in 구문

const doggy = {
  name: '멍멍이',
  sound: '멍멍',
  age: 2
};

for (let key in doggy) {
  console.log(`${key}: ${doggy[key]}`);
}

//출력
//name: 멍멍이
//sound: 멍멍
//age: 2

배열 내장함수

1. forEach

• for문 대체 가능
• parameter로 각 원소에 대해 처리하고 싶은 코드를 함수로 넣음
• 콜백함수: 함수 형태로 파라미터 전달

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

for (let i = 0; i < superheroes.length; i++) {
  console.log(superheroes[i]);
}

위 코드를

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

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

이 코드로 대체 가능

2. map

• 배열 안의 각 원소를 변환할 때 사용
• 새로운 배열 형성

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

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

3. indexOf

• 원하는 항목이 몇 번째 원소인지 찾아줌

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
const index = superheroes.indexOf('토르');
console.log(index);

4. findIndex

• indexOf로는 배열 안의 값이 객체, 배열일 경우 찾을 수 없음
• 검사하고자 하는 조건을 반환하는 함수를 넣는 findIndex 이용

const todos = [ { id: 1, text: '자바스크립트 입문', done: true }, { id: 2, text: '함수 배우기', done: true }, { id: 3, text: '객체와 배열 배우기', done: true }, { id: 4, text: '배열 내장함수 배우기', done: false } ]; const index = todos.findIndex(todo => todo.id === 3); console.log(index); //결과: 2

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

const index = todos.findIndex(todo => todo.id === 3);
console.log(index);

//결과: 2

5. find

• 찾아낸 값 자체를 반환 (몇 번째인지 X)

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

const todo = todos.find(todo => todo.id === 3);
console.log(todo);

//{id: 3, text: "객체와 배열 배우기", done: true}

6. filter

• 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열 생성

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

const tasksNotDone = todos.filter(todo => todo.done === false);
console.log(tasksNotDone);

/*
[
  {
    id: 4,
    text: '배열 내장 함수 배우기',
    done: false
  }
];
*/

7. splice

• 배열에서 특정 항목 제거에 사용

const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30);
numbers.splice(index, 1);
console.log(numbers);

//[10, 20, 40]

8. slice

• 배열을 잘라낼 때 사용
• 기존 배열을 건들지는 않음

const numbers = [10, 20, 30, 40];
const sliced = numbers.slice(0, 2); // 0부터 시작해서 2전까지

console.log(sliced); // [10, 20]
console.log(numbers); // [10, 20, 30, 40]

9. shift & pop

• shift: 첫 번째 원소를 배열에서 추출 (배열에서 사라짐)
• pop: 배열 맨 마지막 항목을 추출

10. unshift

• shift의 반대
• 배열의 맨 앞에 새로운 원소 추가

11. concat

• 여러 개의 배열을 하나의 배열로 합침
• 기존 array에 변화 주지 X

12. join

• 배열 안의 값들을 문자열 형태로 합침

13. reduce

• 함수에 2개의 파라미터를 전달
• 첫 번째 파라미터: 콜백함수
• 두 번째 파라미터: reduce 함수에서 사용할 초기값

 

 

출처. 벨로퍼트 https://learnjs.vlpt.us

벨로퍼트와 함께하는 모던 자바스크립트 · GitBook