공부일지

231204 (JavaScript)

CD가참둥그렇다 2023. 12. 4. 17:52

자바스크립트 변수의 차이점

  • var : 재선언, 재할당 가능한 변수이다. 사용자에게 혼동을 줄 수 있다.
  • let : 재선언 불가, 재할당만 가능한 변수이다.
  • const : 상수이다. 재선언 불가, 재할당 불가

TypeOf()함수

  • 자바스크립트 함수로 괄호 안의 값이나 변수가 어떤 자료형인지 알려준다.
  • 자바는 이미 타입이 주어졌기 때문에 타입 추론이 빈번하지 않다.

백킷

  • `` : ${}로 변수의 값을 사용할 수 있게 해준다.
  • 변수나 식이 복잡해도 변수를 그대로 가져다 쓰기 때문에 오류 발생이 낮다.
console.log((classNumber+1)+'호반 '+name+'님 환영합니다.')
console.log(`${classNumber}호반 ${name}님 환영합니다.`)

형변환

  • Number(), parseInt(), parseFloat()등으로 숫자 형변환 가능하다.
    • true = 1, false = 0, null = 0, undefined = ‘NaN’으로 반환한다.
    • 문자열 0이 앞에 있다면 제거 후 숫자로 바꿔준다.
  • 자바와 다르게 대문자로 시작하는 함수도 존재한다.
  • .toString()으로 문자열로 변환 가능하다.

조건문의 사용

function ageIf() {
            const currentYear = 2023;
            let birthYear;
            let age;

            birthYear = parseInt(prompt('태어난 연도를 입력하세요.(yyyy)', '0'));
            age = currentYear - birthYear + 1;

            if (age < 20) {
                alert(`${age}살은 성인이 아닙니다.`);
            } else {
                alert(`${age}살은 성인입니다.`);
            }
        }
        function for1() {
            for (let i = 1; i <= 10; i++) {
                console.log(`${i}반복중`);
            }
        }
        function forMul1() {
            for (let i = 1; i < 10; i++) {
                console.log(`2 X ${i} = ${i * 2}`)
            }
        }
        function forMul2() {
            for (let i = 2; i <= 9; i++) {
                for (let j = 1; j <= 9; j++) {
                    console.log(`${i} X ${j} = ${i * j}`)
                }
            }
        }

콜백 함수의 이용

  • 익명 함수를 만들어서 반복문을 돌리게 된다.
animal.forEach(function(animalSingle){
            console.log(`${animalSingle}`);
        });

for in으로 반복문 만들기

        for(key in CDObject){
            console.log(`${key} : ${CDObject[key]} `);
        }

function을 오버로딩 방식으로 동작하게 하기

  • 2번째 파라미터가 없다면 해당 값의 기본 값을 설정할 수 있다.
function sum(x, y=0){
        console.log(x+y);
      }

객체

  • 객체는 기능과 속성을 가지는 것
  • 자바에서 DAO, DTO와 같은 기능을 한다.
  • 내장 객체 : 사용자 정의 객체, 문자(String), 날짜(Date), 배열(Array), 수학(Math) 등
  • 브라우저 객체 모델(BOM) : window, screen, location, history 등
  • 문서 객체 모델(DOM) : <html>, <head>, <body>
  • 사용자 객체
    • 구조 : 객체명 {키 : 값, 키:값}의 구조를 가진다.
    • 각 키와 값을 프로퍼티(속성)이라고 한다.
    • ‘객체명.키’를 이용하여 표시하는 것을 점 표기법이라고 한다.
    • ‘객체명[’키’]’를 이용하여 표시하는 것을 괄호 표기법이라고 한다.
    • 객체명.키 = 값;으로 값을 바꿀 수 있다.
    • 기존에 없던 키에 값을 넣더라도 사용 가능하다.