변수(Variable)란 쉽게 말해 데이터를 넣어두는 공간이다.
즉, 프로그램이 최종적인 해답에 이르기 위한 일련의 '데이터 주고받기'인데, 주고받기를 하는 과정에서 사용하는 데이터를 일시적으로 보관하는 것이 변수의 역할이다.

1. 변수 선언하기(var)

• 변수 선언이란, 변수의 이름을 Javascript에 등록하고 값을 넣어두기 위한 영역을 메모리상 확보하는 것을 뜻한다.
• 변수의 선언은 아래와 같이 var 명령을 사용한다.
• 또한, 변수선언 시 초깃값을 같이 설정할 수도 있다.

var 변수명 [= 초깃값], ...

var msg = "text!";
var x = 10;

• 만약 초깃값을 설정하지 않았을 경우에는 Javascript에서 디폴트로 정의되지 않은 값(undefined)을 변수에 할당한다.
• 그리고 변수의 선언은 Javascript에서 암묵적으로 영역을 확보하기 때문에 필수는 아니지만 그래도 선언하는 것을 습관화하자.

1.1 변수 선언하기(let)

• ES2015에는 변수를 선언하기 위한 명령으로 let이 추가되었다.
• let은 var과 동일한 구문으로 선언하여 사용한다.

// 기본적인 선언
let msg;
//복수 선언
let x, y;
// 초깃값 선언
let msg = "test!";

• 코드를 보면 var를 let으로 바꿔서 사용한 것처럼 보이지만 아래와 같은 차이점이 있다.

변수를 중복 선언할 수 없다.

• let은 동일한 명칭의 변수를 사용할 수 없다.
  따라서 아래와 같은 코드는 "Identifier 'msg' has already been declared"와 같은 오류가 발생한다.

let msg = "test!";
let msg = "test!!";

1.2 식별자의 명명 규칙

• 식별자란 스크립트를 구성하는 요소의 이름을 말한다.
• 변수, 함수, 메소드, 레이블, 클래스 등은 모두 서로를 식별하기 위한 이름이다.
• Javascript에서는 식별자를 다른 언어에 비해 자유롭게 결정이 가능하지만 아래와 같은 규칙이 있다.

1. 첫 번째 문자는 영문자/언더스코어(_)/달러($) 중 하나여야 한다.
2. 두 번째 문자 이후에는 첫 번째에서 사용할 수 있는 문자 또는 숫자이어야 한다.
3. 변수명에 포함된 영문자의 대문자/소문자는 구별되어야 한다.
4. Javascript에서 의미를 갖는 예약어가 아니어야 한다.
5. Javascript에서 이미 정의된 객체나 그 멤버명(String, eval 등)이 아니어야 한다.

1.3 식별자의 주요 기술 방법

• 명명 규칙은 따로 없지만 가독성을 높이기 위해 식별자를 어떻게 정의할지 개발자? 끼리 암묵적인 약속이있다.

기술 방법	개요	예
camelCase 기법	앞 단어 첫 문자는 소문자, 그 이후의 단어의 첫 문자는 대문자	firstName
Pascal 기법	모든 단어의 첫 문자는 대문자	FirstName
언더스코어 기법	모든 단어의 첫 문자는 소문자, 단어 간 _로 연결	first_name

• 일반적으로는 아래와 같이 나누어 사용한다.
  • 변수명이나 함수명 👉 camelCase 기법
  • 생성자(클래스)명 👉 Pascal 기법
  • 상수명 👉 언더스코어 기법

1.4 상수 선언하기

• 상수는 변수와 다르게 스크립트의 중간에서 변수에 저장된 내용을 변경할 수 없다.
  즉, 코드 안에 나타나는 의미 있는 값으로 미리 이름을 정해둔 것을 말한다.

const 상수명 = 값;

• 앞서 언급한대로 상수는 식별하기 쉽도록 하기 위해 단어를 언더스코어(_)로 구분하는 것이 일반적이다.

2. 데이터형

• 데이터형이란 데이터의 종류를 뜻한다.
  Javascript에서는 'abc'와 같은 문자열, 1,2,3과 같은 수치, 참(true)/거짓(false)과 같은 논리적인 값 등 데이터를 스크립트 안에서 취급할 수 있다.
• 다른 언어와 다른 점은 문자열을 대입했던 변수에 수치를 대입해도 괜찮다.
  즉, Javascript에서의 변수는 대입되는 값에 따라서 데이터형이나 크기가 변환된다.

2.1 Javascript의 주요 데이터형

• Javascript의 데이터형은 크게 기본형과 참조형으로 분류할 수 있다. 이 둘의 차이점은 '값을 변수에 대입하는 방법'에 있다.
• 기본형의 변수에는 값 자체가 저장되며, 참조형의 변수는 그 참조값(값을 실제로 보관하고 있는 메모리의 주소)을 보관한다.

• 기본형 👉 숫자(number), 문자열(string), 논리(boolean), 심벌(symbol), 특수(null/undefined)
• 참조형 👉 배열(array), 객체(object), 함수(function)

2.2 리터럴

• 리터럴이란 데이터형에 보관되는 값 그 자체, 값의 표현 방법을 뜻한다.

2.2.1 숫자 리터럴

• 숫자 리터럴(number)은 정수 리터럴과 부동 소수점 리터럴로 구분할 수 있다.
• 정수에서 일반적으로 사용하는 리터럴은 10진수이고, 2/8/16진수로 표현하고자 한다면 리터럴 앞에 각각 '0b', '0o', '0x'를 붙이면 된다.
• 2진수에서는 0~1의 값을, 8진수에서는 0~7의 값을, 16진수에서는 0~9의 값과 A(a)~F(f)의 영문자를 사용할 수 있다.
  * 이 이외의 값을 지정할 경우에는 "Invalid or unexpected token'과 같은 오류가 발생한다.

2.2.2 문자열 리터럴

• 문자열 리터럴(string)은 작은따옴표(') 또는 큰따옴표(")로 표현한다.
• 작은따옴표와 큰따옴표를 사용할 때 문자열 안에 작은따옴표/큰따옴표를 포함할 경우에는 아래의 코드와 같이 각 문자열에 포함되어 있지 않은 따옴표를 사용하도록 해야한다.

'He's Hero' (x) // 문자열 안에 작은따옴표가 포함되어 있으므로 오류
"He's Hero" (o) // 문자열 안에 작은따옴표가 있지만, 큰 따옴표로 둘러쌌으므로 가능

• 이외에도 문자열 리터럴에는 특수한 의미를 가진 문자를 '\ + 문자' 형식으로 표현할 수 있는데, 이를 이스케이프 시퀀스(Escape Sequence)라고 부른다.

2.2.3 템플릿 문자열

• 템플릿 문자열(Template Strings)을 이용하면 아래와 같은 문자열 표현이 가능하다.
  • 문자열 안에 변수 삽입
  • 복수행에 걸친 문자열
• 템플릿 문자열에서는 아래 코드와 같이 작은따옴표/큰따옴표 대신에 백쿼트로 문자열을 감싼다.

let name = '대경';
let str = `반가워 ${name}아.`;

console.log(str); 👉 결과: 반가워 대경아.

2.2.4 배열 리터럴

• 배열(array)이란 데이터의 집합을 뜻한다.
• 배열은 변수와 다르게 하나의 변수에 대해 복수의 값을 보관할 수 있다.
• 배열 리터럴은 아래와 같이 콤마(,)로 구분한 값을 대괄호([])로 감싼 형태이다.

['Park', 'dae', 'kyeong']

• 배열 리터럴에는 인덱스 번호를 키로 하여 배열명[인덱스번호]의 형식으로 접근이 가능하고, 0부터 순차적으로 인덱스 번호가 부여된다.

var data = ['Park', 'dae', 'kyeong'];

console.log(data[0]); 👉 결과: Park

2.2.5 객체 리터럴

• 객체(object)란 각 요소에 문자열을 키로 접근할 수 있는 배열이다. 즉, 가시성이 높다.
  * 해시, 연상 배열 등으로 불림.
• 배열 내의 개별 데이터는 요소라고 불리지만, 객체 내의 개별 데이터는 프로퍼티라고 한다.
• 프로퍼티에는 문자열, 수치, 함수를 대입하는 것도 가능하며, 함수가 대입된 프로퍼티를 메소드라고 한다.

var obj = { x:1, y:2, z:3 };

console.log(obj.x); 👉 결과: 1
console.log(obj['x']); 👉 결과: 1

2.2.6 함수 리터럴

• 함수(function)란 '어떠한 입력값(인수)이 주어지느냐에 따라 미리 정해진 처리를 진행하고 그 결과를 반환하는 구조'이다.

2.2.7 Undefined, Null

• 미정의값(undefined)은 변수에 값이 정의되어 있지 않음을 나타내는 값으로 아래와 같은 경우에 해당한다.
  • 변수가 선언 된 상태에서 값을 지정하지 않은 경우
  • 미정의된 프로퍼티를 참조하는 경우
  • 함수에서 값이 반환되지 않았을 경우

• 널(null)은 객체가 존재하지 않는 것을 의미한다.
• 미정의값과 다른점은 정의되지 않은게 아니고 그냥 값이 비어있다 라고 생각하면 된다.

---

end