4. 변수와 자료형

JavaScript의 변수 

var num1
num2 = 200  				-> 전역변수

function test() {
	var num3			-> 지역변수 
    num4				-> 전역변수
    
    if(true) {
    	var num5 = 500  -> 지역변수 
        num6				-> 전역변수
    }
 }

전역변수

 : 특정 함수 안에 들어가 있지 않고 밖에 나와 있는 변수로 어디서든 사용이 가능함. 

   키워드(var,let,const)를 쓰지 않고 변수명으로만 선언한 것은 전역변수로 선언된다. 

 

지역변수 

 : 함수 내에서 선언된 함수로 함수에서 벗어나면 사용하지 못한다. 

 

 

변수 선언 방식

JavaScript는 변수 선언 시 자료형이 아닌 " var, let, const, 미작성 " 키워드를 사용하여 선언한다. 

 1. var(변수) : 변수명 중복 가능, 함수 레벨 scope

2. let(변수)  : 변수명 중복 불가, 블록 레벨 scope

3. const(상수) : 변수명 중복 불가, 블록 레벨 scope  *선언 시 반드시 초기화도 함께 하여야 함

 

사용 빈도: const > let > var(비추천)

 - js는 html 상에서 특정 요소를 선택하여 지속적으로 추적하여 사용하는 경우가 많기 때문에 상수형 변수인 const를 가장 많이 사용한다. 

   (let을 쓰면 나중에 값이 덮어씌어질 수 있기 때문..)

 

🧐 var의 문제점

처음 JavaScript에는 var만 있었으나 많은 문제점이 있어 보완하여 나온 것이 let이다. 

* 문제점: 전역변수와 지역변수의 구분이 확실하지 않다, 중복이 가능하다. 

function test() {
    var a = 1;
}
console.log(a)

-> ReferenceError: a is not defined

     a는 함수 안에서 선언된 지역 변수로 함수 밖에서는 사용 불가하다. 

for(var i = 0; i < 3; i++) {
    console.log(i)
}
console.log(i)

-> 그러나, 함수 안에 들어간 변수만 지역 변수로 취급하고 for문이나 if절 안에서 사용한 변수는 전역변수로 취급한다. 

var b = 1
var b = 10
console.log(b)

-> 같은 변수명을 중복하여 사용할 수 있다. 

 

👉🏼 이러한 문제점을 보완하여 나온 키워드가 let이다. var는 사용하지 말고 let을 사용하자. 

 

---

자료형

변수 선언 시 별도의 자료형을 지정하는 키워드를 작성하지 않고, 변수에 대입되는 값(리터럴)에 따라 결정된다. 

 

1. string(문자열): "", '' 

2. number(숫자): 정수, 실수를 구분하지 않음

3. boolean(논리값): true, flase

4. object(배열/객체)

    - 객체는 {key : value} 한 쌍으로 잉루어져 있으며 map형태이다. 

    - key는 무조건 string이지만, value는 제한이 없다. 

5. function(함수)

6. undifine(자료형 지정되지 않음): 값이 대입되지 않은 변수 

*null: 참조하는 것이 없는 것을 나타내는 리터럴(자료형 아님) 

const box = document.getElementById("box")
box.innerHTML = ""

function typeTest(){
    //1. undefine
    let name;
    box.innerHTML += `1. 변수 name에 저장된 변수: ${name} / 자료형:${typeof name}<br>`


    //2. string
    name = "홍길동"
    box.innerHTML += `2. 변수 name에 저장된 변수: ${name} / 자료형:${typeof name}<br>`

    
    //3.number
    age = 20
    height = 175.5
    box.innerHTML += `3-1. 변수 age에 저장된 변수: ${age} / 자료형:${typeof age}<br>`
    box.innerHTML += `3-2. 변수 height에 저장된 변수: ${height} / 자료형:${typeof height}<br>`


    //4.boolean
    const isTrue = true
    box.innerHTML += `4. 변수 isTrue에 저장된 변수: ${isTrue} / 자료형:${typeof isTrue}<br>`


    //5.object
    //5-1. 배열
    const arr = [10, 20, 30]
    box.innerHTML += `5-1. 배열 arr에 저장된 변수: ${arr} / 자료형:${typeof arr}<br>`
    for(let i = 0; i < arr.length; i++){
        box.innerHTML += `* arr에 저장된 변수: ${arr[i]} / 자료형:${typeof arr[i]}<br>`
    }

    //5-2. JS객체 
    const user = {
        "name" : "김흥부",
        "age" : 30,
        "brother" : ["김놀부", 40, isTrue]
    }
    box.innerHTML += `5-2. 객체에 저장된 변수: ${user} / 자료형:${typeof user}<br>`
    box.innerHTML += `* 객체에 저장된 변수 name: ${user.name} / 자료형:${typeof user.name}<br>`
    box.innerHTML += `* 객체에 저장된 변수 age: ${user.age} / 자료형:${typeof user.age}<br>`
    box.innerHTML += `* 객체에 저장된 변수 brother: ${user.brother} / 자료형:${typeof user.brother}<br>`

    for(let i = 0; i < user.brother.length; i++){
        box.innerHTML += `** brother에 저장된 변수: ${user.brother[i]} / 자료형:${typeof user.brother[i]}<br>`
    }
}

---

🥸 실습: 간이계산기 만들기 

  <section>
        <div>
            <h1>calculator</h1>

            첫 번째 값 <input type="number" id="num1"><br>
            두 번째 값 <input type="number" id="num2"><br>

	<!-- 나의 풀이 -->
            <div>
                <button onclick="fnPlus()">+</button>
                <button onclick="fnMinus()">-</button>
                <button onclick="fnMulti()">x</button>
                <button onclick="fnDiv()">/</button>
                <button onclick="fnLeave()">%</button>
            </div>
            
	<!-- 개선1 -->
    		<div>
                <button onclick="calc('+')">+</button>
                <button onclick="calc('-')">-</button>
                <button onclick="calc('*')">x</button>
                <button onclick="calc('/')">/</button>
                <button onclick="calc('%')">%</button>
            </div>
            
 	<!-- 개선2 -->
        	<div>
                <button onclick="calc(this)">+</button>
                <button onclick="calc(this)">-</button>
                <button onclick="calc(this)">*</button>
                <button onclick="calc(this)">/</button>
                <button onclick="calc(this)">%</button>
            </div>
           

            <article>
                계산 결과 : <span id="result"></span>
            </article>
        </div>
    </section>

let num1 = document.getElementById("num1")
let num2 = document.getElementById("num2")
let resultArea = document.getElementById("result")
let result;


function fnPlus() {
    result = parseInt(num1.value) + parseInt(num2.value)
    resultArea.innerHTML = result;
}

function fnMinus() {
    result = parseInt(num1.value) - parseInt(num2.value)
    resultArea.innerHTML = result;
}

function fnMulti() {
    result = parseInt(num1.value) * parseInt(num2.value)
    resultArea.innerHTML = result;
}

function fnDiv() {
    result = parseInt(num1.value) / parseInt(num2.value)
    resultArea.innerHTML = result;
}

function fnLeave() {
    result = parseInt(num1.value) % parseInt(num2.value)
    resultArea.innerHTML = result;
}

문제점: function이 너무 많음

 

let num1 = document.getElementById("num1")
let num2 = document.getElementById("num2")
let result = document.getElementById("result")


function calc(op) {
    // 매개변수 + - * / % 전달
    
    // 현재 input 요소에 작성된 값을 얻어 변수에 저장 
    const n1 = Number(num1.value)
    const n2 = Number(num2.value)

    switch(op) {
        case '+' : result.innerText = n1 + n2; break;
        case '-' : result.innerText = n1 - n2; break;
        case '*' : result.innerText = n1 * n2; break;
        case '/' : result.innerText = n1 / n2; break;
        case '%' : result.innerText = n1 % n2; break;
    }
}

개선1: 매개변수와 반복문을 사용하여 하나의 함수로 만들 수 있음 

 

let num1 = document.getElementById("num1")
let num2 = document.getElementById("num2")
let result = document.getElementById("result")


function calc(btn) {

    const op = btn.innerText;

    // 현재 input 요소에 작성된 값을 얻어 변수에 저장 
    const n1 = Number(num1.value)
    const n2 = Number(num2.value)
    
    result.innerText = new Function("return " + n1 + op + n2)();
                                     // 띄어쓰기를 안하면 문자열 바로 뒤에 숫자가 붙는다.
    
}

개선2. 내장객체 new Function()을 사용.

           : 매개변수의 문자열을 JS로 해석/수행