나무모에 미러 (일반/밝은 화면)
최근 수정 시각 : 2024-10-02 09:28:25

JavaScript/문법

파일:상위 문서 아이콘.svg   상위 문서: JavaScript
프로그래밍 언어 문법
{{{#!wiki style="margin: -16px -11px; word-break: keep-all"<colbgcolor=#0095c7><colcolor=#fff,#000> 언어 문법 C(포인터 · 구조체) · C++(자료형 · 클래스 · 이름공간 · 상수 표현식 · 특성) · C# · Java · Python · Kotlin · MATLAB · SQL · PHP · JavaScript · Haskell
마크업 문법 HTML · CSS
개념과 용어 함수 · 인라인 함수 · 고차 함수 · 람다식 · 리터럴 · size_t · 상속 · 예외 · 조건문 · 참조에 의한 호출 · eval
기타 == · === · deprecated · NaN · null · undefined · 모나드 · 배커스-나우르 표기법
프로그래밍 언어 예제 · 목록 · 분류 }}}


1. 개요2. 편집 지침3. 시작하기
3.1. HTML 문서 내에서 쓰이는 자바스크립트3.2. 문서 밖에서 쓰이는 자바스크립트
4. 변수 선언5. 함수6. 반복문
6.1. for 반복문6.2. while 반복문6.3. do-while 반복문
7. 논리연산자8. 관련 문서

1. 개요

이 문서는 프로그래밍 언어 JavaScript의 문법을 정리한 것이다.

2. 편집 지침

소스 코드로 예시를 들 때 아래와 같이 문법을 활용하여 소스코드를 써 주시기 바랍니다.
{{{#!syntax javascript (소스코드)}}}

아래는 예시코드입니다.
#!syntax javascript 
console.log("Hello, world!")

본 문서에서 쓰이는 문법의 대부분은 Javascript 라이브러리인 Node.js 문법이 아닌 브라우저에서 쓰이는 ECMAScript 최신버전을 기준으로 다룹니다. HTML와 관련된 문법을 다룰 수 있습니다.

3. 시작하기

3.1. HTML 문서 내에서 쓰이는 자바스크립트

HTML 문서 내에서 자바스크립트를 사용하고 싶다면 <script> 태그를 사용하자.
#!syntax html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>사이트</title>
</head>
<body>
    <input id="a" type="text" onkeydown="if(event.keyCode==13){sd()}">
    <button onclick="alert(a.value)">버튼</button>
    <script>
        function sd() {
            alert(a.value)
        }
    </script>
</body>
</html>
위 예제는 입력을 하고 버튼을 누르거나 엔터를 치면 alert창으로 입력한 메세지가 뜬다.

3.2. 문서 밖에서 쓰이는 자바스크립트

이번엔 위 문단의 예제에서 script 부분만 떼와서 파일을 분리해보자.function sd() {
alert(a.value)
}
}}}
참고로 자바스크립트는 파일 확장자로 *.js 또는 *.javascript를 사용한다.<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사이트</title>
</head>
<body>
<input id="a" type="text" onkeydown="if(event.keyCode==13){sd()}">
<button onclick="alert(a.value)">버튼</button>
<script src="script.js"></script>
</body>
</html>
}}}
몇 천, 몇 만줄 단위를 넘어가는 코드를 사용해야 하고, 코드가 여러 html 페이지에서 재사용된다면 외부 파일로 분리하는 방법이 좋다.

4. 변수 선언

변수 선언에는 여러가지 키워드(var, let, const)가 관여되는데, 기초적인 변수 선언 방법은 총 4가지 이다.
#!syntax javascript
a = 1; // 자동 선언
var a = 1; // var 키워드 사용
let a = 1; // let 키워드 사용
const a = 1; // const 키워드 사용
a = 1;
}}}var a = 1;
}}}let a = 1;
}}}var a = 1;
var a = 3; // 가능함

let b = 1;
let b = 3; // SyntaxError: Identifier 'b' has already been declared
}}}function myFunction() {
if (true) {
var a = 1;
console.log(a); // 1
}
console.log(a); // 1
}
console.log(a); // ReferenceError: a is not defined
}}}function myFunction() {
if (true) {
let a = 1;
console.log(a); // 1
}
console.log(a); // ReferenceError: a is not defined
}
console.log(a); // ReferenceError: a is not defined
}}}const a = 1;
}}}let a = 1;
a = 3; // 가능함

const a = 1;
a = 3; // TypeError: Assignment to constant variable.
}}}

5. 함수

function 함수이름(매개변수1, 매개변수2, ...) {
// <코드 내용>
}
}}}const 함수이름 = function(매개변수1, 매개변수2, ...) {
// <코드 내용>
}
}}}const 함수이름 = (매개변수1, 매개변수2, ...) => {
// <코드 내용>
}
}}}// a, b 매개변수를 더하는 함수
function sum(a, b) {
return a + b;
}

// sum 함수 호출
console.log("1 + 2 = ": sum(1, 2)) // 1 + 2 = 3
}}}

6. 반복문

비슷한 코드를 계속해서 써야할 때는 아래와 같이 쓸 수도 있다.
#!syntax javascript
const num = ["1", "2", "3", "4"];
let text = "";

text += num[0]
text += num[1]
text += num[2]
text += num[3]

console.log(text) // 1234

하지만 이걸 몇 천 번 반복해야 한다면 반복문을 쓰는게 더 상식적이다.
#!syntax javascript
const num = ["1", "2", "3", "4", ..., "999", "1000"]
let text = "";

for (let i = 0; i < num.length; i++) {
    text += num[i]
}

console.log(text) // 12345...1000

6.1. for 반복문

for (표현식1; 표현식2; 표현식3;) {
    <코드 내용>
}

이제 표현식을 차례대로 살펴보자.
for (let i = 0, length = num.length; i < length; i++) {
text += num[i];
}
}}}let i = 0;
let length = num.length;

// 표현식1 생략
for (; i < length; i++) {
text += num[i];
}
}}}for (let i = 0, length = num.length; i < length; i++) {
text += num[i];
}
}}}for (let i = 0, length = num.length; i < length; i++) {
text += num[i];
}
}}}

6.2. while 반복문

while 반복문은 아래와 같은 형식으로 작성한다.
while (실행조건) {
  <코드 내용>
}

while 반복문의 실행 조건 설명은 아래와 같다.
#!syntax javascript
let i = 0;
let array = [];
while (i < 5) {
    array.push(i);
    i++;
}
console.log(array) // [0, 1, 2, 3, 4]
위 예제는 반복문이 돌면서 그 반복 주기의 i를 array에 추가한다.

여기서 while문은 실행조건인 i < 5를 처음 시작할 때와 코드 내용이 끝나면 검사하고 참(true)이라면 계속 반복한다.
#!syntax javascript
while (true) {
    console.log("foo")
}

만약 실행조건이 계속 true라면 무한 반복도 또한 가능하다.

6.3. do-while 반복문

do {
  <코드 내용>
} while (실행조건)
위의 while 반복문과는 달리 처음에 do 안의 코드를 실행한 후 실행조건을 검사한다.

따라서 아래와 같은 코드도 가능하다.
#!syntax javascript
while (false) {
    console.log("hello")
} // hello가 뜨지 않는다.

do {
    console.log("hello")
} while (false) // hello가 실행된다.

while문에서는 처음 실행조건이 항상 false이므로 코드를 건너뛰게 된다.

하지만 do-while문에서는 실행조건이 항상 false더라도 do를 먼저 실행한 후 검사하기 때문에 한 번 실행된 후 반복문이 종료된다.

7. 논리연산자

아래와 같은 논리 연산자가 있다.

8. 관련 문서

분류