on
211006 JS 스터디 - 보충 공부 내용 정리
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
from http://j0nnie99.tistory.com/42 by ccl(A) rewrite - 2021-10-08 04:27:56