JavaScript 기본 문법: 기본 구성 요소 및 연산자

ECMAScript는 웹 브라우저에서 클라이언트 측 스크립팅을 위한 표준 언어 사양입니다.

HTML과의 통합 방식

내부 스크립트: <script> 태그 내부에 JavaScript 코드를 직접 작성합니다.
외부 스크립트: <script> 태그의 src 속성을 사용하여 외부 `.js` 파일을 참조합니다.

참고:

<script> 태그는 HTML 문서의 어느 위치에든 배치할 수 있지만, 배치 위치에 따라 코드 실행 순서가 달라집니다.
여러 개의 <script> 태그를 사용할 수 있습니다.

예제 (외부 스크립트 및 내부 스크립트):


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>스크립트 통합</title>
    <!-- 내부 스크립트: 페이지 로딩을 차단함 -->
    <script>
        alert("내부 스크립트 실행!");
    </script>
    <!-- 외부 스크립트: src 속성으로 파일 연결 -->
    <script src="scripts/external.js"></script>
</head>
<body>
    <input type="text">
</body>
</html>

external.js 파일 내용:


alert("외부 스크립트 실행!");

주석

한 줄 주석: // 주석 내용
여러 줄 주석: /* 주석 내용 */

데이터 타입

1. 기본 데이터 타입 (원시 타입)

number: 정수, 소수, NaN (Not a Number) 포함.
string: 텍스트 데이터. "문자열", '문자열'.
boolean: true 또는 false.
null: 값이 의도적으로 비어 있음을 나타내는 값.
undefined: 변수가 선언되었지만 값이 할당되지 않은 경우.

2. 참조 데이터 타입

객체 (Object)

변수

변수는 데이터를 저장하기 위한 메모리 공간입니다.

JavaScript는 동적 타입 언어(약한 타입)로, 변수 선언 시 타입을 지정하지 않아도 되며 어떤 타입의 데이터든 저장할 수 있습니다.

선언 구문:


var variableName = initialValue;

`typeof` 연산자:

변수의 데이터 타입을 확인합니다.

참고: typeof null은 "object"를 반환합니다. 이는 JavaScript 초기의 설계 오류이며, 현재는 `null`이 객체의 빈 상태를 나타내는 값으로 간주되어 발생한 현상입니다.

예제 (변수 및 타입 확인):


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>변수와 타입</title>
    <script>
        // 숫자 타입
        var integerNum = 10;
        var floatNum = 3.14;
        var nanValue = NaN;
        document.write(`숫자: ${integerNum}, 타입: ${typeof integerNum}<br>`);
        document.write(`실수: ${floatNum}, 타입: ${typeof floatNum}<br>`);
        document.write(`NaN: ${nanValue}, 타입: ${typeof nanValue}<br>`);

        // 문자열 타입
        var str1 = "안녕하세요";
        var str2 = 'J';
        var str3 = "JS";
        document.write(`문자열1: ${str1}, 타입: ${typeof str1}<br>`);
        document.write(`문자열2: ${str2}, 타입: ${typeof str2}<br>`);
        document.write(`문자열3: ${str3}, 타입: ${typeof str3}<br>`);

        // 불리언 타입
        var isTrue = true;
        var isFalse = false;
        document.write(`불리언1: ${isTrue}, 타입: ${typeof isTrue}<br>`);
        document.write(`불리언2: ${isFalse}, 타입: ${typeof isFalse}<br>`);

        // null 및 undefined
        var emptyObj = null;
        var undefinedVar; // 초기화되지 않음
        document.write(`null: ${emptyObj}, 타입: ${typeof emptyObj}<br>`);
        document.write(`undefined: ${undefinedVar}, 타입: ${typeof undefinedVar}<br>`);
    </script>
</head>
<body></body>
</html>

연산자

1. 단항 연산자

++, -- (증감 연산자):
- 전위형(++var): 값을 증가/감소시킨 후 연산 수행.
- 후위형(var++): 연산 수행 후 값을 증가/감소.
+, - (부호 연산자): 숫자의 양수/음수 부호를 나타냅니다.

주의: JavaScript는 연산 시 필요한 타입으로 자동 형 변환을 수행합니다.

다른 타입을 숫자로 변환:
- 문자열: 숫자 리터럴로 변환 가능하면 해당 숫자로, 불가능하면 NaN으로 변환.
- 불리언: true는 1로, false는 0으로 변환.

예제 (단항 연산자):


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>단항 연산자</title>
    <script>
        var count = 5;
        var result1 = count++; // result1 = 5, count = 6
        document.write(`후위 증가: count=${count}, result1=${result1}<br>`);

        var count2 = 5;
        var result2 = ++count2; // result2 = 6, count2 = 6
        document.write(`전위 증가: count2=${count2}, result2=${result2}<br>`);

        var positiveNum = +10;
        var negativeNum = -5;
        document.write(`양수: ${positiveNum}, 타입: ${typeof positiveNum}<br>`);
        document.write(`음수: ${negativeNum}, 타입: ${typeof negativeNum}<br>`);

        var stringToNum1 = +"123"; // 문자열 "123"을 숫자 123으로 변환
        document.write(`문자열 변환1: ${stringToNum1}, 타입: ${typeof stringToNum1}<br>`);

        var stringToNum2 = +"abc"; // 숫자로 변환 불가능 -> NaN
        document.write(`문자열 변환2: ${stringToNum2}, 타입: ${typeof stringToNum2}<br>`);

        var booleanToNum1 = +true; // true를 숫자 1로 변환
        document.write(`불리언 변환1: ${booleanToNum1}, 타입: ${typeof booleanToNum1}<br>`);

        var booleanToNum2 = +false; // false를 숫자 0으로 변환
        document.write(`불리언 변환2: ${booleanToNum2}, 타입: ${typeof booleanToNum2}<br>`);
    </script>
</head>
<body></body>
</html>

2. 산술 연산자

+, -, *, /, % (나머지 연산자) 등

예제 (산술 연산자):


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>산술 연산자</title>
    <script>
        var numA = 10;
        var numB = 4;
        document.write(`덧셈: ${numA + numB}<br>`); // 14
        document.write(`뺄셈: ${numA - numB}<br>`); // 6
        document.write(`곱셈: ${numA * numB}<br>`); // 40
        document.write(`나눗셈: ${numA / numB}<br>`); // 2.5
        document.write(`나머지: ${numA % numB}<br>`); // 2
    </script>
</head>
<body></body>
</html>

3. 할당 연산자

=, +=, -=, *=, /=, %= 등

4. 비교 연산자

>, <, >=, <=, == (값 비교), === (값 및 타입 비교)

값 비교 (==): 비교 전에 타입 변환을 수행합니다.
값 및 타입 비교 (===): 타입이 다르면 무조건 false를 반환합니다.
문자열 비교는 사전순으로 이루어집니다.

예제 (비교 연산자):


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>비교 연산자</title>
    <script>
        document.write(`10 > 5: ${10 > 5}<br>`); // true
        document.write(`"apple" < "banana": ${"apple" < "banana"}<br>`); // true

        document.write(`"10" == 10: ${"10" == 10}<br>`); // true (타입 변환 후 비교)
        document.write(`"10" === 10: ${"10" === 10}<br>`); // false (타입이 다름)
        document.write(`null == undefined: ${null == undefined}<br>`); // true
        document.write(`null === undefined: ${null === undefined}<br>`); // false
    </script>
</head>
<body></body>
</html>

5. 논리 연산자

&& (AND), || (OR), ! (NOT)

다른 타입을 불리언으로 변환:

숫자: 0 또는 NaN은 false, 그 외는 true.
문자열: 빈 문자열 ("")은 false, 그 외는 true.
null, undefined: false.
객체: 모든 객체는 true.

예제 (논리 연산자 및 타입 변환):


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>논리 연산자</title>
    <script>
        var activeUser = true;
        document.write(`!activeUser: ${!activeUser}<br>`); // false

        // 숫자 타입 변환
        var numValue = 5;
        var zeroValue = 0;
        var nanValue = NaN;
        document.write(`!!numValue: ${!!numValue}<br>`); // true
        document.write(`!!zeroValue: ${!!zeroValue}<br>`); // false
        document.write(`!!nanValue: ${!!nanValue}<br>`); // false

        // 문자열 타입 변환
        var text = "Hello";
        var emptyText = "";
        document.write(`!!text: ${!!text}<br>`); // true
        document.write(`!!emptyText: ${!!emptyText}<br>`); // false

        // null, undefined 타입 변환
        var nullValue = null;
        var undefinedValue;
        document.write(`!!nullValue: ${!!nullValue}<br>`); // false
        document.write(`!!undefinedValue: ${!!undefinedValue}<br>`); // false

        // 객체 타입 변환
        var dateObject = new Date();
        document.write(`!!dateObject: ${!!dateObject}<br>`); // true

        // 논리 연산자 단축 평가 (Short-circuit evaluation)
        var name = "";
        var defaultName = name || "Guest"; // name이 falsy 값이므로 "Guest" 할당
        document.write(`기본 이름: ${defaultName}<br>`);
    </script>
</head>
<body></body>
</html>

6. 삼항 연산자

조건 ? 참일 때 값 : 거짓일 때 값

조건이 참이면 첫 번째 값을, 거짓이면 두 번째 값을 반환합니다.

예제 (삼항 연산자):


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>삼항 연산자</title>
    <script>
        var score = 75;
        var grade = (score >= 60) ? 'Pass' : 'Fail';
        document.write(`점수 ${score}점은 ${grade}입니다.<br>`); // Pass
    </script>
</head>
<body></body>
</html>

제어 흐름문

1. `if...else`

2. `switch`

JavaScript의 switch 문은 다양한 기본 데이터 타입을 지원합니다.

예제 (switch 문):


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>switch 문</title>
    <script>
        var dataType = "hello";

        switch (dataType) {
            case 100:
                document.write("숫자 100<br>");
                break;
            case "hello":
                document.write("문자열 'hello'<br>");
                break;
            case true:
                document.write("불리언 true<br>");
                break;
            case null:
                document.write("null 값<br>");
                break;
            case undefined:
                document.write("undefined 값<br>");
                break;
            default:
                document.write("일치하는 case 없음<br>");
        }
    </script>
</head>
<body></body>
</html>

3. `while` 루프

예제 (while 루프):


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>while 루프</title>
    <script>
        var totalSum = 0;
        var counter = 1;
        while (counter <= 100) {
            totalSum += counter;
            counter++;
        }
        document.write(`1부터 100까지의 합: ${totalSum}<br>`); // 5050
    </script>
</head>
<body></body>
</html>

4. `do...while` 루프

5. `for` 루프

예제 (for 루프):


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>for 루프</title>
    <script>
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i;
        }
        document.write(`1부터 100까지의 합: ${sum}<br>`); // 5050
    </script>
</head>
<body></body>
</html>

JavaScript 특수 구문

문장 끝의 세미콜론(;)은 일반적으로 필수적이지만, 한 줄에 하나의 문장만 있을 경우 생략 가능합니다 (권장되지 않음).
변수 선언 시 var 키워드를 사용할 수 있으며, 생략할 수도 있습니다.
- var 사용: 지역 변수 선언.
- var 생략: 전역 변수 선언 (권장되지 않음).

예제 (var 키워드 사용 여부):


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>변수 선언 특수성</title>
    <script>
        var localVariable = "지역 변수";
        document.write(`지역 변수: ${localVariable}<br>`);

        // var 없이 선언된 변수는 전역 변수가 됨
        globalVariable = "전역 변수";
        document.write(`전역 변수: ${globalVariable}<br>`);

        function demonstrateScope() {
            var innerLocal = "함수 내부 지역 변수";
            document.write(`함수 내부: ${innerLocal}<br>`);

            // 함수 내에서 var 없이 선언 시 전역 변수 됨
            anotherGlobal = "다른 전역 변수";
        }

        demonstrateScope();
        document.write(`함수 호출 후 전역 변수: ${anotherGlobal}<br>`);

        // 함수 외부에서 innerLocal 접근 시도 (오류 발생)
        // document.write(innerLocal);
    </script>
</head>
<body></body>
</html>

연습: 99단 구구단 출력

HTML 테이블을 사용하여 99단을 출력하는 예제입니다.

예제 (99단 구구단):


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>99단 구구단</title>
    <style>
        table { border-collapse: collapse; margin: 20px; }
        td { border: 1px solid #ccc; padding: 8px; text-align: center; }
        th { background-color: #f2f2f2; padding: 10px; }
    </style>
</head>
<body>
    <script>
        document.write("<table>");
        // 구구단 테이블 생성
        for (var i = 1; i <= 9; i++) { // 곱하는 수
            document.write("<tr>");
            document.write(`<th>${i}단</th>`);
            for (var j = 1; j <= 9; j++) { // 곱해지는 수
                document.write("<td>");
                document.write(`${i} × ${j} = ${i * j}`);
                document.write("</td>");
            }
            document.write("</tr>");
        }
        document.write("</table>");
    </script>
</body>
</html>

태그: JavaScript 기본 문법 데이터 타입 연산자 제어문

8월 10일 10:47에 게시됨

괴물 클럽

JavaScript 기본 문법: 기본 구성 요소 및 연산자

HTML과의 통합 방식

예제 (외부 스크립트 및 내부 스크립트):

external.js 파일 내용:

주석

데이터 타입

1. 기본 데이터 타입 (원시 타입)

2. 참조 데이터 타입

변수

선언 구문:

`typeof` 연산자:

예제 (변수 및 타입 확인):

연산자

1. 단항 연산자

예제 (단항 연산자):

2. 산술 연산자

예제 (산술 연산자):

3. 할당 연산자

4. 비교 연산자

예제 (비교 연산자):

5. 논리 연산자

예제 (논리 연산자 및 타입 변환):

6. 삼항 연산자

예제 (삼항 연산자):

제어 흐름문

1. `if...else`

2. `switch`

예제 (switch 문):

3. `while` 루프

예제 (while 루프):

4. `do...while` 루프

5. `for` 루프

예제 (for 루프):

JavaScript 특수 구문

예제 (var 키워드 사용 여부):

연습: 99단 구구단 출력

예제 (99단 구구단):

인기 태그

괴물 클럽

JavaScript 기본 문법: 기본 구성 요소 및 연산자

HTML과의 통합 방식

예제 (외부 스크립트 및 내부 스크립트):

external.js 파일 내용:

주석

데이터 타입

1. 기본 데이터 타입 (원시 타입)

2. 참조 데이터 타입

변수

선언 구문:

typeof 연산자:

예제 (변수 및 타입 확인):

연산자

1. 단항 연산자

예제 (단항 연산자):

2. 산술 연산자

예제 (산술 연산자):

3. 할당 연산자

4. 비교 연산자

예제 (비교 연산자):

5. 논리 연산자

예제 (논리 연산자 및 타입 변환):

6. 삼항 연산자

예제 (삼항 연산자):

제어 흐름문

1. if...else

2. switch

예제 (switch 문):

3. while 루프

예제 (while 루프):

4. do...while 루프

5. for 루프

예제 (for 루프):

JavaScript 특수 구문

예제 (var 키워드 사용 여부):

연습: 99단 구구단 출력

예제 (99단 구구단):

인기 태그

`typeof` 연산자:

1. `if...else`

2. `switch`

3. `while` 루프

4. `do...while` 루프

5. `for` 루프