본문 바로가기
웹/JavaScript

자바스크립트(변수/타입)

by 코낄2 2023. 10. 21.

1.변수

- 데이터를 저장할 수 있는 메모리 공간입니다.
- 값이 변경될 수 있습니다.
- 자바스크립트의 변수는 자동으로 타입이 저장됩니다.
let 키워드를 사용하여 변수를 선언합니다.

- var( 아주 예전에 변수 선언하던 방식. 문제점이 많아 지금은 사용 권장X)


파이썬                            자바스크립트
name = '김사과'             let name = '김사과'


let
- 지역변수, 전역변수의 구별이 확실합니다.

  (이전에 사용하던 var키워드는 지역-전역변수 구분 불가능)
- 같은 이름의 변수를 선언할 수 없습니다.

    let 변수명 = 값;
    또는
    let 변수명;
    변수명 = 값;

(수정은 변수명만 사용하여 새로운 값을 대입해주면 된다.)


상수(constant)
한번 선언된 상수는 다시 재정의 할 수 없음
- 값을 재할당 할 수 없음

const 상수명 = 값;
예) const num = 10;
    
const 상수명;
상수명 = 값; ( 재할당으로 받아들여 오류)
const pi = 3.141592;
pi = 3.14; // 이 줄에서 오류가 발생합니다. pi 변수를 다시 할당할 수 없습니다.

let x = 10;
x = 20; // x 변수를 다시 할당할 수 있습니다.

const로 선언된 변수는 값을 변경할 수 없지만, 객체나 배열과 같은 참조 타입 변수의 경우 변수가 가리키는 객체나 배열의 내용은 변경할 수 있습니다. (변수가 갖고있는 주소가 변경되는 것이 아니기 때문입니다.)

const arr = [1, 2, 3];
arr.push(4); // 배열에 원소를 추가할 수 있습니다.

 

✔ 자바스크립트에서 상수를 권장하는 이유
- 개발자 실수를 방지하기 위해
- 해킹을 방지하기 위해

2. 데이터 타입

- 자바스크립트는 선언시 타입을 정하지 않기 때문에 많은 문제가 발생할 수 있습니다.
- 자바스크립트의 타입 유연성을 해결하기 위해 MS의 타입스크립트가 탄생했습니다.

1. 숫자형(number)
정수와 실수를 따로 구분하지 않음
- 모든 수를 실수 하나로만 표현

2. 문자형(string)
- '', "" 또는 ``로 둘러쌓인 문자의 집합
    let num = 10;
    // "입력한 숫자는 10입니다."
    console.log("입력한 숫자는 " + num + "입니다.")
    console.log(`입력한 숫자는 ${num} 입니다.`)

3. 논리형(boolean)
- 참(true)과 거짓(false)으로 표현되는 값
- false, 0, '', null, undefined는 모두 거짓으로 판정
- false가 아닌 모든 값은 참으로 판정함

4. undefined, null
undefined: 타입이 정해지지 않은 타입(변수 선언 후 값이 정해지지 않은 경우)

let num;
    console.log(num);  // undefined


null: null을 저장한 값. 값이 없는 빈칸을 저장한 것

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


5. 심볼형(symbol)
유일하고 변경 불가능한 기본값을 만듬
- 객체 속성의 key로 사용
    const sym1 = symbol('apple');
    const sym2 = symbol('apple');
    console.log(sym1 == sym2); // 값이 같은지 비교 > true
    console.log(sym1 === sym2); // 타입과 값이 모두 같은지 비교 false

6. 객체형(object)
- 어떤 속성을 하나의 변수에 저장할 수 있게 해주는 집합
- key value pair 구조로 저장

const 객체명 = {키1:값1, 키2:값2 ... }


✔ 자바스크립트의 변수는 타입이 고정되어 있지 않기 때문에 같은 변수에 다른 타입의 값을 대입할 수 있음
    let user = {userid:'apple', name:'김사과', age:20}
    user = '김사과'

3. 자동 타입변환

- 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면 자동으로 타입을 변환해서 사용

    const num1 = 10;
    const str1 = '10'
    console.log(num1 + str1); // 1010
    console.log(num1 - str1); // 0
    console.log(num1 * str1); // 100
    console.log(num1 / str1); // 1


const ch = '삼십';
console.log(ch - 10);  // NaN
NaN(Not a Number)
    - '정의되지 않은 값이나 표현할 수 없는 값' 이라는 의미
    - 숫자로 변환할 수 없는 연산을 시도

타입변환 함수

- 강제로 타입을 변환할 수 있음
    Number(): 문자를 숫자로 변환
    String(): 숫자나 불린 등을 문자형을 변환
    Boolean(): 문자나 숫자 등을 불린형을 변환
    Object(): 모든 자료형을 객체형으로 변환
    parseInt(): 문자를 소수없는 정수형으로 변환
        parseInt('100.1') -> 100
    parseFloat(): 문자를 실수형을 변환
        parseInt('100.1') -> 100.1

4. 자바스크립트 대화상자

Web API: 브라우저에서 제공하는 API(Application Programming Interface)
    alert(): 사용자에게 메세지를 보여주고 확인을 기다립니다.
                먼저 메모리에 올라감. 그래서 화면을 안보여준 상태로 대기
    confirm(): 사용자에게 메세지를 보여주고 확인이나 취소를 누르면 그 결과를 불린값으로 반환합니다.
    prompt(): 사용자에게 메세지를 보여주고 사용자가 입력한 문자열을 반환합니다.

' > JavaScript' 카테고리의 다른 글

Interval, Timeout 함수  (0) 2023.10.28
프로토타입/상속  (0) 2023.10.28
자바스크립트(배열/함수)  (0) 2023.10.21
자바스크립트(연산자/조건문/반복문)  (0) 2023.10.21
자바스크립트  (0) 2023.10.20