(JS) 변수, 상수, 데이터타입, 대화상자

변수

• 데이터를 저장할 수 있는 메모리 공간
• 값이 변경될 수 있음
• 자바스크립트의 변수는 타입이 없음
• let 키워드를 사용하여 변수를 선언

var

• 유연한 변수 선언 방식
• 지역변수, 전역변수의 구별이 없음
• 같은 이름의 변수를 선언할 수 있음

    console.log(num)
    var num = 10;
    {
        console.log(num);   // 전역변수 num = 10
        var num = 20;       // 지역변수 num = 20
    }
    console.log(num);       // 전역변수 num = 20

let

• 지역변수, 전역변수의 구별이 확실
• 같은 이름의 변수를 선언할 수 없음

<h2>변수</h2>
<script>
    var num;
    num = 10;
    console.log(num);

    str = '안녕';
    console.log(str);

    str = '반가워';
    console.log(str);

    {
        console.log(num);
        var num = 30;
        console.log(num);
    }

    console.log(num);   // 30??????
    console.log('-------');

    let val = 10;
    console.log(val);

    // let val = 20; 에러!
    {
        console.log(val);
        // let val = 30; 에러!
    }
    console.log(val);
</script>

var는 지역변수와 전역변수를 구분하지 않기 때문에 지역변수를 변경시 전역변수 까지 영향을 미치지만 let은 재선언시 에러로 막으며 전역변수명과 지역변수명이 같을경우에도 에러를 발생시켜 중복을 허용하지 않는다.

 

✅트랜스 컴파일러

• 과거 브라우저 및 특정 브라우저 버전등을 모두 사용할 수 있도록 해석해주는 라이브러리
• BABEL

상수(constant)

• 한번 선언된 상수는 다시 재정의 할 수 없음
• 값을 재할당 할 수 없음

const 상수명 = 값;
const num = 10;

const 상수명;
상수명 = 값; (X)

 

<h2>상수</h2>
<script>
    // const str;
    // str = '김사과';

    const str = '김사과';
    console.log(str);

    const obj = {id: 'apple', name: '김사과', gender: '여자'};
    console.log(obj.id);
    console.log(obj.name);
    console.log(obj.gender);

    // obj = '오렌지';
    // console.log(obj);

    obj.id = 'banana';
    obj.name = '반하나';
    console.log(obj.id);
    console.log(obj.name);
</script>

const는 변수를 수정할 수 없으므로 선언 이후 재설정을 할 경우 에러를 발생 시킨다. 하지만 const 안에 객체 같이 해당 메모리 주소 안에서 변수값이 변경되는건 허용한다.

✅자바스크립트에서 상수를 권장하는 이유

• 해킹을 방지하기 위해
• 개발자 실수를 방지하기 위해

데이터 타입(Data Type)

• 프로그램에서 다룰 수 있는 값의 종류
• 자바스크립트는 선언시 타입을 정하지 않기 때문에 많은 문제가 발생할 수 있음
• 자바스크립트의 타입 유연성을 해결하기 위해 타입스크립트가 탄생

숫자형(number)

• 정수와 실수를 따로 구분하지 않음
• 모든수를 실수 하나로만 표현

// number 형
const num1 = 10;
const num2 = 11.11;
const num3 = 10e6;
console.log(num1);
console.log(num2);
console.log(num3);
console.log(typeof(num1));
console.log(typeof(num2));
console.log(typeof(num3));
console.log('----------------');

문자형(string)

• '', "" 또는 ``로 둘러싸인 문자의 집합

num = 10
"입력한 숫자는" + num + "입니다.";
`입력한 숫자는 ${num} 입니다.`;

 

// string 형
const num4 = 10;
const num5 = 5;
const str1 = 'Hello JavaScript';
const str2 = 'Hello World';
const str3 = '10';
console.log(num4 + num5);
console.log(num4 + str1);
console.log(str1 + str2);
console.log(str1 + ' ' + str2);
console.log(`자바스크입트에서는 문자열을
쌍따옴표 또는 따옴표로 둘러싸인
문자의 집합을 의미합니다`);
console.log(`str1: ${str1}, str2: ${str2}`);

console.log(num4 + str3);   // 1010
console.log(num4 - str3);   // 0 -> 자동형변환
console.log(num4 * str3);   // 100 -> 자동형변환
console.log(num4 / str3);   // 1 -> 자동형변환
console.log('----------------');

따옴표 안에 있는 숫자일경우 덧셈은 문자열 연결 연산으로 처리하지만 뺄셈이나 곱셈, 나눗셈은 자동 형변환을 하여 연산을 한다.

논리형(boolean)

• 참(true)과 거짓(false)으로 표현되는 값
• false, 0, '', "", null, undefined는 모두 거짓(false)로 판정함
• false가 아닌 모든 값은 참(true)로 판정함

// 논리형
const b1 = true;
const b2 = false;
const b3 = (10 > 5);
const b4 = (10 < 5);
console.log(b1);
console.log(b2);
console.log(b3);
console.log(b4);
console.log(typeof(b1));
console.log('----------------');

 

undefined, null

• undefined: 타입이 정해지지 않은 타입을 의미(변수 선언 후 값이 정해지지 않은 경우) 
•  
• let num; console.log(num); // undefined
• null: null을 저장한 값. 값이 없는 것

  let obj = null;
  console.log(obj);   // null

// undefind, null
let num;
console.log(num);
console.log(typeof(num));
let obj1 = {};
console.log(obj1);
console.log(typeof(obj1));
let obj2 = null;
console.log(obj2);
console.log(typeof(obj2));
console.log('----------------');

값을 지정하지 않을 경우 변수값은 undifined가 되며 타입도 undifined로 취급한다. object는 값이 비어있어도 타입은 object로 유지되며 null값은 객체의 값이 null을 가질뿐 타입은 object를 갖게된다.

심볼형(symbol)

• 유일하고 변경 불가능한 기본값을 만듬
• 객체 속성의 key로 사용 
• const sym1 = Symbol('Apple'); const sym2 = Symbol('Apple'); consol.log(sym1 == sym2); // 값이 같은지 비교 consol.log(sym1 === sym2); // 데이터타입과 값이 같은지 비교

// 심볼형
const sym1 = Symbol('apple');
const sym2 = Symbol('apple');
console.log(sym1);
console.log(sym2);
console.log(sym1 == sym2);  // 값만 같으면 true
console.log(sym1 === sym2); // 타입과 값이 모두 같으면 true

const sym3 = sym1;
console.log(sym3 == sym1);
console.log(sym3 === sym1);

객체형(object)

• 어떤 속성을 하나의 변수에 저장할 수 있게 해주는 집합
• key value pair 구조로 저장

  const user = {userid: 'apple', name: '김사과', age: 20};
              ------  ------
               key     value 

✅자바스크입트의 변수는 타입이 고정되어 있지 않으며 같은 변수에 다른 타입의 값을 대입할 수 있음

let user = {userid: 'apple', name: '김사과', age: 20};
user = '김사과';

 

// 객체형
const user = {'userid': 'apple', 'name': '김사과', 'age': 20};
console.log(user);
console.log(user.userid);
console.log(user.name);
console.log(user.age);
console.log(`유저의 아이디는 ${user.userid}, 이름은 ${user.name}, 나이는 ${user.age} 입니다`);

자동 타입 변환

• 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면 자동으로 타입을 변환해서 사용 
• const num4 = 10; const str3 = '10'; console.log(num4 + str3); // 1010 console.log(num4 - str3); // 0 -> 자동형변환 console.log(num4 * str3); // 100 -> 자동형변환 console.log(num4 / str3); // 1 -> 자동형변환

NaN(Not a Number)

• '정의되지 않은 값이나 표현할 수 없는 값' 이라는 의미
• 숫자로 변환할 수 없는 연산을 시도

  const char = '삼십';
  result = char - 10; // result의 값은 NaN

타입변환 함수

• 강제로 타입을 변환할 수 있음
• Number(): 문자를 숫자로 변환
• String(): 숫자나 불린등을 문자형으로 변환
• Boolean(): 문자나 숫자등을 불린형으로 변환
• Object(): 모든 자료형을 객체형으로 변환
• parseInt(): 문자를 int형으로 변환
• parseFloat(): 문자를 float형으로 변환

console.log(10 + '문자열');
console.log('3' * '5');
console.log(1 - '문자열');

const num1 = '10';
const num2 = '5';
console.log(`현재 num1의 타입: ${typeof(num1)}`);
console.log(`현재 num2의 타입: ${typeof(num2)}`);
console.log(`Number(num1): ${typeof(Number(num1))}, ${Number(num1)}`);
console.log(`String(num1): ${typeof(String(num1))}, ${String(num1)}`);
console.log(`Boolean(num1): ${typeof(Boolean(num1))}, ${Boolean(num1)}`);
console.log(`Object(num1): ${typeof(Object(num1))}, ${Object(num1)}`);
console.log(`parseInt(num1): ${typeof(parseInt(num1))}, ${parseInt(num1)}`);
console.log(`parseFloat(num1): ${typeof(parseFloat(num1))}, ${parseFloat(num1)}`);
console.log('----------------');

console.log(`num1 + num2 = ${num1 + num2}`);
console.log(`num1 + num2 = ${Number(num1) + Number(num2)}`);
console.log(`num1 + num2 = ${parseInt(num1) + parseInt(num2)}`);

자바스크립트의 대화상자

• Web API: 브라우저에서 제공하는 API(Application Programming Interface)
• 프로그램들과 기능들의 상호 통신 방법을 규정하고 도와주는 매개체
• alert(): 사용자에게 메세지를 보여주고 확인을 기다리
• confirm(): 사용자에게 메세지를 보여주고 확인이나 취소를 누르면 그 결과를 불린값으로 반환
• prompt(): 사용자에게 메세지를 보여주고 사용자가 입력한 문자열을 반환

alert('안녕하세요 자바스크립트!');

 

const result = confirm('확인 또는 취소를 눌러주세요!');
console.log(result);

confirm은 사용자가 선택한 값을 boolean타입으로 return해준다.

const result = prompt('당신의 이름을 입력하세요');
console.log(result);

prompt는 사용자가 입력한 값을 string타입으로 return해준다.

 

string값이여도 자동형변환은 적용이된다.

 

const num1 = prompt('첫번째 숫자를 입력하세요');
const num2 = prompt('두번째 숫자를 입력하세요');
console.log(Number(num1) + Number(num2));

prompt가 2개일 경우 순서대로 실행이 된다.