본문 바로가기
기초/프론트엔드 종합반 HTML&CSS, JS, React

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

by Hyeon_E 2023. 1. 12.

JS 데이터 타입 확인

console.log(typeof "Hi");	//string
console.log(typeof 123);	//number
console.log(typeof true);	//boolean
console.log(typeof undefined);	//undefined
console.log(typeof null);	//object
console.log(typeof {});	//object
console.log(typeof []);	//object
function getType(data) {
  return Object.prototype.toString.call(data).slice(8, -1);
}

console.log(getType(123));	//Number
console.log(getType(false));	//Boolean
console.log(getType(null));	//Null
console.log(getType({}));	//Object
console.log(getType([]));	//Array

JS 산술, 할당 연산자

산술 연산자(Arithmetic Operator)

  • +: 더하기
  • -: 빼기
  • *: 곱하기
  • /: 나누기
  • %: 나머지
console.log(1 + 2);
console.log(5 - 7);
console.log(3 * 4);
console.log(10 / 2);
console.log(7 % 5);

할당 연산자(Assignment operator)

  • =
const a = 2;
let b = 2;
b += 1;
b -= 1;
b *= 1;
b /= 1;
b %= 1;

 

JS 비교 논리, 연산자

비교 연산자(Comparison Operator)

  • ===: 일치 연산자
  • !==: 불일치 연산자
  • <, >: 부등호
  • <=, >=
const a = 1;
const b = 1;
const c = '1';
const d = 2
console.log(a === b); //true
console.log(a === c); //false
console.log(a < d); //true
console.log(a > d); //false
console.log(a <= b); //true
console.log(a >= b); //true

논리 연산자(Iogical Operator)

  • &&: 그리고, And 연산자(모두 다 true여야 true 만족)
  • ||: 또는, Or 연산자 (한개 만 true여도 true 만족)
  • !: 부정, Not 연산자(true면 false, false면 true)
const f = 1 === 1;
const g = "AB" === "AB";
const h = false;

console.log(f && g && h); //false
console.log(f || g || h); //true
console.log(!h);	//true

JS 삼항 연산자(Ternary Operator)

?와 :기호를 기준으로 해서 3개의 항이 있음

?앞에 조건을 적고 Boolean데이터 여부에 따라 참이면 :앞의 결과를 거짓이면 :뒤에 결과를 실행

const i = 1 < 2;

if (a) {
  console.log("참");  //참
} else {
  console.log("거짓");
}

console.log(a ? "참" : "거짓"); //참

JS 조건문

If Else

const j = random(); //j는 랜덤수

if (j === 0) {
  console.log("j는 0");
} else if (j === 1) {
  console.log("j는 1");
} else {
  console.log("j는 0도 2도 아님");
}

Switch

조건의 내용이 어떠한 변수가 특정한 값으로 떨어지는 것으로 분기처리를 하고 있다면 if문 보다는 switch문이 적합

break를 하지 않으면, 다른 조건이 성립할 때 그 결과도 같이 나옴. 위에서 부터 밑으로 조건성립을 찾음

switch (j) {
  case 0:
    console.log("j는 0");
    break;
  case 1:
    console.log("j는 1");
    break;
  default:
    console.log("j는 0도 1도 아님");
}

JS 반복문 For

for (시작조건; 종료조건; 변화조건){ }
for (let i = 0; i < 3; i += 1) {
  console.log("i:", i);
}

댓글