[JavaScript] 자바스크립트 문법

2022. 6. 30. 09:47·Language/JavaScript
728x90

프로그램(program)이란 ?

프로그램은 컴퓨터가 실행할 수 있는 명령(instruction)으로 이루어진다.

컴퓨터 프로그래밍에서 컴퓨터가 실행할 수 있는 명령들을 실행문(statement)라고 한다.

즉, 프로그램이란 특정 결과를 얻기 위해서 컴퓨터에 의해 실행되는 실행문의 집합이라고 할 수 있다.


자바스크립트 문법

자바스크립트의 실행문은 세미콜론(;)으로 구분된다.

var x = 10;
var result = x + 3;

자바스크립트는 대소문자를 구분한다.

자바스크립트에서 변수나 함수의 이름, 예약어 등을 작성하거나 사용할 때에는 대소문자를 정확히 구분해서 사용해야 한다.

var javascript = 10; // 변수 javascript와 JavaScript는 서로 다른 두개의 변수로 인식됨.
var JavaScript = 20;
Var Script = 30; // 변수의 선언은 var 키워드로만 할 수 있으며 Var는 동작하지 않음.

리터럴(literal)

리터럴은 직접 표현되는 값 그 자체를 의미한다.

다음 예제에서 등장하는 값들은 모두 리터럴이다.

12            // 숫자 리터럴
"JavaScript"  // 문자열 리터럴
'안녕하세요'   // 문자열 리터럴
true          // 불리언 리터럴

식별자(identifier)

식별자는 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미한다.

자바스크립트에서 식별자는 영문자(대소문자), 숫자, 언더스코어(_) 또는 달러($)만을 사용할 수 있다.

※ 자바스크립트에서 식별자는 숫자와 식별자의 구별을 빠르게 할 수 있도록 숫자로는 시작할 수 없다.
※ 자바스크립트는 유니코드(unicode) 문자셋을 사용한다.

식별자 작성 방식

자바스크립트에서는 식별자를 작성할 때 다음과 같은 작성 방식을 사용할 수 있다.

  • Camel Case 방식
  • Underscore Case 방식

Camel Case 방식이란 식별자가 여러 단어로 이루어질 경우에 첫 번째 단어는 모두 소문자로 작성하고, 그다음 단어부터는 첫 문자만 대문자로 작성하는 방식이다.

Underscore Case 방식은 식별자를 이루는 단어들을 소문자로만 작성하고, 그 단어들은 언더스코어(_)로 연결하는 방식이다.

자바스크립트에서는 식별자를 작성할 때 관행적으로 Camel Case 방식을 많이 사용한다.

var firstVar = 10;              // Camel Case 방식
function my_first_func {        // Underscore Case 방식
	var firstLocalVar = 20;     // Camel Case 방식
}

 

※ 자바스크립트에서 하이픈(-)은 뺄셈을 위해 예약된 키워드이므로, 식별자를 작성할 때는 사용할 수 없다.

키워드(keyword)

자바스크립트에서는 몇몇 단어들을 특별한 용도로 사용하기 위해 미리 예약하고 있다.

이렇게 미리 예약된 단어들을 키워드(keyword)또는 예약어(reserved word)라고 한다.

이러한 키워드들은 프로그램 내에서 식별자로 사용할 수 없다.

var firstVar = 10;       // var는 변수의 정의를 위해 예약된 키워드이다.
function myFirstFunc {   // function은 함수의 정의를 위해 예약된 키워드이다.
	var secondVar = 20;  // var는 변수의 정의를 위해 예약된 키워드이다.
}

주석(comment)

주석(comment)이란 코드 내에 삽입된 일종의 설명문이다.

주석은 작성자나 다른 개발자가 나중에 코드를 수정할 때 참고할 수 있으며, 웹 페이지 개발 시 디버깅에도 사용된다.

이러한 주석은 자바스크립트 코드의 어느 부분에라도 작성할 수 있으며, 웹 브라우저의 동작에는 전혀 영향을 미치지 않는다. 자바스크립트 주석은 다음과 같은 두 가지 형식을 지원한다.

문법
1. 한 줄 주석 : // 주석문
2. 여러 줄 주석 : /* 주석문 */
var x = 10;
// var y = 20; 한 줄의 주석문 : 이 부분은 실행되지 않을 것이다.
/*
x = x + y;
여러 줄의 주석문 :
이 부분 또한 실행되지 않을 것이다.
*/
document.getElementById("text").innerHTML = x;

다음 예제는 자바스크립트에서 여러 줄 주석 안에 또 다른 주석을 삽입하는 예제다.

/* 여러 줄
    // 이렇게 두 줄 주석 안에 또 다른 한 줄 주석을 삽입할 수 있습니다.
주석입니다. */

위에 예제처럼 자바스크립트에서는 여러 줄 주석 내부에 또 다른 한 줄 주석을 삽입할 수 있다.

 

하지만 다음 예제처럼 여러 줄 주석 내부에 또 다른 여러 줄 주석을 삽입할 수는 없다.

/* 여러 줄
    /* 또 다른 여러 줄 주석입니다. */
주석입니다. */

위에 예제처럼 여러 줄 주석 안에 또 다른 여러 줄 주석을 삽입하게 되면, 삽입한 주석의 종료를 알려주는 기호(*/)를 첫 번째 주석이 자신의 종료를 알려주는 기호(*/)로 인식하게 된다.

따라서 위의 예제에서 세 번째 라인은 주석으로 정상 인식되지 않으며, Uncaught SyntaxError가 발생하여 실행중이던 스크립트는 중지될 것이다.

그러므로 자바스크립트에서 여러 줄 주석은 절대로 중첩해서 사용해서는 안된다.

'Language > JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트 적용  (0) 2022.06.30
[JavaScript] 자바스크립트 출력  (0) 2022.06.30
[JavaScript] 기타 연산자  (0) 2022.06.30
[JavaScript] 비트 연산자(bitwise operator)  (0) 2022.06.30
[JavaScript] 논리 연산자(logical operator)  (0) 2022.06.30
'Language/JavaScript' 카테고리의 다른 글
  • [JavaScript] 자바스크립트 적용
  • [JavaScript] 자바스크립트 출력
  • [JavaScript] 기타 연산자
  • [JavaScript] 비트 연산자(bitwise operator)
arajo
arajo
  • arajo
    아라 메모장
    arajo
  • 전체
    오늘
    어제
    • 분류 전체보기 (509)
      • Language (298)
        • HTML (55)
        • CSS (11)
        • JavaScript (70)
        • TypeScript (8)
        • Python (33)
        • Java (119)
        • C (0)
        • C# (2)
      • Programming (92)
        • Programming (14)
        • Web (51)
        • Apache (1)
        • MySQL (23)
        • AWS (3)
      • Framework | Library (26)
        • Framework | Library (3)
        • Vue.js (2)
        • React.js (5)
        • React Native (4)
        • Node.js (1)
        • Ajax (1)
        • Bootstrap (8)
        • Spring (1)
        • Flutter (1)
      • etc (2)
      • 휴식 (19)
        • 책 (13)
        • 일기 (5)
        • 게임 일기 (1)
      • A (71)
        • 공부 (18)
        • 기타 (6)
        • 일 (47)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    변수
    react
    TypeScript
    리액트
    event
    HTML
    CSS
    객체
    MySQL
    파이썬
    next.js
    제어문
    자바스크립트
    JavaScript
    object
    Java
    array
    Python
    타입스크립트
    web
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
arajo
[JavaScript] 자바스크립트 문법
상단으로

티스토리툴바