Front-end/JS

자바스크립트 기초 문법

조 수빈 2022. 7. 5. 15:18

자바스크립트 공부를 시작하게 되었다.
그동안 배우고 사용하던 언어 자바, 파이썬 등과 비슷한 부분도 있고 조금 다른 부분들도 있어 전체 내용을 정리하는 것이 아닌, 헷갈리거나 중요하다고 생각하는 부분들을 정리하여 기록하고자 한다.


🔍 기초 문법

☁ 선언문

선언문: 자바스크립트 코드를 작성할 영역을 선언하는 것
보통 태그 영역에 선언! (<body> 태그 영역에 선언해도 되긴 함)

<script>
    자바스크립트 코드;
</script>    

☁ 출력 메서드

타 언어의 print(), system.out.println() 등의 출력 메서드
document.write();

<script>
    document.write("Hello world!");
</script>    

☁ 변수

문자형(String), 숫자형(Number), 논리형(Boolean), 빈(Null) 데이터

변수 선언: var 변수명; 또는 var 변수명 = 값;

  • 🔹 문자형 데이터
    문자나 숫자를 "" 또는 ''로 감싸고 있음
    HTML 태그를 포함하여 출력하면 태그로 인식함

      var tag = "<h1>String</h1>";
  • 🔹 숫자형 데이터
    var 변수 = 숫자; 또는 Number("문자형 숫자");

      var t = Number("500"); //"500" -> 500
  • 🔹 논리형 데이터
    true 또는 false
    var 변수 = true or false; 또는 Boolean(데이터);

    false: 숫자 0, null, undefined, 빈 문자(" ")
    true: 그 외 모든 데이터


typeof
지정한 데이터 또는 변수에 저장된 자료형을 알고 싶을 때 사용
파이썬의 type() 메서드와 유사
typeof 변수 또는 데이터;


☁ 연산자

  • 🔹 문자 결합 연산자
    피연산자가 문자형 데이터, 여러 개의 문자를 하나의 문자형 데이터로 결합할 때 사용!
    if) 피연산자로 문자형 데이터가 한 개라도 포함
      => 다른 피연산자의 데이터는 자동으로 문자형 데이터로 형 변환 => 문자 결합

    ex) 문자형 데이터 + 숫자형 데이터 = 하나의 문자형 데이터
    "100" + 200 = "100200";


  • 🔹 비교 연산자
    특이하게 ===!== 가 있음
    ===== 둘 다 같은지 비교하는 것이지만, ===의 경우 자료형도 일치해야 true!
    ex) 숫자형 데이터와 문자형 데이터 예시
    var k = 10, m = "10";
    k == 10 //true
    k === 10 //true
    m == 10 //true
    m === 10 //false


☁ 기본 함수

prompt("질문", "기본 응답");
confirm("message); // 확인 => true, 취소 => false 리턴


'Front-end > JS' 카테고리의 다른 글

[JS] 자바스크립트의 형 변환 - 명시적 변환  (0) 2022.10.29
[JS] 자바스크립트의 데이터 타입  (1) 2022.10.04
자바스크립트 함수  (0) 2022.07.06
자바스크립트 객체  (0) 2022.07.06