JavaScript/문법

상위 문서: JavaScript

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

1. 개요2. 편집 지침3. 시작하기

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

4. 자료형5. 변수 선언6. 함수7. 반복문

7.1. for 반복문7.2. while 반복문7.3. do-while 반복문

8. 논리연산자9. 관련 문서

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 부분만 떼와서 파일을 분리해보자.

외부 파일인 file.js
{{{#!syntax javascript

function sd() {

alert(a.value)

}
}}}
참고로 자바스크립트는 파일 확장자로 *.js 또는 *.javascript를 사용한다.

원본 파일인 index.html
{{{#!syntax html

<!DOCTYPE html>
<html lang="ko">
<head>

</head>
<body>

</body>
</html>
}}}
몇 천, 몇 만줄 단위를 넘어가는 코드를 사용해야 하고, 코드가 여러 html 페이지에서 재사용된다면 외부 파일로 분리하는 방법이 좋다.

4. 자료형

불리언(Boolean)
불리언은 논리 값으로 참과 거짓 즉, true 혹은 false 두 가지 값 중 하나를 가진다. 함수 선언시에 true 혹은 false를 직접 넣어서 선언할 수 있다.

불리언 값이 전달되어야 할 조건문에서 다른 자료형의 값이 전달될 경우, 불리언으로 자동으로 변환된다. 10 > 2, "True", "False", true 등은 true로 취급되고, 10 < 2, false 등은 false로 취급된다. 이외에도 여러 값이 false로 취급되나 자세한 것은 밑에서 다룬다.

숫자(Number)
숫자는 우리가 아는 그 숫자이다. 정수와 소수를 모두 저장할 수 있는 2의 -1074승부터 1024승까지의 숫자만 저장할 수 있다. 이 범위를 벗어나는 경우 -infinity 혹은 +infinity라는 값으로 대체된다. 참고로 NaN(Not-a-Number)도 숫자에 포함되며 NaN은 항상 자기자신과 같지 않다.

0, -0, 0.0, NaN은 불리언 값으로 변환될 경우 항상 false로 취급된다.

문자열(String)
문자열은 문자의 나열이다. 문자열을 선언할 때는 String(), "", '', `` 사이에 내용을 써서 선언한다. 내용이 없고 비어있는 값은 항상 false로 취급되며, 반대로 내용이 있으면 문자열에 어떤 내용이 있던간에 항상 true가 반환된다. 따라서 "0", "False"는 true이다.

문자열에 숫자만 집어넣을 수도 있는데 이때 42와 "42"는 같지 않으며 계산 시에 서로 다르게 작용한다는 것을 명심해야한다. 42+42는 84를 반환하지만, "42"+"42"는 4242를 반환한다.

* null
null은 선언된 적이 있는 변수가 있으나 그 변수가 아무런 값을 갖지 않음을 표현하는 자료형이다. 항상 false로 취급된다. 0이나 ""은 null이 아니다. typeof 를 통해 null의 자료형을 알아내려고 하면 object 즉 객체라고 알려준다.

5. 변수 선언

변수 선언에는 여러가지 키워드(var, let, const)가 관여되는데, 기초적인 변수 선언 방법은 총 4가지 이다.

#!syntax javascript
a = 1; // 자동 선언
var a = 1; // var 키워드 사용
let a = 1; // let 키워드 사용
const a = 1; // const 키워드 사용

자동 선언
{{{#!syntax javascript

a = 1;
}}}

자동 선언은 키워드를 사용하지 않고 선언하는 변수이다. 브라우저 콘솔창에서 간단한 선언 용도로 사용 가능하다.
var 선언
{{{#!syntax javascript

var a = 1;
}}}

var 선언은 var 키워드를 사용해 선언하는 변수이며, 전역 변수로 불린다. 여러 문제로 인해서 1999년부터 사용되었지만 2015년부터는 비권장으로 오래된 브라우저를 위한 레거시 문법으로써 남아있다.
let 선언
{{{#!syntax javascript

let a = 1;
}}}

let 선언은 var 키워드의 혼란한 범위 문제 등으로 2015년 ECMAScript 6에 신규 도입된 문법이다.
let과 var의 차이점
let과 var은 선언 및 재할당에서는 같지만, 차이점이 있다.
중복선언 차이
{{{#!syntax javascript

var a = 1;
var a = 3; // 가능함

let b = 1;
let b = 3; // SyntaxError: Identifier 'b' has already been declared
}}}

var는 키워드를 사용한 선언이 여러번 가능하지만 let은 SyntaxError(문법 오류)를 뿌려내면서 오류가 생긴다.
스코프(참조 범위)
var(함수 레벨 스코프)
{{{#!syntax javascript

function myFunction() {

if (true) {

var a = 1;
console.log(a); // 1

}
console.log(a); // 1

}

console.log(a); // ReferenceError: a is not defined
}}}

var에서는 myFunction 내에서 선언한 변수는 함수 안에서 유효하다. 그리고 함수 밖으로 나가면 ReferenceError가 나면서 선언되지 않았다고 뜨며 참조할 수 없다.
let(블록 레벨 스코프)
{{{#!syntax javascript

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
}}}

let에서는 while(){ ... }, if(){ ... }, function(){ ... } 등 코드 블록에서 선언한 변수는 블록 내에서만 유효하며, 함수 안이더라도 블록을 나가면 ReferenceError가 나면서 선언되지 않았다고 뜨며 참조할 수 없다.
const 선언
{{{#!syntax javascript

const a = 1;
}}}

const 선언은 let과 함께 2015년 ECMAScript 6에 신규 도입된 문법이다. let과는 다르게 재할당이 불가능하며, let과는 마찬가지로 중복선언이 불가하다.
{{{#!syntax javascript

let a = 1;
a = 3; // 가능함

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

let은 중복선언으로 값 업데이트가 가능하지만, const는 중복 선언 시 TypeError가 나면서 업데이트 되지 않는다.
그리고 명시적으로 변하지 않는 값이라는 것을 밝혀주어 용도를 명확히 할 수 있다.

6. 함수

함수의 선언
{{{#!syntax javascript

function 함수이름(매개변수1, 매개변수2, ...) {

// <코드 내용>

}
}}}

함수는 function 키워드 + 이름 + 소괄호 ( ) 순으로 선언되며, 소괄호 안에는 매개변수들이 쉼표로 구분되어 나열된다.
그리고 함수가 호출되었을 때 실행할 내용은 중괄호 { } 안에 위치한다.
여러가지 함수 선언
위의 방법 외에도 몇 가지 선언 방법이 더 있다.
익명 함수

첫번째는 익명 함수를 변수에 대입하는 방법이다.
{{{#!syntax javascript

const 함수이름 = function(매개변수1, 매개변수2, ...) {

// <코드 내용>

}
}}}

화살표 함수

두번째는 화살표 함수(arrow function)이다. 최근 많이 사용되고 있는 추세이다.
{{{#!syntax javascript

const 함수이름 = (매개변수1, 매개변수2, ...) => {

// <코드 내용>

}
}}}

함수의 호출

함수이름(인수1, 인수2, ...)
호출할 땐 함수 이름 + 소괄호 안 매개변수가 있는 자리에 인수값을 넣어 실행한다.

함수의 반환

return <반환값>
함수에서 값을 반환할 때는 return 키워드를 사용한다.
{{{#!syntax javascript

// a, b 매개변수를 더하는 함수
function sum(a, b) {

return a + b;

}

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

여기서는 sum 함수가 a와 b를 매개변수로 받고, a + b 값을 반환한다. 그리고 sum 함수가 호출될 때, sum(1, 2)에서 인수로 1과 2를 주었으므로 반환값은 1 + 2로 3이 된다.

7. 반복문

비슷한 코드를 계속해서 써야할 때는 아래와 같이 쓸 수도 있다.

#!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

7.1. for 반복문

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

표현식1은 인터프리터가 for문에 진입하면 단 한번만 실행된다.
표현식2는 코드 내용이 다시 반복될 지 여부 조건을 지정한다.
표현식3은 코드 내용이 끝난 이후에 실행된다.

이제 표현식을 차례대로 살펴보자.

표현식1

for (let i = 0, length = num.length; i < length; i++) {

text += num[i];

}
}}}

여기서 let i = 0, length = num.length 부분이 표현식1 부분이다.
표현식1 부분은 주로 for문 내에서 쓰일 변수를 선언하는 부분이며 처음 단 한번만 실행된다.
아래와 같이 생략 가능하다.
{{{#!syntax javascript

let i = 0;
let length = num.length;

// 표현식1 생략
for (; i < length; i++) {

text += num[i];

}
}}}

표현식2

for (let i = 0, length = num.length; i < length; i++) {

text += num[i];

}
}}}

여기서 i < length 부분이 표현식2 부분이다.
표현식2 부분은 for문 내의 코드 실행이 끝나면 바로 실행되며 이후 반복 여부를 결정한다.
표현식2를 계산한 결과값이 true면 반복하고 false면 for문을 끝낸다.
생략 가능하다.
표현식3
{{{#!syntax javascript

for (let i = 0, length = num.length; i < length; i++) {

text += num[i];

}
}}}

여기서 i++ 부분이 표현식3 부분이다.
표현식3 부분은 코드 실행이 끝나면 바로 실행되며, 주로 표현식1에서 선언된 변수를 늘리는 코드를 넣는다.
생략 가능하다.

7.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라면 무한 반복도 또한 가능하다.

7.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를 먼저 실행한 후 검사하기 때문에 한 번 실행된 후 반복문이 종료된다.

8. 논리연산자

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

&&: Logical AND
||: Logical OR
!: not
==: equal

JavaScript/문법

1. 개요

2. 편집 지침

3. 시작하기

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

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

4. 자료형

5. 변수 선언

6. 함수

7. 반복문

7.1. for 반복문

7.2. while 반복문

7.3. do-while 반복문

8. 논리연산자

9. 관련 문서

분류