자바스크립트 변수와 값

Kay·2020년 7월 20일

변수

변수는 값을 담기 위해 이름을 붙인 상자.
컴퓨터의 메모리에 일정한 크기의 영역으로 생성.
일반적인 프로그램은 변수 값을 알고리즘에 따라 변화시켜서 프로그램이 의도한 목적을 달성.

변수 선언

var sum;   // var : 선언자, sum : 변수 이름
var sum, a;   // 쉼표로 변수 여러 개를 한 문장으로 선언 가능
var x;   // 선언만 하면 undefined라는 값이 들어감
var x = 5;   // 대입 연산자로 값을 대입 할 수 있음
var a = 1, b = 2, c = 3; // 여러 개 선언 후 초깃값 설정을 쉼표로 구분

let, const

let 은 변수를 선언하고, const 는 한 번만 할당할 수 있는 상수를 선언.

let
let 문은 블록 유효 범위를 갖는 지역 변수를 선언. 사용법은 var 와 같다.
```
let x;
let a, b, c;
let x = 5, y = 7;
```
var 와 let 의 가장 큰 차이점은 let으로 선언한 변수의 유효 범위가 블록 안이라는 점.
```
> let x = "outer x";
> {
... let x = "inner x";
... let y = "inner y";
... console.log(x); // inner x
... console.log(y); // inner y
 }
> console.log(x)
outer x
> console.log(y)
ReferenceError: y is not defined
```
var 와 달리, let 으로 선언한 변수를 끌어올리지 않는다.
let 으로 똑같은 이름을 가진 변수를 선언하면 문법 오류가 발생한다.
const

블록 유효 범위를 가지면서 한 번만 할당할 수 있는 변수(상수)를 선언.
const 로 선언한 상수 값은 수정할 수 없지만, 상수 값이 객체, 배열일 경우 프로퍼티 또는 프로퍼티 값을 수정할 수 있음.

변수 선언 생략

변수를 선언하지 않은 상태에서 값을 대입하면 자바스크립트 엔진이 그 변수를 자동으로 전역 변수로 선언.
이는 버그의 원인이 될 수 있으므로 반드시 선언하고 사용해야 함.

변수 끌어올림과 변수 중복 선언

변수 선언의 끌어올림(호이스팅, hoisting)

프로그램 중간에서 변수를 선언하더라도 변수가 프로그램 첫 머리에 선언된 것처럼 다른 문장 앞에 생성.
단, 선언과 동시에 대입하는 코드는 끌어올리지 않음
var 문을 사용하여 같은 이름을 가진 변수를 여러 개 선언하더라도 문제가 발생하지 않음

console.log(x); // -> undefined
var x = 5;
console.log(x); // -> 5

변수의 명명 규칙

변수, 함수, 라벨 이름 등 사용자가 정의하는 이름을 식별자라고 함
사용할 수 있는 문자는 알파벳, 순자, 밑줄(_), 달러기호($)
첫글자로는 숫자를 사용할 수 없다.
예약어를 식별자로 사용할 수 없다 ex) new

예약어란?
자바스크립트 문법을 규정짓기 위해 자바스크립트 언어 사양에서 사용하는 특수한 키워드
캐멀 표기법(로어 캐멀 표기법) :
ex) newName, createLifeGame
파스칼 표기법(어퍼 캐멀 표기법)
ex) NewName, CreateLifeGame
밑줄 표기법(스네이크 표기법)
ex) new_name, create_life_game

변수 이름을 지을 때 일반적으로 사용하는 표기법

캐멀 표기법이나 밑줄 표기법을 사용하여 변수의 의미를 파악할 수 있도록 이름 붙인다
루프 카운터 변수 이름으로 i, j, k 등을 사용
상수는 대문자로 표현 ex) MAX_SIZE
논리값을 표현하는 변수에는 이름 앞에 is를 붙인다.
생성자 이름을 붙일 때는 파스칼 표기법을 사용한다.

데이터 타입

숫자나 문자열 처럼 변수에 저장하는 데이터 종류

정적 타입 언어
변수에 타입이 있어, 그 변수의 타입과 일치하는 데이터만 저장할 수 있음
동적 타입 언어
변수에 저장된 데이터 타입을 동적으로 바꿀 수 있는 언어

데이터 타입의 분류

자바스크립트가 처리할 수 있는 데이터 타입은 크게 두 가지로 나눌 수 있다.

원시 타입

숫자, 문자열, 논리값, 특수한 값(undefined, null) 등
- 데이터를 구성하는 가장 기본적인 요소로 불변 값으로 정의.
- 원시 값을 변수에 대입하면 변수에 그 값이 저장 됨.
객체 타입

배열, 함수, 정규 표현식 등 원시 타입에 속하지 않는 자바스크립트의 값을 객체라고 한다.
객체는 변수 여러 개가 모여서 만들어진 복합 데이터 타입.
객체 안에 저장된 값은 바꿀 수 있음.
객체는 참조 타입. 객체 타입의 값을 변수에 대입하면 변수에는 그 객체에 대한 참조(메모리에서의 위치 정보)가 할당.

숫자

자바스크립트에는 타입이 없으므로 숫자를 모두 64비트 부동소수점으로 표현.

리터럴(literal)
프로그램에 직접 작성할 수 있는 상수 .
숫자를 표현하는 리터럴에는 정수 리터럴과 부동소수점 리터럴이 있다.
특별한 숫자를 표현하기 위한 문자열
- Infinity : 플러스 무한대
- NaN : 부정 값(Not a Number)

문자열

길이가 16비트인 유니코드 문자(UTF-16)을 나열.
전 세계에서 사용하는 문자를 대부분 표현 할 수 있음.
작은 따옴표나 큰 따옴표를 문자열의 앞뒤에 붙여서 표현.
줄 바꿈, 탭 문자 등은 문자열에 그대로 추가할 수 없음으로 이스케이프 시퀀스로 표현 해야함.

논리값

조건식이 참인지 거짓인지 표현하기 위해 사용하는 값
true, false 두 가지 종류가 있음.
주로 제어 구문(if/else, while, do/while, for문 등) 에서 사용

특수한 값

값이 없음을 표현하기 위한 특수한 값

undefined
null

ECMAScript 6부터 추가된 데이터 타입

심벌

ECMAScript 6부터 새롭게 추가된 원시 값

자기 자신을 제외한 그 어떤 값과도 다른 유일무이한 값

// 심벌 생성. 호출할 때마다 새로운 값을 만듦.
var sym1 = Symbol(); 

// 문자열과 연결된 심벌 생성. 
// 코드의 어느 부분에서도 같은 심벌을 공유.
var sym2 =  Symbol.for("club"); 

// 연결된 문자열 구하기
Symbol.keyFor()

템플릿 리터럴

ECMAScript 6부터 새롭게 추가된 문자열 표현 구문

역따옴표로 묶은 문자열(`)

템플릿 리터럴을 사용하면 표현식의 값을 문자열에 추가할 수 있음.
여러 줄의 문자열을 표현할 수 있음.
보간표현식
- 템플릿 리터럴 안에는 플레이스 홀더를 넣을 수 있음
- 플레이스 홀더는 ${ ... }로 표기
- 문자열 안에 변수나 표현식의 결과값을 삽입할 수 있음.

Kay

new blog✨ https://kay-log.tistory.com/

이전 포스트

프로그래밍 언어와 자바스크립트

다음 포스트