TOOL

JavaScript/문법

(♥ 0)

분류

파일:상위 문서 아이콘.svg   상위 문서: JavaScript

프로그래밍 언어 문법
언어 문법C(포인터) · C++(자료형 · 클래스 · 이름공간 · 상수 표현식 · 특성) · C# · Java · Python · Kotlin · MATLAB · SQL · PHP · JavaScript
마크업 문법HTML · CSS
개념과 용어함수 · 인라인 함수 · 고차 함수 · 람다식 · 리터럴 · size_t · 상속 · 예외 · 조건문 · 참조에 의한 호출 · eval
기타== · === · 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 (소스코드)}}}

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

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

3. 시작하기[편집]


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

HTML 문서 내에서 자바스크립트를 사용하고 싶다면 <script> 태그를 사용하자.
<!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
function sd() {
alert(a.value)
}
참고로 자바스크립트는 파일 확장자로 *.js 또는 *.javascript를 사용한다.
  • 원본 파일인 index.html
<!DOCTYPE html>
<html lang="ko">
<head>


사이트
</head>
<body>



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

4. 변수 선언[편집]

변수 선언에는 여러가지 키워드(var, let, const)가 관여되는데, 기초적인 변수 선언 방법은 총 4가지 이다.
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은 선언 및 재할당에서는 같지만, 차이점이 있다.
  • 중복선언 차이

var a = 1;
var a = 3; // 가능함
let b = 1;
let b = 3; // SyntaxError: Identifier 'b' has already been declared
  • var는 키워드를 사용한 선언이 여러번 가능하지만 let은 SyntaxError(문법 오류)를 뿌려내면서 오류가 생긴다.
  • 스코프(참조 범위)
  • var(함수 레벨 스코프)
function myFunction() {
var a = 1;
console.log(a); // 1
if (true) {

}
console.log(a); // 1
}
   
console.log(a); // ReferenceError: a is not defined
  • var에서는 myFunction 내에서 선언한 변수는 함수 안에서 유효하다. 그리고 함수 밖으로 나가면 ReferenceError가 나면서 선언되지 않았다고 뜨며 참조할 수 없다.
  • let(블록 레벨 스코프)
function myFunction() {
let a = 1;
console.log(a); // 1
if (true) {

}
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과는 마찬가지로 중복선언이 불가하다.

let a = 1;
a = 3; // 가능함
const a = 1;
a = 3; // TypeError: Assignment to constant variable.
  • let은 중복선언으로 값 업데이트가 가능하지만, const는 중복 선언 시 TypeError가 나면서 업데이트 되지 않는다.
  • 그리고 명시적으로 변하지 않는 값이라는 것을 밝혀주어 용도를 명확히 할 수 있다.

5. 함수[편집]

  • 함수의 선언
function 함수이름(매개변수1, 매개변수2, ...) {
// <코드 내용>
}
  • 함수는 function 키워드 + 이름 + 소괄호( ) 순으로 선언되며, 소괄호 안에는 매개변수들이 쉼표로 구분되어 나열된다.
  • 그리고 함수가 호출되었을 때 실행할 내용은 중괄호{ } 안에 위치한다.
  • 여러가지 함수 선언
  • 위의 방법 외에도 몇 가지 선언 방법이 더 있다.
  • 익명 함수
    • 첫번째는 익명 함수를 변수에 대입하는 방법이다.
const 함수이름 = function(매개변수1, 매개변수2, ...) {
// <코드 내용>
}
  • 화살표 함수
    • 두번째는 화살표 함수(arrow function)이다. 최근 많이 사용되고 있는 추세이다.
const 함수이름 = (매개변수1, 매개변수2, ...) => {
// <코드 내용>
}
  • 함수의 호출
    • 함수이름(인수1, 인수2, ...)
    • 호출할 땐 함수 이름 + 소괄호 안 매개변수가 있는 자리에 인수값을 넣어 실행한다.
  • 함수의 반환
    • return <반환값>
    • 함수에서 값을 반환할 때는 return 키워드를 사용한다.

// 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. 반복문[편집]

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

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

console.log(text) // 1234

하지만 이걸 몇 천 번 반복해야 한다면 반복문을 쓰는게 더 상식적이다.
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
for (let i = 0, length = num.length; i < length; i++) {
text += num[i];
}
  • 여기서 let i = 0, length = num.length 부분이 표현식1 부분이다.
  • 표현식1 부분은 주로 for문 내에서 쓰일 변수를 선언하는 부분이며 처음 단 한번만 실행된다.
  • 아래와 같이 생략 가능하다.

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
for (let i = 0, length = num.length; i < length; i++) {
text += num[i];
}
  • 여기서 i++ 부분이 표현식3 부분이다.
  • 표현식3 부분은 코드 실행이 끝나면 바로 실행되며, 주로 표현식1에서 선언된 변수를 늘리는 코드를 넣는다.
  • 생략 가능하다.

6.2. while 반복문[편집]

while 반복문은 아래와 같은 형식으로 작성한다.
while (실행조건) { <코드 내용> }
while 반복문의 실행 조건 설명은 아래와 같다.
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)이라면 계속 반복한다.
while (true) {
    console.log("foo")
}

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

6.3. do-while 반복문[편집]

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

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

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

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

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

7. 논리연산자[편집]

아래와 같은 논리 연산자가 있다.
  • &&: Logical AND
  • ||: Logical OR
  • !: not
  • ==: equal

8. 관련 문서[편집]


파일:CC-white.svg 이 문서의 내용 중 전체 또는 일부는 2024-10-07 03:49:34에 나무위키 JavaScript/문법 문서에서 가져왔습니다.


관련 문서