| 프로그래밍 언어 문법 | ||
| {{{#!wiki style="margin: -16px -11px; word-break: keep-all" | <colbgcolor=#0095c7><colcolor=#fff,#000> 언어 문법 | C( 포인터) · C++( 자료형 · 특성 · 클래스 · 이름공간 · 상수 표현식) · C# · Java · Python · Kotlin · MATLAB · SQL · PHP · JavaScript |
| 마크업 문법 | HTML · CSS | |
| 개념과 용어 | 함수 · 인라인 함수 · 고차 함수 · 람다식 · 리터럴 · size_t · 상속 · 예외 · 조건문 · 참조에 의한 호출 · eval | |
| 기타 | == · === · NaN · null · undefined · 모나드 · 배커스-나우르 표기법 | |
| 프로그래밍 언어 예제 · 목록 · 분류 | }}} | |
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>
<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. 기초
4.1. 변수 선언
변수 선언에는 여러가지 키워드(var, let, const)가 관여되는데, 기초적인 변수 선언 방법은 총 4가지 이다.#!syntax javascript
a = 1; // 자동 선언
var a = 1; // var 키워드 사용
let a = 1; // let 키워드 사용
const a = 1; // const 키워드 사용
자동 선언
a = 1;
|
자동 선언은 키워드를 사용하지 않고 선언하는 변수이다. 브라우저 콘솔창에서 간단한 선언 용도로 사용 가능하다.
var 선언
var a = 1;
|
var 선언은 var 키워드를 사용해 선언하는 변수이며, 전역 변수로 불린다. 여러 문제로 인해서 1999년부터 사용되었지만 2015년부터는 비권장으로 오래된 브라우저를 위한 레거시 문법으로써 남아있다.
let 선언
let a = 1;
|
let 선언은 var 키워드의 혼란한 범위 문제 등으로 2015년 ECMAScript 6에 신규 도입된 문법이다.
let과 var의 차이점
let과 var은 선언 및 재할당에서는 같지만, 차이점이 있다.
1. 중복선언 차이
#!syntax javascript
var a = 1;
var a = 3; // 가능함
let b = 1;
let b = 3; // SyntaxError: Identifier 'b' has already been declared
var는 키워드를 사용한 선언이 여러번 가능하지만 let은 SyntaxError(문법 오류)를 뿌려내면서 오류가 생긴다.
2. 스코프(참조 범위)
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 선언
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가 나면서 업데이트 되지 않는다.
그리고 명시적으로 변하지 않는 값이라는 것을 밝혀주어 용도를 명확히 할 수 있다.
5. 함수
함수의 선언#!syntax javascript
function 함수이름(매개변수1, 매개변수2, ...) {
// <코드 내용>
} 함수는 function 키워드 + 이름 + 소괄호
( ) 순으로 선언되며, 소괄호 안에는 매개변수들이 쉼표로 구분되어 나열된다.그리고 함수가 호출되었을 때 실행할 내용은 중괄호
{ } 안에 위치한다.여러가지 함수 선언
위의 방법 외에도 몇 가지 선언 방법이 더 있다.
1. 익명 함수
첫번째는 익명 함수를 변수에 대입하는 방법이다.
#!syntax javascript
const 함수이름 = function(매개변수1, 매개변수2, ...) {
// <코드 내용>
} 2. 화살표 함수
두번째는 화살표 함수(arrow function)이다. 최근 많이 사용되고 있는 추세이다.
#!syntax javascript
const 함수이름 = (매개변수1, 매개변수2, ...) => {
// <코드 내용>
} 함수의 호출
함수이름(인수1, 인수2, ...)
|
호출할 땐 함수 이름 + 소괄호 안 매개변수가 있는 자리에 인수값을 넣어 실행한다.
함수의 반환
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이 된다.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;) {
<코드 내용>
} - 표현식1은 인터프리터가 for문에 진입하면 단 한번만 실행된다.
- 표현식2는 코드 내용이 다시 반복될 지 여부 조건을 지정한다.
- 표현식3은 코드 내용이 끝난 이후에 실행된다.
이제 표현식을 차례대로 살펴보자.
표현식1
#!syntax javascript
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
#!syntax javascript
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에서 선언된 변수를 늘리는 코드를 넣는다.
생략 가능하다.
6.2. 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를 먼저 실행한 후 검사하기 때문에 한 번 실행된 후 반복문이 종료된다.