[JavaScript] 변수와 상수 그리고 자료형...

변수와 상수 

변수(variable) 란?

직역하면 변하는 수, 프로그래밍에서는 데이터를 저장하는 상자 라고 생각하면 쉬울 것 같다.

 

변수를 사용하려면 우선 변수를 [선언(declaration)] 해야한다. 그 후에 선언된 변수를 [할당(assignment)] 시켜야한다.

 

변수 선언은 컴퓨터에게 나 여기(변수)에 데이터 저장할거야 인지해 라는 과정이 될 수있고

할당은 "여기" 에 데이터를 넣어주는 과정이라고 할 수 있다. 

 

즉 메모리 공간을 확보하고, 코드의 가독성과 유지보수를 향상시키기 위해 변수 선언 및 할당을 한다는 소리다.

 

let korea;

이렇게..

 

상수(constant) 란?

말 그대로 변하지 않는 값 을 의미한다. 즉, 프로그램 실행 중에 값이 고정되어 변경되지 않는 것을 상수 라고 합니다.

ex) 원주율, 중력 가속도, 이미 지나간 나의 후회스러운 시간들.. (미래는 바뀔 수 있다 아자아자)

 

// 리터럴(Literal)은 값 자체를 표현하는 방법으로, 상수랑 다르다 상수는 리터럴을 담는 "변하지 않는" 변수이다

 

 

 

키워드

JavaScript의 변수를 선언하는 키워드 3가지 

var, let, const

 

위의 3가지 키워드를 각각 특징에 맞게 구분하는 방식에 대해서도 얘기해보고자 한다. 

 

보통 키워드도 각자의 특징들이 있는데 간단하게 세 가지 정도로 구분된다 

1. 범위 (scope 스코프)

2. 중복선언 가능 / 불가능

3. 호이스팅(hoisting)

 

이렇게 구분되니 잘 이해하고 넘어가야 한다.

 

우선 키워드 구분 전에 ES6라는 단어가 있는데 해당 단어는 ECMAScript 6의 줄임말로, 

JavaScript의 표준 사양인데 ES6는 그중 6번째 버전으로 2015년에 공식적으로 발표된 버전이다. 

해당 버전엔 클래스, 모듈, 화살표 함수, 리터럴, Promise, let, const 같은 방식도 포함되어 있기 때문에 

중요하다고 할 수 있다.

 

1. var
ES6 이전에 변수를 선언했던 유일한 키워드였다. 즉 과거에 사용했던 어르신 키워드라고 할 수 있다.
범위(scope): var로 선언한 변수는 함수 범위 (함수 내부에서만 유효한 변수) 를 가진다. 
중복선언: 가능
호이스팅: 변수 선언 전에 사용 가능하다. 

console.log(x);  // (호이스팅)
var x = 10;

 

//현재는 블록 스코프를 지원하지 않고, 중복 선언 및 호이스팅으로 인해 여러 버그를 유발해 잘 사용하고 있지 않는 추세다.

사용한다면 ES6 이전에 사용한 코드의 호환성 유지를 위해 사용되지 않을까 싶다.

 

2. let

ES6에서 도입된 변수 선언 키워드로 아주 기합넘치는 선출이라고 볼 수 있다.범위(scope): let으로 선언한 변수는 블록 범위 (블록 내부에서만 유요한 변수) 를 가진다.중복선언: 불가능 ( 같은 스코프 내에서 동일한 이름의 변수 선언 불가. )호이스팅: 선언은 위로 끌어 올려지지만 초기화 하지 않고서는 사용이 불가능하다. 

 

//보통 많이 사용하는 키워드이고, 권장되고 있는 키워드이다.

 

3. const

const는 상수(constant)를 선언하는 키워드로 선언과 동시에 초기화를 반드시 해야 한다.

범위(scope): let과 동일하게 블록 범위를 가진다.

중복선언: 불가능

호이스팅: 선언은 위로 끌어 올려지지만 초기화 하지 않고서는 사용이 불가능하다. 

 

// 값의 변경을 원치 않는 변수 선언시, 코드의 안정성과 가독성을 높일 수 있다.

 

---

실습 예시들,,,

// 1. 변수
let age = 27;

// 2. 상수
const birth = "1999.01.20";

// 3. 변수 명명규칙(네이밍 규칙)

// 3-1. $, _ 제외한 기호는 사용할 수 없다.
let $_name;

// 3-2. 숫자로 시작할 수 없다.
let name1;
let $2name;

// 3-3. 예약어를 사용할 수 없다.
//let if 같은

// 4. 변수 명명 가이드
let salesCount = 1;
let refundCount = 1;
let totalCount = salesCount - refundCount;

 

 

---

 

 

자료형 (Type)

자료형은 값들을 포함한 집합 이라고 부를 수 있겠다.... 즉 동일한 속성의 값을 묶은것을 말함.

JavaScript의 자료형은 아래의 그림처럼 분류가 되어있다

출처 : 한 입 크기로 잘라 먹는 리액트

 

1. 원시타입 (Primitive Types) :

단일 값을 가지며 불변성을 갖고 있다. 변수에 값을 복사할 때 값 자체가 복사된다.

기본형이라고도 불립니다.

 

 

2. 객체 (참조) 타입 (Reference Types) :

객체 데이터로, 변수에 값을 복사할 때 주소값이 복사된다.

 

typeof 연산자를 이용해서 변수의 타입을 확인할 수 있다.

console.log(typeof 10); // "number"
console.log(typeof "Hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (JavaScript의 오래된 버그 제대로 null 값 확인하려면 === null 사용)
console.log(typeof { key: "value" }); // "object"
console.log(typeof [1, 2, 3]); // "object"
console.log(typeof function () {}); // "function"

 

 

출처: 한 입 크기로 잘라먹는 리액트