변수와 자료형 (23.06.20)

현·2023년 6월 20일

Javascript

목록 보기

4/13

📝 변수 선언 위치에 따른 구분

📌 Java

        public class Student{

            // 필드 (멤버 변수)
            private String name; // 인스턴스 변수
            public static String schoolName; // 클래스 변수, static 변수

            // 메소드
            public setName(String name /*메소드 지역 변수*/){
                this.name = name;
                int num = 10; // 메소드 지역 변수

                if(){
                    int a = 20; // if 지역 변수
                }
            }
        }

📌 Javascript

html

    <pre>
        (js 파일)

        var num1; // 전역 변수 (선언된 후 같은 문서 내 어디서든 사용 가능) 
        num2;     // 전역 변수 (변수명 앞에 아무런 키워드가 없으면 전역 변수가 된다.)

        function test(){

            var num3; // function 지역 변수
            num4; // 전역 변수 (변수명 앞에 아무런 키워드가 없으면 전역 변수가 된다.)
            
            if(조건식){
                var num5; // if 지역 변수 -> function 지역 변수
                num6; // 전역 변수 (변수명 앞에 아무런 키워드가 없으면 전역 변수가 된다.)
            }
            num5;
        }
    </pre>

    <script>
        console.log("[script 태그 내부]");
        console.log("num1 : " + num1);
        console.log("num2 : " + num2);
    </script>

var str = "JS 코드를 함수 내부가 아닌 "
        + "JS파일 또는 script 태그 밑에 바로 작성하면 "
        + "HTML 렌더링 시 바로 수행된다."
console.log(str);

// 변수 선언 위치에 따른 구분
var num1 = 10; // 전역 변수
num2 = 20; // 전역 변수

var num1 = 20;

console.log("num1 : " + num1);
console.log("num2 : " + num2);

function test(){
    var num3 = 3; // function의 지역 변수
    num4 = 4; // 전역 변수

    if(true){ // 무조건 if문 수행
        let num5 = 5;   // function 지역 변수
        num6 = 6;       // 전역 변수

    }

    console.log("num5 : " + num5);

}

test();

// console.log("num3 : " + num3); // error
console.log("num4 : " + num4); // function 종료 후에도 사용 가능

// console.log("num5 : " + num5); // error
console.log("num6 : " + num6); // function 내부 if문 종료 후에도 사용 가능

📝 변수 선언 방식

📌 변수 종류

💡 var

변수, 변수명 중복 O(덮어쓰기), 함수 레벨 scope

💡 let

변수, 변수명 중복 X, 블록{} 레벨 scope

💡 const

상수, 변수명 중복 X, 블록{} 레벨 scope

📌 변수 종류별 순위

1순위 : const
(JS는 특정 요소를 선택해서 사용하는 경우가 많아서 상수에 고정시켜 둠)
2순위 : let
3순위 : var (ES6 이후부터 사용 빈도가 많이 적어짐)

📝 자바스크립트의 자료형

자바스크립트는 변수 선언 시 별도의 자료형을 지정하지 않음
-> 변수에 대입되는 값(리터럴)에 의해서 자료형이 결정됨

string (문자열)

number (숫자) -> 정수 / 실수 모두 포함

boolean (논리값)

object (객체) -> 배열(Array), 자바스크립트 객체{k:v, k:v}

function (함수)

undefined (정의되지 않은 변수) -> 변수가 선언만 됐지, 값이 대입되지 않음

[참고]

null (참조하는 게 없음) -> document.getElementById("오타") (가장 흔한 경우)
-> id가 일치하는 요소가 없어서 참조할 수 없다. (null은 타입보다는 값(리터럴)의 개념)

📌 코드로 살펴보기

html

    <button onclick="typeTest()">자료형 확인</button>
    
    <div id="typeBox"></div>

// 자료형 확인
function typeTest(){

    const typeBox = document.getElementById("typeBox");

    let temp; // 선언 후 값을 초기화 하지 않음 == undefined
    typeBox.innerHTML = "temp : " + temp;

    // string
    const name = "김민석";

    // typeof 변수명 : 해당 변수의 자료형을 검사하는 연산자
    typeBox.innerHTML += "<br>name : " + name + " / " + typeof name;

    const gender = 'm';
    typeBox.innerHTML += "<br>gender : " + gender + " / " + typeof gender;
    // 자바스크립트는 char 자료형이 존재하지 않는다!
    // "", '' 모두 string 리터럴 표기법

    // number
    const age = 20;
    const height = 178.3;

    typeBox.innerHTML += "<br>age : " + age + " / " + typeof age;
    typeBox.innerHTML += "<br>height : " + height + " / " + typeof height;

    // boolean

    const isTrue= true;

    typeBox.innerHTML += "<br>isTrue : " + isTrue + " / " + typeof isTrue;

    //object
    
    // java ({} 사용)
    // int[] arr = {1,2,3,4,5}; 

    // javascript ([] 사용)
    const arr = [10, 30, 70, 50];
    typeBox.innerHTML += "<br>arr : " + arr + " / " + typeof arr;

    for(let i=0; i<arr.length; i++){
        typeBox.innerHTML += "<br>arr[" + i + "] : " + arr[i];
    }

    // 자바스크립트 객체는 K:V (Map 형식)
    const user = {"id" : "user01", "pw" : "pass01"};

    typeBox.innerHTML += "<br>user : " + user + " / " + typeof user;

    // 객체 내용 출력 방법 1
    typeBox.innerHTML += "<br>user.id : " + user.id;
    typeBox.innerHTML += "<br>user.pw : " + user.pw;

    // 객체 내용 출력 방법 2 (객체 전용 for문 for ... in)
    for(let key in user ){
        // user 객체의 키(id, pw)를 반복할 때마다 하나씩 얻어와 key 변수에 저장
        typeBox.innerHTML += "<br>user[" + key + "] : " + user[key];

    }

    console.log(user); // 콘솔 출력 시 보기 더 좋음

    // function (함수도 자료형이다!)
    // 1) 변수명 == 함수명
    const sumFn = function(n1, n2){ // 익명 함수
        return n1+n2;
    }
    
    // 함수명만 작성한 경우 -> 함수에 작성된 코드가 출력됨
    typeBox.innerHTML += "<br>sumFn : " + sumFn + " / " + typeof sumFn;

    // 함수명() 괄호를 포함해서 작성하는 경우 -> 함수 호출(수행)
    typeBox.innerHTML += "<br>sumFn(10, 20) : " + sumFn(10, 20);

    typeBox.innerHTML += "<br>sumFn(30, sumFn) : " + tempFn(30, sumFn);
}

function tempFn(n3, fn){
    return n3 + fn(10, 20);
}