JavaScript - 변수유형, 호이스팅, 연산자, 형변환

FrontEnd_day4 정리 (2021.12.07 화요일)

JavaScript 변수

• 프로그램 실행 중 값을 저장하기 위한 메모리 내의 임시 기억장소
• 자바스크립트에서 식별자(변수명, 함수명 등) 명명 규칙
  • 시작은 반드시 '영문자'나 '_' 사용한다. 숫자로 시작하지 않는다.
  • 대소문자 구별
  • 키워드 사용 불가
  • 특수문자, 공백 사용할 수 없음
  • 한글 사용 가능(영문 사용 권장)
  • 의미 있는 단어 사용(어떻게 사용하는 변수(혹은 함수)인지 알 수 있도록)
• 변수 선언
  • var
  • let
  • const
  • EC6 이후 보완하기위해 추가된 변수 선언 방식 : let, const
  • 변수를 필요한 곳에 사용하면 자동으로 생성되기 때문에 반드시 선언하지 않아도 된다.
  • 변수의 데이터 타입은 실행 시 결정(동적 타이핑)
  • 명시적으로 선언하는 경우 예약어 var사용 (명시적 선언 권장)
    • var @@@; // 명시적 선언
    • var @@@, ###, $$$; // 여러개 동시 선언 가능
    • var price = 10000; // 변수 초기화
    • var name = "홍길동"; // 변수 초기화
    • tel = "010-1111-1111"; // 명시적 선언하지 않고 변수 선언
• 정적 타이핑 언어
  • 변수의 자료형을 컴파일 시에 결정
    • c, c++, java 등
    • 선언한 변수의 자료형에 따라 값 저장
    • 선언의 의미는 실행 시 컴파일러가 운영체제에게 메모리를 얼만큼 할당 받아야 하는지 확보하도록 알리는 것
• 동적 타이핑 언어
  • 변수의 자료형을 실행 시 결정
  • 자료형 없이 변수에 값 저장
  • var name = “홍길동”;
  • num = 100;
  • JavaScript, Python 등

변수 선언 예제 : variable.html

<script type="text/javascript">
            // 명시적 선언
            var num = 10, pi = 3.14;
            var ch = 'a';
            var name = "홍길동";
            // 명시적 선언하지 않고 값 저장.
            address = "서울시 강남구";
            nation = "대한민국";
            // 변수 값만 출력
            document.write(num);
            // 문자열과 변수, 태그 연결해서 출력
            document.write("<br>");
            document.write("num : " + num + "<br>");
            document.write("pi : " + pi + "<br>");
            document.write("name : " + name + "<br>");
            document.write("address : " + address + "<br>");
            document.write("nation : " + nation + "<br>");
        </script>

변수의 유형

• 멤버변수(전역변수)
  • 전역 범위
  • <script> 바로 하위에 명시적(var 사용 o)으로 선언되거나, 명시적(var 사용 x)으로 선언하지 않고 사용하는 변수
  • 자바스크립트 코드 내 모든 곳에서 사용 가능
• 지역변수
  • 함수 내에서 var를 붙여서 선언된 변수
  • 함수 내에서만 사용 가능
  • 함수 내에서 var를 붙이지 않고 사용하는 변수는 전역변수가 된다.
    • function @@@() { var name = "홍길동";} // 지역변수
    • function @@@() { name = "홍길동";} // 전역변수

전역변수/지역변수 사용 예제 : variableLocalGlobal.html

<script type="text/javascript">
            // 여기에 선언된 변수는 var 존재 여부와 상관 없이 전역 변수
            var x = 5, y = 10; // 명시적 선언 전역변수
            total = 0; // 비명시적 선언 전역변수

            function f1() { // 모든 전역 변수 사용 가능
                x = x + y;
                document.write(x + "<br>");
            }
            function f2() { // 모든 전역 변수 사용 가능
                total = x + y;
                document.write(total + "<br>");
            }

            f1();
            f2();
            document.write(x + "<br>");
            document.write(total + "<br>");

            function localf1() {
                // 지역변수 : 함수 내에서 var 붙인 변수
                // 함수 내에서만 사용 가능
                var localVar1 = 100;
            }
            localf1(); // 값이 사용 되는지 확인 위해 함수 호출
            //document.write(localVar1 + "<br>");
            // 함수에서 선언된 지역변수 사용 불가 : Uncaught ReferenceError: localVar1 is not defined
            function localf2() {
                // 전역변수 : 함수 내에서 var 붙이지 않고 저장한 변수
                // 함수 밖에서도 사용 가능
                localVar2 = 200;
            }
            localf2(); // 값이 사용 되는지 확인 위해 함수 호출
            document.write(localVar2 + "<br>"); // 제대로 출력 된다.
        </script>

var와 let, const의 차이

• 차이점 1 : scope
  • var : function 단위의 scope
  • let : { }(block) 단위의 scope
• 차이점 2 :
  • var는 동일 변수명 여러 개 사용해도 오류 없음
  • let은 이미 선언된 변수명으로 선언 불가
• const : 상수의 개념(값 변경 불가)

var와 let, const의 차이 예제 : var_let.html

        <script type="text/javascript">
            var name = "홍길동";
            document.write(name + "<br>");
            var name = "이몽룡";
            document.write(name + "<br>");
            // 홍길동
            // 이몽룡 출력됨
            // 동일 변수명으로 중복 선언해도 오류 없고 다른 값으로 출력 됐다.

            // let name = "성춘향";
            // document.write(name + "<br>");
            // Uncaught SyntaxError: Identifier 'name' has already been declared
            // 이미 사용됐기 때문에 사용 불가능
            let name2 = "성춘향";
            document.write(name2 + "<br>");
            // 사용 가능

            sumi = 0;
            for(var i = 0; i < 10; i++) {
                sumi += i;
            }
            document.write(i + "<br>"); // 10 출력 => i는 for문 밖에서도 사용 가능하다. 

            // sumj = 0;
            // for(let j = 0; j < 10; j++) {
            //     sumj += j;
            // }
            // document.write(j); //  j is not defined 출력 안됨. => let은 해당 블록 안에서만 유효한 값.

            // const : 상수 개념. 값을 변경할 수 없다.
            let name3 = "홍길동";
            document.write(name3 + "<br>");
            name3 = "이몽룡";
            document.write(name3 + "<br>")
            const address = "서울";
            document.write(address + "<br>")
            // address = "부산";
            // document.write(address + "<br>") // Assignment to constant variable. => 값 변경 불가능.
        </script>

호이스팅(Hoisting)

• 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
• 즉, 선언은 뒤에 하지만 선언 전에 미리 변수 사용하는 것
• var로 선언된 변수는 가능하지만, let으로 선언된 변수는 불가능.
• document.write(name);
• var name = "홍길동"; 이 가능하다. (다른 출력 함수도 마찬가지)

호이스팅 예제 : variableHoisting.html

  <script type="text/javascript">
            document.write(name);
            var name = "홍길동";
        </script>

연산자

• 자바와 동일

데이터 타입

• 숫자 : 정수형, 실수형
• 문자 : 'a'
• 문자열 : "큰 따옴표도 가능하고", '작은 따옴표도 가능하다'
• 논리값 : true, false
• undefined와 null
  • null : 참조 객체 없음(값이 없다)
  • undefined : 값의 유형을 알 수 없다.
• 데이터 형변환
  • parseInt() : 정수값으로 형변환
  • parseFloat() : 실수값으로 형변환
  • String() / toString() : 문자열로 형변환
  • toLocaleString() : 정수형 천단위 구분(10000 -> 10,000) 출력

데이터 타입, 형변환 예제 : dataType.html

        <script type="text/javascript">
            var num1 = 15; // 정수
            var num2 = 123.45; // 실수
            var answer = 'Y'; // 문자
            var name = "홍길동"; // 큰 따옴표 문자열
            var address = '서울시 강남구'; // 작은 따옴표 문자열
            var result = true; // 참
            var nothing;
            var input = prompt("자료형 예제", "취소 버튼 누르세요") // 취소 버튼 누르면 null값 반환

            // 1. 숫자 연산
            // 1851.75 출력
            document.write("정수 * 실수 : " + (num1 * num2));
            // 2. 형변환 parseInt(num2) 실수를 정수로 변환
            // 123 출력
            document.write("<br>실수를 정수로 형변환 : " + parseInt(num2));
            // 3. 숫자를  문자열로 변환
            // 15123.45 출력
            document.write("<br>숫자를 문자열로 형변환 : " + String(num1) + num2.toString());
            // 4. 문자열 * 문자열
            // NaN (Not a Number : 숫자가 아니다) 출력됨
            document.write("<br>문자열 곱하기 : " + (name*address));
            // 5. noting 변수를 선언만 하고 값을 저장하지 않은 경우 출력
            // undefined(값의 유형을 확인할 수 없음) 출력됨
            document.write("<br>nothing :  " + nothing);
            // 6. prompt() 대화상자에 취소 버튼 누를 경우
            // null(값이 없을 때) 출력됨 : '참조 객체 없음' 
            document.write("<br>input :  " + input);
        </script>