자바스크립트의 기초적인 내용인 데이터 타입과 변수 선언 및 할당에 대한 내용입니다 :)

---

💾 Data types

자바스크립트의 데이터 종류는 기본 타입과 참조 타입으로 구분된다.

기본 타입(Primitive type)

: 원시 자료형, 원시 데이터라고도 하며 변경 불가능한 값이다.

• 숫자형(Number) : 1 100
• 문자형(String) : cat dog "1"
• 논리형(Boolean) : true false
• null : null
• undefined : undefined
  
  

💡 null과 undefined의 차이점

• 이 두 타입 모두는 값이 없음을 의미하지만, null의 경우엔 의도적으로 값이 비어있음을 의미하고, undefined의 경우엔 변수의 선언만 이루어지고, 값을 할당하지 않은 상태이다.

참조 타입(Reference type)

: 값 자체를 복사하는 원시 타입과 달리 주소를 복사한다.

• 배열(Array) : [1, 'cat', true]
• 객체(Object) : { a : 200 }
• 함수(Function) : function sayHello() {}
  
  

🔗 변수와 선언 및 할당

변수(variable)란 하나의 값(데이터)을 저장하기 위한 메모리 공간을 의미한다.

변수는 선언을 통해 해당 메모리 공간을 만들고, 할당을 통해 데이터를 해당 공간에 저장한다.

변수의 선언

변수의 선언은 다음의 세 가지 방법으로 이루어진다.

• var
• let
• const

변수의 선언은 한 번에 하나의 변수를 선언하는 것과 여러 변수를 선언하는 것 모두 가능하다.

// 하나의 변수 선언
let a;

// 여러 변수 동시에 선언
let a, b, c;

기존에 자바스크립트에서 변수 선언은 var로 가능했으나, ES6 부터 let과 const가 추가되어 사용되고 있다.

💡 왜 let과 const를 사용하는가

• 호이스팅(Hoisting)과 스코프(Scope)에 대한 간단한 이해

호이스팅(Hoisting)

console.log(a); // output: undefined
var a = 'Hello, World';
console.log(a); // output: Hello, World

호이스팅은 함수 안의 선언들을 미리 훑어 코드 최상단에 선언하는 것이다.

위 예시를 보면 var를 사용하여 선언된 변수 a가 선언되기 이전에 console.log를 실행했음에도, 불구하고 에러가 발생하지 않았으며 undefined라는 값을 반환한다. 이는 호이스팅을 통해 우선적으로 변수 선언 부분만 분리하여 최상단으로 끌어올렸기 때문이다.

비교적 과거의 게시물에서는 호이스팅이 var 변수 선언과 함수선언문에서 이루어진다고 기재되어 있는데, 실제로 코드를 작성해보니 let과 const, 함수표현식, 화살표 함수 등 전부 호이스팅이 되었다. 어느 시점 이후부터 수정된 듯 보인다.

그러므로 var, let, const, function, function*, class 키워드를 사용해 선언한 모든 식별자(변수, 함수, 클래스 등)는 호이스팅이 된다고 보는 것이 맞는 것 같다.

스코프(Scope)

let a = 1; // a : 전역 변수
function local() {
  let b = 2; // b : 지역 변수
}

유효범위의 의미를 갖는 스코프는 크게 코드 전 영역에서 참조 가능한 전역 스코프(Global scope)와 함수 코드 블록 내에서만 참조 가능한 지역 스코프(Local scope)로 구분된다.

변수는 선언 위치에 따라 스코프가 정해지기 때문에, 전역에서 선언되면 전역 변수(Global variable) 지역 내 선언 변수는 지역 변수(Local variable)이 된다.

위 경우 변수 a는 전역 변수이기 때문에 코드 전역에서 참조할 수 있지만, 변수 b는 함수 local 안에서만 참조할 수 있다.

• var와 let, const의 차이점
  

함수 레벨 스코프와 블록 레벨 스코프

var는 함수 레벨 스코프를 따르는데 이는 변수의 스코프를 구분하는 기준이 함수라는 의미이다.

function func() {
  if (true) {
    var a = 1;
  }
  a = 2;
  console.log(a);
}
func(); // output : 2

임의로 만든 func 함수의 if 문 안에서 변수 a의 선언이 이루어졌지만, var는 함수 레벨 스코프를 따르기 때문에 if 블록 밖에서도 변수 a의 참조(접근)가 가능하다.

반면에 let과 const는 블록 레벨 스코프로 블록 단위로 스코프를 구분한다.

function func() {
  if (true) {
    let a = 1;
  }
  a = 2;
  console.log(a);
}
func(); // output : ReferenceError : a is not defined 

그렇기 때문에 let으로 선언된 if 블록 밖의 변수 a는 정의가 되지 않았다는 결과가 나온다.

• 정리
  
  var는 함수 외부라면 전역 변수에 해당하고, 참조의 영역이 비교적 방대하기 때문에 디버깅의 과정에서 원인 파악의 어려움을 주거나, 중복 선언 가능으로 인해 예측하지 못한 값의 반환이 이루어 질 수 있기 때문에 문제가 된다. 그러므로 재선언이 불가능하고 블록 레벨 스코프를 지원하는 let과 const를 사용함이 바람직하다.

  ✔️ 추가적인 내용 : let과 const의 차이점

  구분	let	const
  재선언	X	X
  재할당	O	X

🔖 출처

호이스팅 및 스코프 - MJ Kim's GitHub.io
스코프 - Poiemaweb

또한, 변수 선언 과정 중 변수명을 작성하는 과정에서 식별자 규칙을 준수해야 한다.

💡 식별자(Identifier)

식별자(Identifier)란 이름을 붙일 때 사용하는 단어다.

변수명, 함수명 속성명, 메소드명 등이 이에 해당하기에, 변수 이름 작성에 있어서도 다음의 식별자 작성 규칙에 따라야한다.

📓 식별자 규칙

• 키워드를 사용할 수 없다.
  • 키워드 : 제어문의 시작과 끝, 특정한 조작 목적 등으로 쓰이는 단어
  • ex) break , for , function 등
• 첫 번째 글자는 문자, 언더스코어(_), 달러사인($)으로만 시작 가능하다.
  = 숫자는 불가능하다.
• 언더스코어(_), 달러사인($)를 제외한 특수문자는 사용 불가능하다.
• 공백은 포함하지 못한다.
  
  위와 같은 규칙에 부합하지 않으면 에러가 발생한다.
  또한, 식별자 관례에 대한 내용으로 camelCase에 대한 내용이 있다.
  
  camelCase 란 식별자 작성 중 하나인데, 식별자 전체 중 첫 번째 단어를 제외한 모든 단어의 앞자리를 대문자로 변경하는 방식이다.
  
  예를 들면 myname 이라는 변수명의 경우, myName이라고 작성한다.

변수의 할당

변수의 할당은 할당연산자(=)를 통해 이루어지고, x = y 라면, y의 값을 x에 할당함을 의미한다.

변수의 할당은 선언과 분리할 수 있으며, 한 번에 여러 변수를 선언함과 동시에 할당할 수 있다.

// 선언과 할당 분리
let a; // 선언
a = 1; // 할당
console.log(a); // output : 1

// 한 번에 여러 변수를 선언과 분리하여 할당
let b, c, d;
b = 1, c = 2, d = 3;
console.log(b, c, d); // output : 1 2 3

// 한 번에 여러 변수를 선언과 동시에 할당
let e = 1, f = 2, g = 3;
console.log(b, c, d); // output : 1 2 3

위에서 언급한 바와 같이 let과 const는 재할당의 영역에서 구분되는데 이는 다음과 같다.

let a;
a = 1;
console.log(a); // output : 1
a = 2;
console.log(a); // output : 2

let a = 1;
console.log(a); // output : 1

let의 경우 변수의 선언과 할당을 분리하여 진행할 수 있고, 재할당도 가능하다. 또한, 변수의 선언과 할당을 동시에 진행하는 것도 가능하다.

const b; // SyntaxError : Const declarations require an initialization value

const b = 1;
b = 2 // TypeError: "b" is read-only

하지만, const의 경우 선언과 동시에 값을 할당하지 않으면 에러가 발생하고, 재선언의 경우에도 에러가 발생한다.

이를 구분하여 let과 const를 적절한 용도에 사용하면 된다!

📓 수정 로그

수정 날짜	내용
210803	선언과 할당 분리 내용 및 식별자 내용 추가
210805	수정 로그 표로 변경