20일차

👩‍🚀

20일차

 

Part 4. JavaScript Level up

Ch 1. JS 데이터

 

---

 

Ch 1. JS 데이터

 

 

주제

 

• JS 문법

 

 

주요 내용

 

 🔗 문자 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String

String - JavaScript | MDN

• string.prototype.indexOf(str): 주어진 값 str과 일치하는 첫 번째 인덱스 반환
• string.prototype.slice(startIndex, endIndex): 인덱스 startIndex부터 endIndex-1 까지의 문자열 반환
• string.prototype.replace(str1, str2): 문자열 str1을 str2로 대체
• string.prototype.match(): 정규표현식
• string.prototype.trim(): 공백 제거

 

 🔗 숫자와 수학 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math

Math - JavaScript | MDN

• parseInt() / parseFloat()

• Math.abs(x): 절댓값 반환
• Math.min(x, y): x, y 중 가장 작은 값 반환
• Math.max(x, y): x, y 중 가장 큰 값 반환
• Math.ceil(x): 올림 
• Math.floor(x): 내림
• Math.round(x): 반올림
• Math.random(): 랜덤 숫자 반환

 

 🔗 배열 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

 

• Array.prototype.find(callback): 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환
• Array.prototype.concat(arr): 배열 합치기 (원본 유지)

const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cherry"];

console.log(numbers.concat(fruits)); // 원본 유지!
console.log(numbers);
console.log(fruits);

 

 

• Array.prototype.forEach(callback(item, index)): 배열 데이터의 아이템의 개수 만큼 특정한 callback 함수를 반복적으로 실행 => 따로 반환되는 값은 없다.

const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cherry"];

fruits.forEach(function (element, index, array) {
  console.log(element, index, array);
});

 

 

• Arrow.prototype.map(callback(item, index)): callback 내부에서 반환하는 데이터를 모아 놓은 새로운 배열을 만들어서 반환 (원본 유지)

const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cherry"];

const a = fruits.forEach((fruit, index) => {
  console.log(`${fruit}-${index}`);
});
console.log(a);

const b = fruits.map((fruit, index) => ({
  id: index,
  name: fruit,
}));
console.log(b);

 

 

• Array.prototype.filter(callback(item, index)): 배열 데이터 안에 들어 있는 각각의 아이템들을 특정한 기준에 의해서 필터링, 필터된 새로운 배열 데이터 결과를 반환 (원본 유지)

const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cherry"];

const a = numbers.map((number) => number < 3);
console.log(a);

const b = numbers.filter((number) => number < 3);
console.log(b);

console.log(numbers);

 

 

• Array.prototype.find(callback): callback 내에서 뭔가를 찾으면 반복이 종료되고, 찾아진 배열의 아이템이 반환
• Array.prototype.findIndex(callback): 위의 인덱스 번호를 반환

const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cherry"];

const a = fruits.find((fruit) => /^B/.test(fruit));
console.log(a);

const b = fruits.findIndex((fruit) => /^B/.test(fruit));
console.log(b);

 

 

• Array.prototype.includes(item): 배열에 item이 포함되어 있는지 여부 반환

const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cherry"];

const a = numbers.includes(3);
console.log(a);

const b = fruits.includes("HEROPY");
console.log(b);

 

 

• Array.prototype.push(item): 배열 가장 뒤에 item 삽입 (원본 수정됨 주의)
• Array.prototype.unshift(item): 배열 가장 앞에 item 삽입 (원본 수정됨 주의)

const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cherry"];

numbers.push(5);
console.log(numbers);

numbers.unshift(0);
console.log(numbers);

 

 

• Array.prototype.reverse(): 배열 아이템 순서 뒤집기 (원본 수정됨 주의)

const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cherry"];

numbers.reverse();
fruits.reverse();

console.log(numbers);
console.log(fruits);

 

 

• Array.prototype.splice(index, deleteCount, item1, item2 ...): index부터 deleteCount 만큼 아이템 삭제 & 그 자리에 item1 끼워넣기 (원본 수정됨 주의)

const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cherry"];

numbers.splice(2, 1, 99);
console.log(numbers);

fruits.splice(2, 0, "Orange");
console.log(fruits);

 

 

 

느낀점

 

정리 힘들다................

 

---