[include(틀:상위 문서, top1=JavaScript)] [include(틀:프로그래밍 언어 문법)] [목차] == 개요 == [[프로그래밍 언어]] [[Javascript]]의 문법을 정리한 문서이다. == 편집 지침 == 소스 코드로 예시를 들 때 || {{{{{{#!syntax javascript (소스코드)}}}}}} || 문법을 활용하여 소스코드를 써 주시기 바랍니다. 예시: {{{#!syntax javascript function myFunction(message) { alert("메시지: " + message) } myFunction("Hello World") }}} 본 문서에서 쓰이는 문법의 대부분은 Javascript 라이브러리인 [[Node.js]] 문법이 아닌 브라우저에서 쓰이는 [[ECMAScript]] 최신버전을 기준으로 다룹니다. [[https://www.w3schools.com/jsref/dom_obj_document.asp|HTML와 관련된 문법]]을 다룰 수 있습니다. == 시작하기 == === HTML 문서 내에서 쓰이는 자바스크립트 === HTML 문서 내에서 자바스크립트를 사용하고 싶다면

제목

}}} 위 예제는 "제목 바꾸기" 버튼이 클릭되면

제목

}}} 몇 천, 몇 만줄 단위를 넘어가는 코드를 사용해야 하고, 코드가 여러 html 페이지에서 재사용된다면 외부 파일로 분리하는 방법이 좋다. == 기초 == === 변수 선언 === 변수 선언에는 여러가지 키워드(var, let, const)가 관여되는데, 기초적인 변수 선언 방법은 총 4가지 이다. {{{#!syntax javascript a = 1; // 자동 선언 var a = 1; // var 키워드 사용 let a = 1; // let 키워드 사용 const a = 1; // const 키워드 사용 }}} ---- {{{+2 '''자동 선언'''}}} || {{{a = 1;}}} || 자동 선언은 키워드를 사용하지 않고 선언하는 변수이다. 브라우저 콘솔창에서 간단한 선언 용도로 사용 가능하다. ---- {{{+2 '''var 선언'''}}} || {{{var a = 1;}}} || var 선언은 var 키워드를 사용해 선언하는 변수이며, 전역 변수로 불린다. 여러 문제로 인해서 1999년부터 사용되었지만 2015년부터는 비권장으로 오래된 브라우저를 위한 레거시 문법으로써 남아있다. ---- {{{+2 '''let 선언'''}}} || {{{let a = 1;}}} || let 선언은 var 키워드의 혼란한 범위 문제 등으로 2015년 ECMAScript 6에 신규 도입된 문법이다. {{{+1 '''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가 나면서 선언되지 않았다고 뜨며 참조할 수 없다. ---- {{{+2 '''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가 나면서 업데이트 되지 않는다. 그리고 명시적으로 변하지 않는 값이라는 것을 밝혀주어 용도를 명확히 할 수 있다. == 함수 == {{{+2 '''함수의 선언'''}}} {{{#!syntax javascript function 함수이름(매개변수1, 매개변수2, ...) { // <코드 내용> } }}} 함수는 function 키워드 + 이름 + 소괄호{{{ ( ) }}} 순으로 선언되며, 소괄호 안에는 매개변수들이 따옴표로 구분되어 나열된다. 그리고 함수가 호출되었을 때 실행할 내용은 중괄호{{{ { } }}} 안에 위치한다. {{{+1 '''여러가지 함수 선언'''}}} 위의 방법 외에도 몇 가지 선언 방법이 더 있다. '''1. 익명 함수''' 첫번째는 익명 함수를 변수에 대입하는 방법이다. {{{#!syntax javascript const 함수이름 = function(매개변수1, 매개변수2, ...) { // <코드 내용> } }}} '''2. 화살표 함수''' 두번째는 화살표 함수(arrow function)이다. 최근 많이 사용되고 있는 추세이다. {{{#!syntax javascript const 함수이름 = (매개변수1, 매개변수2, ...) => { // <코드 내용> } }}} ---- {{{+2 '''함수의 호출'''}}} || {{{함수이름(인수1, 인수2, ...)}}} || 호출할 땐 함수 이름 + 소괄호 안 매개변수가 있는 자리에 인수값을 넣어 실행한다. ---- {{{+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이 된다. == 반복문 == 비슷한 코드를 계속해서 써야할 때는 아래와 같이 쓸 수도 있다. {{{#!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 }}} === for 반복문 === {{{for (표현식1; 표현식2; 표현식3;) { <코드 내용> } }}} * '''표현식1'''은 인터프리터가 for문에 진입하면 단 한번만 실행된다. * '''표현식2'''는 코드 내용이 다시 반복될 지 여부 조건을 지정한다. * '''표현식3'''은 코드 내용이 끝난 이후에 실행된다. 이제 표현식을 차례대로 살펴보자. ---- {{{+2 '''표현식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 '''표현식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문을 끝낸다. 생략 가능하다. ---- {{{+2 '''표현식3'''}}} {{{#!syntax javascript for (let i = 0, length = num.length; i < length; i++) { text += num[i]; } }}} 여기서 {{{i++}}} 부분이 표현식3 부분이다. 표현식3 부분은 코드 실행이 끝나면 바로 실행되며, 주로 표현식1에서 선언된 변수를 늘리는 코드를 넣는다. 생략 가능하다. === while 반복문 === {{{while (실행조건) { <코드 내용> } }}} ---- {{{+2 '''실행조건'''}}} {{{#!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라면 무한 반복도 또한 가능하다. === 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를 먼저 실행한 후 검사하기 때문에 한 번 실행된 후 반복문이 종료된다. == 기타 == == 관련 문서 == [[분류:프로그래밍 언어 문법]]