본문 바로가기
Frontend/JavaScript

js 기초 (데이터타입, 연산자, 조건문, 반복문, 변수 유효범위, 형변환)

by SOLYI 2021. 10. 16.
import getType from './getType'
import rd from './getRandom'

//실행문
console.log("heloworld!")
console.log(123)
console.log(typeof "heloworld!")
console.log(typeof 123)
console.log(true)
console.log(typeof null)
console.log(typeof undefined)
console.log(typeof {})
console.log(typeof [])

// function getType(data){
//     return Object.prototype.toString.call(data).slice(8, -1);
// }
console.log("-getType function-")
console.log(getType(123))
console.log(getType("안녕"))
console.log(getType({}))
console.log(getType(false))
console.log(getType(null))


//산술연산자(arithmetic operator);
console.log('산술연산자')
console.log("1 + 2 = ", 1 + 2)
console.log("5 - 8 = ", 5 - 8)
console.log("3 * 2 = ", 3 * 2)
console.log("10 / 2 = ", 10 / 2)
console.log("7 / 5 = ", 7 / 5)
console.log("7 % 5 = ", 7 % 5)

//할당연산자
console.log('할당연산자')
let a = 2
console.log(a+=1);
console.log(a-=1);
console.log(a*=1);
console.log(a/=1);

//비교연산자
console.log('비교연산자')
const b = 1
const c = 1
console.log(b === c);

function isEqual(x,y){
  return x === y
}
console.log(isEqual(b,c))
console.log(isEqual(1,1))
console.log(isEqual(2,"2"))

console.log(b !== c)  //불일치 연산자
console.log(b < c);

//논리연산자
console.log('논리연산자')
const x = 1===1
const y = 'ab' === 'ab'
const z = false
console.log(x)
console.log(y)
console.log(z)

console.log("&& : ", x && y && z)
          // 그리고
console.log("|| : ", x || y || z)
          // 또는
console.log("부정연산자 ! : ", !x);
          // 부정연산자

//삼항연산자
console.log('삼항연산자')
const s = 1 < 2
if(a){
  console.log("참")
}else{
  console.log("거짓")
}

console.log(s ? '참' : '거짓')

//조건문 if else
console.log("조건문 if else ")
const o = rd()
if( o < 3){
  console.log(o , '< 랜덤숫자는 3보다 작다')
}else if ( o === 4){
  console.log(o , " o는 4이다")
}else{
  console.log(o, "o는 5이상이다")
}

//switch
console.log('switch')
switch (o) {
  case 0:
    console.log("0이나옴")
    break
  case 2:
    console.log("2나옴")
    break
  case 4:
    console.log("4나옴")
    break
  default:
    console.log('그외숫자')
}

//반복문
//for(시작조건; 종료조건; 변화조건)
console.log('반복문')
for(let i = 0; i < 7; i++){
  console.log(i);
}

  //ul태그 안에 li태그 추가해주기
  const ulEl = document.querySelector('ul')
  for(let i = 0; i < 10; i++){
    const li = document.createElement('li')
    li.textContent = `list-${i + 1}`
    if((i+1) % 2 === 0){
      li.addEventListener('click', function(){
        console.log(li.textContent)
        console.log('짝수입니다;')
      })
    }
    ulEl.appendChild(li);
  }

//변수 유효범위
//var, let, const
console.log('변수 유효범위 var let const')
//let, const는 블럭 내에서 유효
//var는 되도록 사용x
function scope(){
  
  if(true){
    var aa =123
  };
  console.log(aa);
}
scope()

//형 변환
console.log('형변환')
//Turthy(참같은 값)
// true, {}, [], 1, 2, 'false', -12, '3.14', ...

//Falsy(거짓 같은 값)
//false, '', null, undefined, 0, -0, NaN
const bb = 1
const cc = '1'

console.log(bb === cc)

if('false') console.log(123)
if(undefined) console.log(123)
반응형