6주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트

JS 데이터 문자

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

String - JavaScript | MDN

String 전역 객체는 문자열(문자의 나열)의 생성자

const string1 = "A string primitive";
const string2 = "Also a string primitive";
const string3 = `Yet another string primitive`;

const str = "0 123";
//문자데이터 0 123
console.log(str.length);
//5, 문자열 길이, 띄어쓰기도 공백으로 포함됨
const str2 = "Hello world";
const result = str2.indexOf("world");
//String.prototype.indexOf()
console.log(result);
//6, 만약 단어를 찾을 수 없다면 -1을 반환
console.log(str2.slice(0, 3));
//Hel, 문자열의 일부를 추출하여 새로운 문자열 반환
console.log(str2.replace("world", "H.E"));
//Hello H.E, 앞에 문자데이터를 뒤에 문자데이터로 변경해줌
console.log(str2.replace(" world", ""));
//Hello, replace을 이용하여 필요한 문자열만 남길 수 있음
const str3 = "hyeone@gmail.com";
console.log(str3.match(/.+(?=@)/)[0]);
//hyeon, 특정한 문자데이터에서 정규표현식을 통해서 특정한 문자를 match(일치)시켜서 배열데이터로 반환
const str4 = "  Hello world  ";
console.log(str4.trim());
//Hello wrold, 특정한 문자데이터에 앞뒤에 연결된 모든 공백 문자를 제거

---

JS 데이터 숫자와 수학

데이터 숫자(Number)

const pi = 3.14159265358979;
console.log(pi);
const st = pi.toFixed(2);
//소수점에 몇번째 자리까지 유지할것인지를 명시. 문자데이터가 반환됨
console.log(st);
//3.14
console.log(typeof st);
//string
const integer = parseInt(st);
//분석되서 숫자만 추출되서 정수로 반환됨
const float = parseFloat(st);
//분석되서 숫자만 추출되서 실수로 반환됨
console.log(integer);
//3
console.log(float);
//3.14
console.log(typeof integer, typeof float);
//number number

 

Math

• 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체. 함수 객체가 아님
• Number자료형만 지원하며 BigInt와는 사용할 수 없음

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

Math - JavaScript | MDN

console.log("abs:", Math.abs(-12));
//12, 절대값 반환
console.log("abs:", Math.min(2, 8));
//2, 인수로 들어온 숫자데이터들 중에 가장 작은 값을 반환
console.log("abs:", Math.max(2, 8));
//8, 인수로 들어온 숫자데이터들 중에 가장 큰 값을 반환
console.log("abs:", Math.ceil(3.14));
//4, 숫자데이터 올림 처리된 값을 반환
console.log("abs:", Math.floor(3.14));
//3, 숫자데이터 내림 처리된 값을 반환
console.log("abs:", Math.round(3.14));
//3, 숫자데이터 반올림 처리된 값을 반환
console.log("abs:", Math.random());
//0.9032879258817808, 랜덤숫자 반환(난수반환)

---

JS 데이터 배열

배열에 n번째에서 n 이 숫자를 '인덱스(index)'라 하고

배열데이터에서 대괄호를 열고 인덱스 숫자를 넣어서 조회하는 것을 '인덱싱(indexing)'이라고 함

배열 데이터 내부에 들어있는 각각의 데이터들을 '요소(element)'라고 하며 item이라고 할 수 있음

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

const fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits[1]);	//Banana
console.log(fruits.length); //3
console.log([].length); //0

console.log(numbers.concat(fruits));
//(7) [1, 2, 3, 4, 'Apple', 'Banana', 'Cherry']
//합쳐진 새로운 배열 생성, 원본 배열에는 영향이 없음

const array = [5, 12, 8, 130, 44];
const found = array.find((element) => element > 10);	//12
//화살표 함수 매개변수가 하나면 ()소괄호 생략 가능 (element => element > 10)
//또한 간단한 실행문을 반환하는 경우에는 중괄호랑 return 키워드를 생략할 수 있음
//콜백함수를 이용하여 반복

fruits.forEach(function (element, index, array) {
  console.log(element, index, array);
});
//아이템 개수 만큼 인수로 사용된 콜백함수가 반복적으로 실행됨
//첫번째 실행으로 Apple이 두번째에 Banana가 세번째 Cherry가 element로 들어옴
//실행될때 마다 두번째 매개변수인 index 값이 0부터 시작해서 하나씩 증가함
//array는 콜백에 해당하는 forEach라는 메소드가 붙어있는 그 배열(여기서는 fruits)데이터 지칭
//array는 필수요소X
const b = fruits.forEach((fruit, index) => {
  console.log(`${fruit}-${index}`);
}); //화살표 함수 사용

const c = fruits.map(function (fruit, index) {
  // return `${fruit}-${index}`;
  return {
    id: index,
    name: fruit,
  };
});
//0: {id:0, name:'Apple'} ... 2:{id:2, name:'Cherry'}
//인덱스가 총 3개니, 콜백함수가 총 3번 실행됨
//map 메소드는 인수로 사용하는 콜백에 내부에서 반환하는 하나의 데이터를 가지고
//데이터들을 모아놓은 새로운 배열을 만들어서 반환해줌
console.log(c);
const d = fruits.map((fruit, index) => ({
  id: index,
  name: fruit,
})); //화살표 함수 사용
//반환할려는 데이터가 객체데이터기 때문에 그대로 생략가능 X
//소괄호로 묶어서 중괄호를 열어주어야 객체데이터가 화살표함수 문법에 의해 반환됨

const e = numbers.filter((number) => {
  return number < 3;
});
console.log(e); //(2) [1, 2]
//배열데이터에 들어있는 각각의 item들을 특정한 기준에 의해서 필터링을 해 새로운 배열로 반환

const d = fruits.find((fruit) => {
  return /^B/.test(fruit);
});
console.log(d); //Banana
//데이터를 찾아 반환
const e = fruits.findIndex((fruit) => {
  return /^B/.test(fruit);
});
console.log(e); //1
//데이터를 찾고 인덱스 번호를 반환

numbers.push(5);
console.log(numbers); //(5) [1, 2, 3, 4, 5]
//배열에 가장 뒤쪽에 인수의 내용을 밀어넣음
numbers.unshift(0);
console.log(numbers); //(6) [0, 1, 2, 3, 4, 5]
//배열에 가장 앞쪽에 인수의 내용을 밀어넣음
numbers.reverse();
console.log(numbers);	//(6) [5, 4, 3, 2, 1, 0]
//배열을 거꾸로 뒤집어버림
numbers.splice(2, 1);
console.log(numbers); //(5) [5, 4, 2, 1, 0]
//지정된 인덱스 위치(인수1)에 원하는 개수(인수2)만큼 인덱스를 지움
numbers.splice(2, 0, 99);
console.log(numbers); //(6) [5, 4, 99, 2, 1, 0]
//지정된 인덱스 위치(인수1)에 인수3을 넣음