JavaScript/문법
덤프버전 :
상위 문서: JavaScript 1. 개요[편집]
프로그래밍 언어 Javascript의 문법을 정리한 문서이다.
2. 편집 지침[편집]
소스 코드로 예시를 들 때
문법을 활용하여 소스코드를 써 주시기 바랍니다.
예시:
function myFunction(message) {
alert("메시지: " + message)
}
myFunction("Hello World")
본 문서에서 쓰이는 문법의 대부분은 Javascript 라이브러리인 Node.js 문법이 아닌 브라우저에서 쓰이는 ECMAScript 최신버전을 기준으로 다룹니다. HTML와 관련된 문법을 다룰 수 있습니다.
3. 시작하기[편집]
3.1. HTML 문서 내에서 쓰이는 자바스크립트[편집]
HTML 문서 내에서 자바스크립트를 사용하고 싶다면 <script> 태그를 사용하자.
<예시>
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function changeTitle() {
document.getElementById("title").innerText = "제목이 바뀌었어요!"
}
</script>
</head>
<body>
<h1 id="title">제목</h1>
<button type="button" onclick="changeTitle()">제목 바꾸기</button>
</body>
</html>
위 예제는 "제목 바꾸기" 버튼이 클릭되면 <script> 태그 내에 있는 changeTitle 함수가 호출되어 id가 title인 태그의 텍스트를 바꾼다.
3.2. 문서 밖에서 쓰이는 자바스크립트[편집]
이번엔 위 문단의 예제에서 script 부분만 때와서 파일을 분리해보자.
외부 파일인 file.js
function changeTitle() {
document.getElementById("title").innerText = "제목이 바뀌었어요!"
}
참고로 자바스크립트는 파일 확장자로
*.js*.javascript원본 파일인 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 파일 분리됨 -->
<script src="file.js"></script>
</head>
<body>
<h1 id="title">제목</h1>
<button type="button" onclick="changeTitle()">제목 바꾸기</button>
</body>
</html>
몇 천, 몇 만줄 단위를 넘어가는 코드를 사용해야 하고, 코드가 여러 html 페이지에서 재사용된다면 외부 파일로 분리하는 방법이 좋다.
4. 기초[편집]
4.1. 변수 선언[편집]
변수 선언에는 여러가지 키워드(var, let, const)가 관여되는데, 기초적인 변수 선언 방법은 총 4가지 이다.
a = 1; // 자동 선언
var a = 1; // var 키워드 사용
let a = 1; // let 키워드 사용
const a = 1; // const 키워드 사용
자동 선언
자동 선언은 키워드를 사용하지 않고 선언하는 변수이다. 브라우저 콘솔창에서 간단한 선언 용도로 사용 가능하다.
var 선언
var 선언은 var 키워드를 사용해 선언하는 변수이며, 전역 변수로 불린다. 여러 문제로 인해서 1999년부터 사용되었지만 2015년부터는 비권장으로 오래된 브라우저를 위한 레거시 문법으로써 남아있다.
let 선언
let 선언은 var 키워드의 혼란한 범위 문제 등으로 2015년 ECMAScript 6에 신규 도입된 문법이다.
let과 var의 차이점
let과 var은 선언 및 재할당에서는 같지만, 차이점이 있다.
1. 중복선언 차이
var a = 1;
var a = 3; // 가능함
let b = 1;
let b = 3; // SyntaxError: Identifier 'b' has already been declared
var는 키워드를 사용한 선언이 여러번 가능하지만 let은 SyntaxError(문법 오류)를 뿌려내면서 오류가 생긴다.
2. 스코프(참조 범위)
var(함수 레벨 스코프)
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(블록 레벨 스코프)
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(){ ...const 선언
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 키워드 + 이름 + 소괄호
( )그리고 함수가 호출되었을 때 실행할 내용은 중괄호
{ }여러가지 함수 선언
위의 방법 외에도 몇 가지 선언 방법이 더 있다.
1. 익명 함수
첫번째는 익명 함수를 변수에 대입하는 방법이다.
const 함수이름 = function(매개변수1, 매개변수2, ...) {
// <코드 내용>
} 2. 화살표 함수
두번째는 화살표 함수(arrow function)이다. 최근 많이 사용되고 있는 추세이다.
const 함수이름 = (매개변수1, 매개변수2, ...) => {
// <코드 내용>
} 함수의 호출
호출할 땐 함수 이름 + 소괄호 안 매개변수가 있는 자리에 인수값을 넣어 실행한다.
함수의 반환
함수에서 값을 반환할 때는 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)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 부분은 주로 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 부분은 for문 내의 코드 실행이 끝나면 바로 실행되며 이후 반복 여부를 결정한다.
표현식2를 계산한 결과값이 true면 반복하고 false면 for문을 끝낸다.
생략 가능하다.
표현식3
for (let i = 0, length = num.length; i < length; i++) {
text += num[i];
}
여기서
i++표현식3 부분은 코드 실행이 끝나면 바로 실행되며, 주로 표현식1에서 선언된 변수를 늘리는 코드를 넣는다.
생략 가능하다.
6.2. 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 < 5while (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. 기타[편집]
8. 관련 문서[편집]
이 문서의 내용 중 전체 또는 일부는 2023-10-27 02:06:50에 나무위키 JavaScript/문법 문서에서 가져왔습니다.