IT 강좌 JavaScript 기초 036_문법 구조

구문

JavaScript 구문(Statements)은 특정 작업을 실행하는 명령 집합입니다.

예제:

1
// 변수 선언
2
let userName = '지훈';
3
let age = 18;
4

5
// 조건문
6
if (age >= 18) {
7
  console.log(userName + '은 성인입니다');
8
} else {
9
  console.log(userName + '은 미성년자입니다');
10
}
11

12
// 반복문
13
for (let i = 0; i < 5; i++) {
14
  console.log('반복 출력 ' + (i + 1));
15
}
16

17
// 함수 정의
18
function Hello(name) {
19
  return '안녕하세요, ' + name + '!';
20
}
21

22
// 함수 호출
23
let sayHello = Hello(userName);
24
console.log(sayHello);

세미콜론

JavaScript에서 세미콜론(;)은 문장 종결 기호로, 문장의 끝을 표시하는 데 사용됩니다. 세미콜론은 대부분의 경우 선택 사항입니다. JavaScript 인터프리터가 자동으로 세미콜론을 삽입(Automatic Semicolon Insertion, ASI)하여 코드가 문법적으로 올바르게 해석되도록 하기 때문입니다. 그러나 일부 상황에서 ASI는 예상과 다른 동작을 일으킬 수 있으므로, JavaScript 코드를 작성할 때 명시적으로 세미콜론을 추가하는 것이 권장됩니다.

세미콜론이 나타나면 한 줄이든 여러 줄이든 해당 문장이 종료됩니다.

예제:

1
alert('Hello');alert('JavaScript!');

줄 바꿈(line break)이 있는 경우, 대부분의 상황에서 세미콜론을 생략할 수 있습니다.

예제:

1
alert('Hello')
2
alert('JavaScript!')

1
alert('Hello');
2
alert('JavaScript!')

1
alert('Hello')
2
alert('JavaScript!');

1
alert('Hello');alert('JavaScript!')

문 블록이나 코드 블록을 만날 때는 줄 바꿈이 자동으로 세미콜론을 추가하지 않습니다. 또한 공백과 줄 바꿈은 무시됩니다.

예제:

1
alert
2
(
3
1+
4
   2
5
   +1);

주석

JavaScript에서 주석은 코드에 설명과 메모를 추가하는 데 사용되는 텍스트로, 프로그램 실행에는 실제로 영향을 미치지 않습니다. 주석은 코드 가독성, 협업 및 디버깅을 향상시키는 데 매우 유용합니다.

한 줄 주석

// 기호를 사용하여 한 줄 주석을 생성할 수 있습니다. //부터 해당 줄 끝까지의 모든 텍스트는 주석으로 간주됩니다.

예제:

1
alert('Hello JavaScript!'); // 문장 뒤에 오는 한 줄 주석
2
// 한 줄을 차지하는 한 줄 주석

여러 줄 주석

/*로 시작하고 */로 끝나는 구문을 사용하여 여러 줄 주석을 생성할 수 있습니다. 이 두 기호 사이의 모든 텍스트는 주석으로 간주됩니다.

1
/*
2
  이것은 여러 줄 주석입니다
3
  여러 줄에 걸쳐 작성할 수 있습니다
4
*/
5
alert('Hello');
6
/*
7
여러 줄 주석은 코드 블록을 주석 처리하는 데도 사용할 수 있습니다. 아래 코드는 실행되지 않습니다
8
alert('JavaScript!');
9
*/

대화 상자

JavaScript는 사용자와 간단한 상호 작용을 위한 여러 대화 상자를 제공합니다. 여기에는 alert, confirm 및 prompt가 포함됩니다. 이러한 대화 상자를 사용하면 사용자에게 정보를 표시하거나, 질문을 하거나, 입력을 받을 수 있습니다. 대화 상자가 표시되면 사용자가 대화 상자를 닫을 때까지 코드 실행이 일시 중지됩니다.

alert 대화 상자

alert 대화 상자는 사용자에게 메시지를 표시하고 사용자가 “확인” 버튼을 클릭할 때까지 기다립니다.

예제:

1
alert('Hello 내부 JavaScript!');

효과:

confirm 대화 상자

confirm 대화 상자는 확인 및 취소 버튼이 있는 대화 상자를 사용자에게 표시하며, 일반적으로 사용자에게 특정 작업을 수행할지 여부를 묻는 데 사용됩니다.

예제:

1
    let yesNo = confirm("JavaScript를 공부하고 있나요?");
2
    alert(yesNo);

효과:

prompt 대화 상자

prompt 대화 상자는 입력 필드가 있는 대화 상자를 사용자에게 표시하며, 일반적으로 사용자의 입력을 받는 데 사용됩니다.

예제:

1
    let name = prompt("이름을 입력하세요:", '');
2
    alert(name);

효과:

개발자 도구

JavaScript 개발자 도구는 개발자가 JavaScript 코드를 디버그하고 분석하며 최적화하는 데 도움이 되는 브라우저 내장 도구 모음입니다. 브라우저마다 다른 개발자 도구를 제공하며, 다음은 일반적인 브라우저의 JavaScript 개발자 도구입니다.

Chrome 개발자 도구

Chrome 브라우저를 열고 Ctrl + Shift + I(Windows/Linux) 또는 Cmd + Option + I(Mac)를 눌러 Chrome 개발자 도구를 열 수 있습니다.

브라우저에서 마우스 오른쪽 버튼을 클릭하고 팝업 메뉴에서 “검사”를 선택하면 Chrome 개발자 도구를 열 수 있습니다.

그림:

브라우저의 “설정 및 기타” 아이콘을 클릭하고 “추가 도구”—“개발자 도구”를 선택하면 Chrome 개발자 도구를 열 수 있습니다.

그림:

주요 기능 및 패널:

• Console(콘솔): JavaScript 코드를 실행하고 디버그하며, 출력, 오류 및 경고 정보를 확인합니다.
• Sources(소스): 코드 편집기, 중단점 설정, 표현식 감시 등의 기능을 제공하여 JavaScript 소스 코드를 디버그합니다.
• Network(네트워크): 페이지에서 시작된 네트워크 요청을 확인하고 요청 및 응답의 세부 정보를 검사합니다.
• Performance(성능): 페이지 성능을 분석하고 로드 시간, CPU 사용량 등을 확인합니다.
• Application(애플리케이션): 로컬 스토리지, Session Storage, 쿠키 등을 확인하고 디버그합니다.
• Elements(요소): DOM 트리를 보고 편집하며 CSS 스타일을 수정합니다.

키워드

JavaScript 키워드는 JavaScript 프로그래밍 언어에서 특별한 용도를 가진 예약어로, 변수, 함수, 문 등을 식별하는 데 사용됩니다. 이러한 키워드는 식별자(예: 변수명, 함수명 등)로 사용할 수 없습니다.

다음은 일부 JavaScript 키워드입니다.

1. 기본 키워드:

• break
• case
• catch
• continue
• debugger
• default
• delete
• do
• else
• false
• finally
• for
• function
• if
• in
• instanceof
• new
• null
• return
• switch
• this
• throw
• true
• try
• typeof
• undefined
• var
• void
• while
• with

2. 예약 키워드(엄격 모드에서 특별한 용도):

• implements
• interface
• package
• private
• protected
• public
• static
• yield

3. ECMAScript 6(ES6)에서 도입된 키워드:

• class
• const
• export
• extends
• import
• super