B3 : 변수, 상수, 자료형

 

목차

1. 변수와 상수

    1-1. 변수

    1-2. 상수

    1-3. 변수명, 상수명 짓는 법

2. var, let, const의 비교 (중복선언/스코프/호이스팅)

3. 자료형

    3-1. 여덟가지 자료형

    3-2. typeof 연산자

---

1. 변수와 상수

1. 변수 (variable)

변수는 변경 가능한 데이터를 저장하는 공간이다.

자바스크립트에서는 var, let 키워드를 사용해 변수를 생성한다.

let msg;	// 변수 선언
let user = 'bang', age = 26;	// 여러 변수 한꺼번에 선언

msg = 'Hello';
alert(msg);		// Hello

msg = 'world';
alert(msg);		// world

 

한 변수의 데이터를 다른 변수에 복사할 수도 있다.

let a = 'a';
let b = a;

alert(a);	// a;
alert(b);	// a;

엄격 모드가 아닐 시, 변수를 let으로 선언하지 않고 아무렇게나 사용해도 생성되지만,

유지보수 등의 이유로 변수는 선언을 하여 생성하는 것이 좋다.

 

 

var는 예전에 많이 사용하던 변수 선언 키워드로, 아래와 같은 문제점이 있어 이제는 잘 사용하지 않는다.

• 블록스코프가 아닌 함수스코프/전역 스코프이다.
• 변수의 중복 선언을 허용한다.
• 선언하기 전에 사용이 가능하다.

 

 

2. 상수 (constant)

상수는 변경 불가능한 데이터를 저장하는 공간이다.

상수는 재할당이 불가능하므로, 상수를 변경하려고 하면 에러가 발생한다.

자바스크립트에서는 const로 상수를 선언한다.

const pi = '3.14';

 

대문자로 상수명을 지어 가독성을 높일 수도 있다.

const COLOR_RED = "#F00";
const COLOR_BLUE = "#00F";

 

 

3. 변수명, 상수명 짓는 법

변수 이름을 지을 때는 제약 사항이 3가지 있다.

1. 변수명에는 숫자와 문자, 그리고 기호 $, _만 사용
2. 첫 글자는 숫자가 될 수 없음
3. 예약어는 변수명으로 사용할 수 없음 (let, return, class, function 등 JS에서 이미 사용중인 단어들)

다음으로 제약사항은 아니지만, 여러 단어를 조합하여 변수명을 지을 때 흔히 카멜 표기법(camelCase)를 사용한다.

또한 대소문자를 구별하여, apple과 Apple은 서로 다른 변수가 된다.

let $ = 1;
let _ = 2;
let userName;
let commit_msg;

 

변수명을 짓는데에 강력한 제약은 없지만 통상적으로 적용되는 규칙이 있다. 카멜표기법 같은 것들

• 직관적이고 사람이 읽을 수 있도록 짓기
• 줄임말, 너무 짧은 이름은 피하기
• 최대한 서술적이고 간결하게 명명하기
• 자신만의 규칙이나 소속된 팀의 규칙 따르기

---

2. var, let, const의 비교 (중복선언/스코프/호이스팅)

JS에서 변수, 상수를 선언하는 키워드로 var, let, const가 있다.

이 키워드들을 중복 선언 허용 여부, 스코프, 호이스팅 관점에서 비교를 해보자.

	var	let	const
중복 선언	✅ 같은 스코프 내에서 중복 선언 허용 ⋅ 값은 덮어쓴다	❌ 같은 스코프 내에서 불가	❌ 같은 스코프 내에서 불가
스코프	⋅ 함수 스코프(function scope) ⋅ 블록{} 스코프는 무시한다	⋅ 블록 스코프(block scope)	⋅ 블록 스코프(block scope)
호이스팅	✅ 선언이 호이스팅됨 ⋅ 스코프 최상단으로 끌어올려져    undefined로 초기화된다	✅ 선언이 호이스팅됨 ❌ Temporal Dead Zone(TDZ)때문에    선언 전 접근 시 ReferenceError 발생	✅ 선언이 호이스팅됨 ❌ Temporal Dead Zone(TDZ)때문에    선언 전 접근 시 ReferenceError 발생
초기화	⋅ 초기화하지 않아도 undefined 할당	⋅초기화하지 않아도 undefined 할당	⋅ 선언과 동시에 반드시 초기화 필요
재할당	⋅ 가능	⋅ 가능	❌ 불가능

 

스코프와 호이스팅에 대한 더 자세하고 딥한 내용은 따로 정리했다.

스코프와 호이스팅 파헤치기

(WIP) 스코프와 호이스팅 파헤치기

 

---

3. 자료형

1. 여덟가지 자료형

자바스크립트에는 여덟가지의 기본 자료형이 있다.

자바스크립트의 변수는 특정 자료형으로 정해지지 않고, 상황에 따라 다른 자료형이 될 수 있다.

자료의 타입은 있지만, 변수에 저장되는 값의 타입이 언제든지 바뀔 수 있는 동적 타입 언어이기 때문이다.

원시 자료형	Number	• 정수, 부동소수점 숫자를 표현 • 일반 숫자 외 특수 숫자값을 포함 (Infinity, -Infinity, NaN)
	BigInt	• 숫자형 범위를 나타내는 큰값, 작은 값을 표현 • 정수 리터럴 끝에 n을 붙이거나 함수 BigInt()를 호출하여 문자열/숫자 → BigInt로 형변환 가능 • 일반 숫자와 연산 불가능
	String	• "", '', `` 으로 묶어서 표현 • 백틱(``)으로 묶은 경우, 문자열 중간에 변수, 표현식 삽입 가능 • 문자열 내에 줄바꿈, 따옴표 등을 쓰고 싶다면 escape character ₩를 넣는다. (\n, \", \\, \t, ...)
	Boolean	• true, false 두 가지 값만 있다 • true = 1, false = 0
	Null	• null 값만 표현한다 • 존재하지 않는 값, 비어있는 값, 알 수 없는 값을 나타낸다
	Undefined	• 값이 아직 할당되지 않은 상태이다. • 변수를 선언만 하고 값을 할당하지 않았다면, undefined가 자동 할당 된다.
	Symbol	• 유일하고 변경 불가능한 값이다. • 주로 객체의 고유한 식별자를 만들 때 사용한다
객체 자료형	Object	• 데이터 컬렉션이나 더 복잡한 개체를 표현할 수 있다.(다양한 원시 자료형 포함 가능)

 

 

2. typeof 연산자

typeof 연산자는 자료형을 반환한다.

typeof x , typeof(x) 와 같은 형태로 사용할 수 있다.

typeof undefined	// undefined
typeof 0	// number
typeof 10n	// bigint
typeof true	// boolean
typeof 'foo'	// string
typeof Symbol("id")	// symbol
typeof []		// object
typeof Math		// object (내장 객체)
typeof null		//object	(언어 자체의 오류로, null은 object가 아님)
typeof alert	// function	(함수형은 따로 없으나 typeof는 피연산자가 함수면 function을 반환함)

 

 

 

 

 

참고

https://ko.javascript.info/variables

변수와 상수