변수와 자료형 ( 변수 선언 방식, 자료형 )

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

// 변수 선언 위치에 따른 구분
var num1 = 10; // 전역 변수(선언된 후 같은 문서 내 어디서든 사용 가능)
num2 = 5;      // 전역 변수(변수명 앞에 어떤 키워드도 없으면 전역 변수가 됨)

var num1 = 20; // JS에서 var 변수는 덮어쓰기가 됨.. / Java에서는 오류 발생

console.log("num1 : " + num1); // 윈도우 개발자도구 콘솔창에 num1 : 20 출력
console.log("num2 : " + num2); // 윈도우 개발자도구 콘솔창에 num2 : 5 출력

function test(){
    var num3 = 3; // function 지역 변수

    num4 = 4;     // * 전역 변수(변수명 앞에 어떤 키워드도 없으면 전역 변수가 됨) *

    if(true){
        var num5 = 5; // function 지역 변수

        num6 = 6;     // ** 전역 변수(변수명 앞에 어떤 키워드도 없으면 전역 변수가 됨) **
    }
    console.log("num5 : " + num5); // 윈도우 개발자도구 콘솔창에 num5 : 5 출력
}

test(); // 함수 호출

// console.log("num3 : " + num3); -> error 발생

console.log("num4 : " + num4); // 윈도우 개발자도구 콘솔창에 num4 : 4 출력
                               // function 종료 후에도 사용 가능

// console.log("num5 : " + num5); -> error 발생

console.log("num6 : " + num6); // 윈도우 개발자도구 콘솔창에 num6 : 6 출력
                               // function 내부에 있는 if문 종료 후에도 사용 가능

---

• 변수 선언 방식
  - var      : 변수 / 변수명 중복 가능(덮어쓰기) / 함수 레벨 scope(범위)
  - let       : 변수 / 변수명 중복 불가능 / 블록{ } 레빌 scope
  - const  : 상수 / 변수명 중복 불가능 / 블록{ } 레벨 scope
  
  - 1순위 : const (JS는 특정 요소를 선택해서 사용하는 경우가 많아서 상수에 고정)
  - 2순위 : let
  - 3순위 : var (ES6 이후부터 사용 빈도가 많이 적어짐)
  
  
• JavaScript 자료형
  - 자바스크립트는 변수 선언 시 별도의 자료형을 지정하지 않음
     → 변수에 대입되는 값(리터럴)에 의해서 자료형이 결정됨
  
  - string : 문자열
  - number : 숫자 → 정수 / 실수 모두 포함
  - boolean : 논리값
  - object : 객체 → 배열(Array), 자바스크립트 객체 {k : v , k : v}
  - fuction : 함수
  - undefined : 정의되지 않은 변수 → 변수가 선언만 됐지, 값이 대입되지 않음
    ※ null은 타입보단 값(리터럴)의 개념
        - null (참조하는 게 없음) : document.getElementById("오타")
                                                  → 아이디가 일치하는 요소가 없어서 참조할 수 없음
  
  
• 자료형 확인

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

<div id="typeBox"></div>

// 자료형 확인
function typeTest(){
    // 아이디가 "typeBox"인 요소 얻어오기
    const typeBox = document.getElementById('typeBox');

    let temp; // 선언 후 값을 초기화 하지 않은 상태 == undefined
    typeBox.innerText = "temp: " + temp;

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

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

    // number
    const age = 30;
    const height = 178.9;
    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};

    // javascript (배열 : [] 사용)
    const arr = [10, 30, 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 (key값 이용)
    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 (js에서는 함수도 자료형)
    
    // 1) 변수명 == 함수명
    const sumFn = function(n1, n2){ // 익명 함수
    return n1 + n2;
    }
    
    // 함수명만 작성한 경우 -> 함수에 작성된 코드가 출력됨
    typeBox.innerHTML += "<br>sumFn : " + sumFn + " / " + typeof sumFn;
    
    // 함수명() 괄호를 포함해서 작성하는 경우 -> 함수 호출(수행)
    typeBox.innerHTML += "<br>sumFn(5, 10) : " + sumFn(5, 10);
    
    typeBox.innerHTML += "<br>tempFn(15, sumFn) : " + tempFn(15, sumFn);
}

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

See the Pen 24-12-25 js review20 by Namu (@Namu-the-sans) on CodePen.

---

• 원시 타입과 참조 타입
  - 원시 타입 : 데이터 복사가 일어날 때 메모리 공간을 새로 확보하여 독립적인 값을 저장
     == 원시 타입 값을 그대로 복사하여 데이터를 바꿔도 다른 데이터에 영향을 미치지 않음(깊은 복사)
     ex) 숫자(number), boolean, undefined, null, 문자열(string)
  
  - 참조 타입 : 메모리의 위치(주소)에 대한 간접적인 참조를 통해 메모리에 접근
     == 객체의 메모리 주소를 복사하여 데이터를 바꾸면 참조하는 모두에게 영향을 미침((얕은 복사)
     ex) 배열( [ ] ), 객체( { } ), 함수(function)