[JavaScript] 2. 변수/상수 & 데이터 타입

# 변수(Variable) 

변수란 데이터를 저장할 수 있는 메모리 공간을 의미합니다. 값은 변경될 수 있습니다. let 키워드를 사용해 변수를 선언하고 선언되지 않은 변수를 사용하려고 하거나 접근하려고 하면 오류가 발생합니다.

 

● let  

let 변수명;          // 변수의 선언 

변수명 = 값;       // 변수의 초기화
let 변수명 = 값;   // 변수의 선언 및 초기화

 

ex) 
let num;
num = 10;

* let은 변수에 재할당이 가능하다. 데이터를 저장할수록 낭비가 된다. 10은 heep메모리에 저장되며 num 은 heep을 가리키게 된다.

 

 

예시 1)

* let은 'num' 같은 변수명을 사용할 경우, Error가 발생된다 let과 var의 차이점!!! 

<script>
        let num = 10;
        console.log(num);
        let num = '20';    // Error
        console.log(num);
        if(true){
            let num = 30;
        }
        console.log(num);
</script>

▼▼▼

 

★ if문 내에서 num은 지역변수로 사용되므로 num의 값은 둘 다 10이다!

<script>
        let num = 10;
        console.log(num);
        if(true){
            let num = 30;
        }
        console.log(num);
</script>

 

 

 

예시 2)

"use strict" ; 명확한 문법은 적용하도록 유도해준다. 따라서, <script> 작성 시 가장 위에 써주는 것을 권장한다.

 

<script>
        str s= 'javascript'
        console.log(str);
</script>

▼▼▼

 

<script>
	"use strict";
        str s= 'javascript'
        console.log(str);
</script>

 

 

● var 예전 방식 = 현재는 사용하지 않는다! 

var 변수명;
변수명 = 값;
var 변수명 = 값;

 

 

예시 1)

문제점 1 - num 변수명을 여러 개 사용해도 문제가 없다.

<script>
        // * 예전방식 *
        var num = 10;
        console.log(num);
        var num = 20;   // 같은 변수명으로 선언
        console.log(num);
        if(true){ 
            var num = 30; // 지연변수로 선언
        }
        console.log(num);
</script>

 

 

예시 2)

<script> 
        console.log(str); // 선언되지 않은 변수 출력 - Error
        str = "javascript" // 선언되지 않은 변수에 값 대입
</script>

console 값

 

 

예시 3)

문제점 2 - 선언되지 않은 변수에 값을 대입해도 문제가 발생되지 않는다.

<script> 
        str = "javascript" // 선언되지 않은 변수에 값 대입
        console.log(str);
</script>

console 값

 

 

#상수(constant) 

한번 선언된 상수는 다시 재정의 할 수 없으며, 값을 재할당 할 수 없습니다. 

재할당이 필요한 경우 한정해서 let을 사용할 필요가 있다. 

 

 

● const 상수명 = 값;

따라서, 자바스크립트에서는 변수보다는 상수를 우선 사용하기를 권장한다.

 

---

 

# 자바스크립트 데이터 타입 

타입이란, 프로그램에서 다룰 수 있는 값의 종류를 의미합니다. 

 

1. 숫자형(number)

자바스크립트는 다른 언어와 달리 정수와 실수를 따로 구분하지 않습니다. 모든 수를 실수 하나로만 표현합니다.

 

● typeof : 해당 변수/상수의 타입 형태를 알려준다. 

<script>
        "use strict"
        const num1 = 10, num2 = 11.11, num3 = 10e6; // 10e6 : 10의 6승
        console.log(num1);
        console.log(`num1의 타입 : ${typeof num1}`);  
        console.log(num2);
        console.log(`num1의 타입 : ${typeof num2}`);
        console.log(num3);
        console.log(`num1의 타입 : ${typeof num3}`);
</script>

 

2. 문자열형(string)

자바스크립트에서는 문자열을 큰따옴표나 작은따옴표로 둘러싸인 문자의 집합을 의미합니다.

 

let str1 = '홍길동 : "여러분 반가워요~"'; - html과 방식 동일

let str2 = "홍길동 : '여러분 반가워요~'";

let str3 = '\'안녕하세요. \n 반가워요~\''; - \n(줄바꿈) 특수문자 앞에는 '\'써주어야 한다.

let js = '자바스크립트';

let str4 = `${js}에서는 문자열을
큰따옴표나 따옴표로 
둘러싸인 문자의 집합을 
의마합니다.` - ` ` 을 쓰게 되면 enter가 적용되어 확인된다. 또한, ${변수명}을 쓸 수 있다.

 

예시 1)

<script>
        "use strict"
        const num1 = 10, num2 = 5; 
        const str1 = "Hello JavaScript", str2 = "Hello World";
        console.log(num1 + num2);
        console.log(num1 + str1);
        console.log(str1 + ", " + str2);
</script>

 

예시 2)

* 첫째줄 - HTML과 방식 동일

* \n(줄바꿈) 특수문자 쓰기 위해서는 앞/뒤에 '\'써주어야 한다.

* ` ~ ` 을 쓰게 되면 enter가 적용되어 확인된다. 또한, ${변수명}을 쓸 수 있다.

<script>
        "use strict"
        console.log('홍길동 : "여러분 반가워요~"'); 
        console.log("홍길동 : '여러분 반가워요~'"); 
        console.log('\'안녕하세요. \n반가워요~\'');
        
        let js = '자바스크립트';
        console.log(`${js}에서는 문자열을
        쌍따옴표나 따옴표로 
        둘러싸인 문자의 집합을 
        의마합니다.`);
</script>

 

 

3. 불리언형(boolean)

불리언 값은 true(참), false(거짓)으로 표현합니다.

<script>
        "use strict"
        const b1 = true, b2 = false;
        const b3 = (10 > 5);
        const b4 = (10 < 3);
        console.log(`b1의 값 : ${b1}`);
        console.log(`b2의 값 : ${b2}`);
        console.log(`b3의 결과 : ${b3}`);
        console.log(`b4의 결과 : ${b4}`);
</script>

 

 

4. undefined, null 형

자바스크립트에서 null이란 object 타입이며, 아직 "값"이 정해지지 않은 것을 의미합니다. 또한 undefined란 null과 달리 "타입"이 정해지지 않은 것을 의미합니다. 따라서 자바스크립트에서는 undefined는 초기화되지 않은 변수나 존재하지 않은 값에 접근할 때 반환됩니다.

 

let num;

console.log(num); // 타입이 확인되지 않을 때 undefined가 찍힌다.

 

let obj = null; // null을 적용하는 순간 객체(object)가 된다.

console.log(obj); // null

 

 

undefined 예시)

<script>
        "use strict"
        let num1;
        console.log(num1);
        console.log(`num1의 타입 : ${typeof num1}`);
</script>

 

null 예시)

<script>
        let obj1 = {};  // 내용없이도 객체생성가능하다.
        let obj2 = null;    // null로 객체 생성
        console.log(obj1);
        console.log(`obj1의 타입 : ${typeof obj1}`);
        console.log(obj2);
        console.log(`obj2의 타입 : ${typeof obj2}`);
</script>

 

 

5. 심볼형(Symbol)

ECMAScript6에서 추가된 데이터 타입입니다. 유일하고 변경 불가능한 기본값을 만듭니다. 또한 객체 속성의 key값으로도 사용될 수 있습니다.

 

예시 1) 

<script>
        "use strict"
        const sym1 = Symbol('a');   
        // 해당파일에서 새로운 key값을 만들며 유일하다. 값이 같더라도 타입이 다르다.
        const sym2 = Symbol('a');   
        
        console.log(sym1 === sym2);
        console.log(sym1 == sym2); // key 와 value 가 같이 들어가기 때문에 같을수가 없다.
</script>

 

예시 2)

<script>
        "use strict"
        const sym3 = Symbol();
        const sym4 = sym3;  // sym3 값을 sym4에 넣어주기때문에 같다.
        console.log(sym3 === sym4);
    </script>

 

 

6. 객체형(Object)

자바스크립트의 기본 타입입니다. 객체는 여러 프로퍼티나 메소드를 같은 이름으로 묶어놓은 일종의 집합체입니다. 

 

* { } 괄호를 사용하면 객체가 생성된다.

* JAVA와 같이 객체 생성 후 .을 사용하게 되면 안의 기능을 사용할 수 있다.

<script>
        "use strict"
        const student = { name: '김사과', age: 20, gender: '여자'};
        console.log(`이름: ${student.name}`);
        console.log(`나이: ${student.age}`);
        console.log(`성별: ${student.gender}`);
</script>