/
/

자바스크립트 문법

기초문법연산자자료형변수함수
avatar
전상욱
2025.04.10
·
12 min read

기초 문법

script 태그는 자바스크립트 코드를 작성할 영역을 선언하는 것
head 태그 영역과 body태그 영역에 선언하여 사용 가능.

주석처리

선언문 안에 설명글을 적거나 코드를 생략할 때 주석처리를 하면됨.

예시

<html>
  <head>
    <script> 스크립트 코드 </script>
  </head>
  <body>
    <script>
      스크립트 코드
      // 한줄 주석
      /*
        여러줄 주석
        여러줄 주석
      */
    </script>
  </body>
</html>

내부 스크립트를 외부 스크립트로 분리

// script.js

document.write('Hello World!!');
<!-- index.html -->

...
<head>
  <title>Document</title>
  <script src="script.js"></script>
</head>
...

  • script태그의 src속성을 이용하여 JS파일의 상대경로를 통해 JS파일과 연동하여 사용

  • 내부에 정의된 script태그를 외부로 분리하는 이유는 자바스크립트 소스를 찾기 쉽고, 손상시킬 염려도 줄일 수 있음.

  • 프로젝트 관리를 원활하게 할 수 있음.

코드 입력 시 주의 사항

  • 자바스크립트는 대,소문자를 구분하여 작성

  • 코드를 한줄에 여러 코드를 작성할 때에는 세미콜론( ; )을 사용하는 것이 좋음

  • 가독성을 높이기 위해 한 줄에 한 문장씩 작성하는 것이 좋음

  • 문자형 데이터를 쓸 때에 큰따옴표( " )와 작은따옴표( ' )의 겹침을 주의

  • 코드를 작성할 때에 괄호의 짝을 맞춰야함

변수

변하는 데이터(값)을 저장할 수 있는 메모리 공간

변수에는 오직 한 개만 저장이 가능합니다. 따라서 10이라는 데이터가 저장되어 있는 a라는 변수에 20이라는 데이터를 저장하려고 할 때 기존에 저장되어 있던 데이터는 지워지고 새로운 데이터가 저장됨.

변수선언

기본형

var 변수명;
var 변수명 = 값;

  • 변수를 선언할 때 한글을 사용할 수 없고, 영문과 숫자, 일부 특수문자( _ , $ )만 사용가능.

변수에 저장할 수 있는 자료형

  • 문자형
    문자형 데이터는 데이터가 큰따옴표 또는 작은따옴표로 감싸져 있음
    그리고 HTML태그를 포함되어 있는 문자형 데이터를 출력하면 태그로 인식

기본형

var 변수명 = '문자/숫자';

예시

var str = 'javascript';
var num = '1000';
var tag = '<h1>제목</h1>';

  • 숫자형
    숫자를 의미하고 큰따옴표가 숫자를 감싸고 있다면 Number(숫자)를 이용하여 문자형 데이터를 숫자형 데이터로 바꿔야함.

기본형

var 변수명 = 숫자 / Number('문자형 숫자');

예시

var num1 = 100;
var num2 = 12345;
var str = Number('500');

  • null과 undefined 데이터

    null : 변수에 저장된 데이터를 비우고자 할 때 사용하는 값
    undefined : 변수를 선언하고 값이 저장되기 전의 기본 값

  • typeof
    지정한 데이터 또는 변수에 저장된 자료형을 알고 싶을 때 사용

    기본형

    typeof 변수 또는 데이터

변수 선언 시 주의 사항

  • 변수명 첫 글자로는 $ , _ , 영문자만 사용가능

  • 변수명 두번째 글자부터는 영문자, 숫자, $ , _ 만 사용가능

  • 변수명으로 예약어를 사용할 수 없음

  • 변수명 작명할 때에는 되도록 의미를 부여해 작성

  • 변수명을 사용할 때에는 대/소문자를 구분

연산자

연산자의 종류

  • 산술 연산자

    • 더하기, 빼기, 곱하기, 나누기, 나머지 연산이 존재

    • 연산 대상 데이터가 반드시 2개가 있어야함

  • 문자 결함 연산자

    • 피연산자가 문자형 데이터일 때 여러 개의 문자를 하나의 문자형 데이터로 결합할 때 사용

    • 피연산자 중 문자형 데이터가 포함되어 있으면 다른 데이터형들을 문자형 데이터로 변환하고 문자 결합을 하여 하나의 문자형 데이터로 반환

기본형

문자형 데이터 + 문자형 데이터 = 하나의 문자형 데이터
문자형 데이터 + 문자형 이외 형태의 데이터 = 하나의 문자형 데이터

예시

'do it' + ' javaScript' = 'do it javaScript';
'100' + 200 = '100200';

  • 대입 연산자

    • 연산된 데이터를 변수에 저장할 때 사용

    • 복합 대입 연산자는 산술 연산자와 대입 연산자가 복합적으로 적용

    • HTML에서 문자형 데이터를 복합 대입 연산자를 이용하여 하나의 문자로 결합하여 사용가능

  • 증감 연산자
    숫자형 데이터를 1씩 증가/감소 시키는 증가/감소 연산자가 존재

기본형

변수의 값을 1만큼 감소 : 변수--; 또는 --변수;
변수의 값을 1만큼 증가 : 변수++; 또는 ++ 변수;

변수++ 과 ++변수의 차이

var A = ++B;
먼저 B의 값을 증가 시키고 증가된 B의 값을 A에 대입
var A = B++;
먼저 B의 값을 A에 대입하고 B의 값을 증가

  • 비교 연산자

    * 두 데이터를 비교할 때 사용하는 연산자
* 연산된 결과값은 `true` 또는 `false`로 논리형 데이터를 반환

    종류

    설명

    비고

    A > B

    A가 B보다 크다.

    -

    A < B

    A가 B보다 작다.

    -

    A >= B

    A가 B보다 크거나 같다.

    -

    A <= B

    A가 B보다 작거나 같다.

    -

    A == B

    A와 B는 같다.

    데이터형과 상관없이 표기된 데이터만 일치하면 true를 반환

    A != B

    A와 B는 다르다.

    데이터형과 상관없이 표기된 데이터만 일치하지 않으면 true를 반환

    A === B

    A와 B는 같다.

    데이터와 데이터형 모두가 같아야 true를 반환

    A !== B

    A와 B는 다르다.

    데이터와 데이터형 중 하나 또는 모두가 달라야 true를 반환

  • 논리 연산자
    피연산자가 논리형 데이터인 true 또는 false로 결과값을 반환

    종류

    설명

    OR ( || )

    둘중 하나라도 true일때 true 반환

    AND ( && )

    둘 모두 true일때 true 반환

    NOT ( ! )

    피연산자의 값의 반대값을 반환

  • 삼항 조건 연산자
    조건식의 결과에 따라 실행 결과가 달라지는 연산자, 피연산자가 3개 필요

    형태

    조건식 ? true일때 출력값 : false일때 출력값

연산자의 우선순위

우선순위

  1. ()

  2. 단항 연산자 ( -- , ++ , ! )

  3. 산술 연산자 ( + , - , * , / , % )

  4. 비교 연산자 ( < , > , <= , >= , == , != , === , !== )

  5. 논리 연산자 ( && , || )

  6. (복합)대입 연산자 ( = , += , -= , *= , /= , %= )

- 컬렉션 아티클