👁‍🗨javascript(변수, 데이터, 함수, 조건문)

변수 선언

• const, let, var 까지 3가지 방법으로 변수를 선언할 수 있음.

• const, let, var의 차이

  • let : 재선언이 불가능함으로써 실수를 방지할 수 있다. / 재할당은 가능하고 범위는 모든 중괄호가 범위임.
  • const : 재선언, 재할당이 불가능하다. (그래서 변하면 안되는 값을 보관하기 용이함.) / 범위는 let과 같음.
  • var : 재선언, 재할당이 가능하며 범위는 함수내부이다.
    

❓ 참고사항

• 변수를 원래 아무데서나 만들어 쓸 수 있는데 예를 들어 함수 안에 변수를 선언, 할당했을 때 범위는 함수 내부이고 함수 바깥에서 해당변수를 사용하려 하면 오류.
• 변수.push()로 해당 변수에 값을 넣을 수 있고, let 같은 경우엔 재할당이 가능하기 때문에 let a = true 라고 선언했더라도 밑에 줄에 a = false 와 같이 변환 가능.
• 변수 이름 입력 시 띄어쓰기를 해야하면 첫글자를 대문자로 쓰기로 약속!!

---

데이터 타입

• 자바스크립트 데이터 타입에는 숫자, 문자(열), boolean, null, undefined이 있음.

  • null은 값이 없다는 것을 뜻하며, undefined는 정의되지 않음, boolean은 true와 false 2가지 값을 가진다.

• 배열(array), 자료형(object)

  • var car = ['소나타', 50000, 'white'] 와 같은 형태가 array.
  • array 에서 자료를 꺼내려면 indexing해줘야 함.
  • car[0] 과 같은 형태로.
  • 배열 안에 데이터 수정방법 : car[0]='아반떼'

  • var car2 = {name : '소나타', price : 50000} 과 같은 형태는 object.
  • key : value 형태를 기억하면 쉬움.
  • data를 꺼내려면?? car2['name'] 또는 car2.price와 같이.
  • 자료 수정하는 방법 : car2.price = 60000;

• array와 object의 차이점!

  • array는 순서대로 데이터 저장, 자료 간 순서가 있음.
    • .sort()라는 메서드를 사용해서 정렬 시킬 수 있음.
    • 중간 자르기도 가능 .slice(1(시작점), 2(끝점)) / 이 외에도 forEach(), filter() 등등
  • object는 이름을 붙여서 저장, 순서 개념이 없음.

데이터 바인딩

• 복잡한 자료에서 원하는 data 꺼내기 / 라이브러리 활용 가능(jquery나 React 등)

• var car2 = {name : '소나타', price : [50000, 3000, 4000]} 여기서 50000 이라는 값만 꺼내려면?

  • document.querySelector('.car-price').innerHTML = car2.price[0]

---

함수(function)이란?

• 반복해서 사용할 수 있는 코드 조각 / 긴 코드 재사용 용이

• 기본 구문 : function 함수이름(argument){실행할 코드}

  function onClickBtn(){
      document.querySelector('.alert-box').style.display='block'
       }
  function closeBtn(){
      document.querySelector('.alert-box').style.display = 'none'
      }

• 함수 하나로 여러 기능을 할 수 있도록 해주는게 argument(파라미터, 인자)

• 파리미터는 여러 개 사용가능하며, 데이터를 function에 보내는 방법임.

• retrun을 함수 내부에서 쓰는 이유?

  • 함수 외부에서 값을 확인하고 싶을 때 사용.
  • 예를 들어 망고주스를 만들고 싶은데 기계에서 망고주스가 안꺼내진다면?? 이럴 때 return문을 사용함.
    💥 주의사항!! function 안에서 return과 추가 작업을 입력하면 return까지만 작업을 수행하고 그 아래 코드는 실행하지 않음.

---

조건문(conditionals)

• 조건문의 형식

  • if(조건){
    조건 === true 이면 해당 코드 실행
    } else{
    조건 === false 이면 해당코드 실행
    }

❓ 참고사항

• typeof는 값의 타입을 확인할 때 사용.
• parseInt라는 함수는 string을 number로 변환할 때 사용.(abs 와 같은 string은 변환x)

예시>
console.log(typeof "15", parseInt("15"));
console.log(age, parseInt(age));  → 결과로 15(string) 15(number)가 나옴.

• isNaN 결과가 false이면 Not a Number가 false라는 뜻이므로 숫자가 맞음!

• 다시 조건문으로 돌아와서 조건문에는 if와 else만 들어가는게 아니라 else if도 들어갈 수 있음.

  • 예시)

    if(isNaN(ages) || ages < 0){   // || : or 의 의미. 좌항이나 우항 중 하나만 true여도 결과 값이 true가 됨. 
      console.log("please write a real positive number")
    } else if(ages < 18) {
      console.log("you are too young")
    } else if(ages >= 18 && ages <= 50) { 
      console.log("you can drinksss")  
    } else {
      console.log("you can`t drink")
    }

    • if문 2개 쓰는 것과 if/else if문의 차이
      - if/else if문은 앞의 조건식이 참이면 else문 뒤는 아예 실행이 되지 않음.
      그러나 if문을 2개쓰면 앞의 조건식과 상관없이 둘째 if문도 실행.
      그래서 if문을 여러번 쓰려면 if/else if문을 씀!

• 비교연산자 정리!

  • true || true === true
    false || true === true
    true || false === true
    false || false === true
  • true && true === true
    false && true === false
    true && false === false
    false && false === false
  • = : 변수 할당 === : 좌항 우항의 값과 타입이 같다. == : 좌항 우항의 값이 같다
    != : 좌항 우항의 값이 다름 !== : 좌항 우항의 값과 타입이 다름

• 비교연산자 외 true로 인식하는 자료들

  • 0제외 숫자, '문자', [], {}

• false로 인식하는 자료들

  • 0, '', null, undefined, NaN