[Javascript] 변수와 상수, 리터럴 자바스크스립트 기본 개념 잡기

1. 변수

변수란 언제든 바뀔 수 있는 이름을 붙이는 것이다. 변수를 선언할때는 let / var 를 앞에 붙인다.

변수 선언할 때는 꼭 초깃값을 지정해야하는 것은 아니다. 초깃값을 할당하지 않았을때는 특별한 값 undefined가 할당된다.

let 문 하나에는 변수 여러개를 선언 할 수 있다.

 

let targetTempC, room1 = "conference_room", room2 = "lobby";

 

여기서는 변수 3개를 선언 했는데 targetTempC는 값을 할당하지 않았으므로 undefined 받습니다.

room1은 선언과 동시에 'conference_room'를 할당 받았고, room2 역시 선언과 동시에 'lobby'를 할당했습니다.

 

 

 

2. 상수

ES6에서 새로 생겼습니다. 상수는 변수처럼 값을 할당받을 수 있지만 한번 할당한 값을 바꿀 수 없습니다.

 

const ROOM_TEMP_C = 21.5, MAX_TEMP_C = 30;

 

상수 역시 여러개 선언 가능합니다.

 

* 절대적인 규칙은 아니지만 상수 이름에는 보통 대문자와 밑줄만 사용한다. 왜냐면 상수를 코드에서 찾기 쉽기 때문이다.

 

 

 

3. 변수와 상수 중 어떤것을 사용해야하나?

변수보다 상수를 쓰는것이 좋다.

데이터값이 아무때나 막 바뀌는것 보다는 고정된 값이 이해하기 쉽고 실수로 값을 바꾸는 일이 줄어들기 때문이다.

 

But! 상수를 쓰면 안되고 항상 변수를 써야하는 상황도 있다.

루프 제어에는 변수를 써야하고 시간이 지나면서 값이 바뀌는 경우에도 변수를 써야한다.

 

 

 

4. 식별자 이름

변수 / 상수 / 함수의 이름을 식별자라고 부른다. 식별자에는 규칙이 있다.

- 식별자는 반드시 글자나 달러($)기호, 밑줄(_)로 시작해야한다.

- 식별자에는 글자와 숫자, 달러, 밑줄만 쓸 수 있다.

- π 같은 유니코드 문자 쓸수있다.

- 예약어는 식별자로 쓸 수 없다. (예약어는 자바스크립트에서 사용하는 단어이므로 프로그래머는 쓸 수 없다.)

 

 

:: 자바스크립트 식별자 표기법 2가지 ::

1_ 카멜 케이스

currentTempC, anIdentifierName 처럼 중간중간에 대문자가 낙타의 혹처럼 보인다고 붙여진 표기 방식이다.

 

2_ 스네이크 케이스

current_temp_c, an_identifier_name 등 같이 스네이크 케이스에 따라 이름 지은것이고 카멜 케이스보다 조금 덜 쓰인다.

 

* 표기법은 뭘 써도 좋지만 일관성을 지켜야하기때문에 한 가지 표기법을 선택 후 그걸 계속 써야한다.

 

 

 

 

5. 리터럴

리터럴이라는 단어는 값을 프로그램 안에서 직접 지정한다는 의미입니다.

자바스크립트는 프로그래머가 제공한 리터럴 값을 받아 데이터를 만듭니다.

리터럴과 식별자의 차이를 이해하는것이 중요합니다.

 

5-1) 리터럴과 식별자의 차이

let room1 = "conference_room_a";
//"conference_room_a"(따옴표 안)은 리터럴이다.

 

room1 은 변수 -> 식별자

"conference_room_a"는 값 ->  문자열 리터럴 / room1의 값

 

 

자바스크립트는 따옴표를 통해 리터럴과 식별자를 구별한다.

식별자는 숫자로 시작할 수 없으므로 숫자에는 따옴표가 필요없다.

 

 

 

 

6. 원시 타입과 객체

* 자바스크립트의 값 = 원시 값 or 객체

문자열과 숫자 같은 원시타입은 불변이다. 숫자 5는 항상 숫자 5이고 문자열 'alpha'도 항상 문자열 'alpha'다.

 

원시타입에는 6가지가 있다.

- 숫자

- 문자열

- 불리언

- null

- undefined

- 심볼

 

불변성이라는 말이 변수의 값이 바뀔 수 없다는 뜻은 아닙니다.

 

let str = "hello";
str = "world";

 

str은 불변인 값 "hello"로 초기화했고, 새로운 불변값 "world"로 할당 받았다.

중요한것은 "hello"와 "world"가 서로 다른 문자열이라는 것이다. 바뀐것은 str이 저장하는 값 뿐이다.

 

이 6가지 원시타입 외에 <객체>가 있다.

원시 값과 달리 객체는 여러가지 형태와 값을 가질 수 있다.

자바스크립트에는 다음과 같이 몇가지 내장된 객체 타입이 있다.

- Array

- Date

- RegExp

- Map / WeakMap

- Set / WeakSet

 

 

 

 

7. 이스케이프

텍스트 데이터를 사용할 때는 항상 텍스트 데이터와 프로그램 자체를 구별할 방법이 필요하다.

문자열 안에 따옴표를 써야할때는 이스케이프해서 문자열 주위에 쓰는 부호가 아님을 나타내야한다.

 

const dialog = 'Sam looked up, and said "Hello", as Max walked in.';
//작은 따옴표 안에 큰 따옴표 써서 이스케이프 필요 X

const imperative = "Don't do that!";
// 큰 따옴표 안에 아포스트로피를 넣어서 걱정없다.

const dialog = "Sam looked up, and said "Hello", as Max walked in.";
// 큰 따옴표 안에 큰 따옴표 들어가기에 에러가 난다.

 

이때 역슬래스(＼)를 써서 이스케이프를하면 문자열이 여기서 끝나지 않았다고 자바스크립트에 알릴 수 있다.

const dialog1 = "He loked up and said \"Dont't do that!\" to Max.";
// 큰따옴표 안에 큰 따옴표 들어갈때

const dialog1 = 'He loked up and said "Dont\'t do that!" to Max.';
// 작은따옴표 안에 작은 따옴표 사용될 때

 

 

 

 

8. 템플릿 문자열

값을 문자열 안에 써야하는 일이 많다. 문자열 병합을 통해 변수나 상수를 문자열 안에 쓸 수 있다.

 

let currentTemp = 19.5;

const message = "The current temperature is" + currentTemp + "\u00b0c";
// 값을 문자열에 넣은 경우

console.log(message); 	// The current temperature is19.5°c

 

ES6에서 문자열 템플릿 이라는 기능이 도입되었다. 이 기능을 문자열 채우기라고도 부르는데 문자열 템플릿은 문자열의 정해진 위치에 값을 채워 넣는 간편한 방법이다. 문자열 템플릿에서는 큰따옴표나 작은 따옴표 쓰지 않고 백틱( ` )을 사용한다.

 

let currentTemp = 19.5;

const message = `The current temperature is ${currentTemp}\u00b0c`;

console.log(message); 	// The current temperature is 19.5°c

 

문자열 템플릿 안에서는 $가 특수문자가 된다.

${aaa} aaa값은 문자열에 삽입된다. (but 문자열 템플릿 안에 $기호를 써야한다면 역슬래시로 이스케이프)

 

 

9. 숫자와 문자열

숫자를 따옴표 안에 넣으면 -> 문자열이다.

But 자바스크립트는 필요하다면 숫자 들어있는 문자열을 자동으로 숫자를 바꾼다.

 

const result1 = 3 + '30'; 	// 3이 문자열로 바뀜 >> 결과는 문자열 '330'

const result2 = 3 * '30'; 	// '30'이 숫자로 바뀜 >> 결과는 숫자 90

 

10. 심볼

심볼은 항상 유일하다. 심볼은 유일한 토큰*을 나타내기 위해 ES6에 도입 된 새 데이터 타입이다.

다른 어떤 심볼과 일치않는 이런 면에서 심볼은 객체와 유사하다.

---

 

* 토큰(Token)

코드를 작성하다 보면 콘솔창에서 Uncaught SyntaxError: Unexpected token ; 이란 것을 보게 된다.

예측되지 않은 토큰이라... 

 

토큰이란 프로그래밍 언어에서 더이상 나눌 수 없는 최소한의 단위를 말하며, 키워드나 변수이름(식별자), 지정어, 연산자, 숫자, 그리고 공백, 구두점, 여는괄호, 콜론, 세미콜론 등과 같은 특수 기호등을 일컫는다.

 

코드를 작성하다가 이와 같은 에러를 본다면 해당 내용에 대한 문법 에러를 찾아보기 바란다.

 

---

심볼은 Symbol() 생성자로 만듭니다. 우연히 다른 식별자와 혼동해서는 안되는 고유한 식별자가 필요하다면 심볼을 사용해라.

 

const RED = Symbold ("The color of a sunset!");
const ORANGE = Symbold ("The color of a sunset!");
RED === ORANGE 	// false 심볼은 모두 서로 다르다.

 

 

 

 

11. null / undefined

null이 가질 수 있는 값은 null 하나뿐이다. undefined가 가질수있는 값도 undefined 하나 뿐이다.

이 두가지는 존재하지 않는것을 나타낸다. 

 

:: null - 프로그래머에게 허용된 데이터 타입.

:: undefined - 자바스크립트 자체에서 사용한다.

 

프로그래머도 언제든 undefined 값을 사용 할 수 있지만 변수에 직접 undefined를 할당하는 경우는 아직 값이 주어지지 않는 변수의 동작을 고의로 흉내 내야 할 때 뿐이다. 변수의 값을 아직 모르거나 적용할 수 없는 경우에는 대부분 null이 더 나은 선택이다.

 

let currentTemp; 	
// 암시적으로 undefined

const targetTemp = null;
// 대상 온도는 null 즉, '아직 모르는 값'이다

currentTemp = 19.5;
// currentTemp에는 이제 값이있다.

currentTemp = undefined;
// currentTemp 초기화되지 않는 하다. 권장 X

 

 

 

 

12. 객체

원시 타입은 단 하나의 값만 나타낼 수 있고 불변이지만, 객체는 여러가지 값이나 복잡한 값을 나타낼 수 있으며 변한다.

객체의 본질은 컨테이너다. 컨테이너의 내용물은 시간 지나면서 바뀔 수 있지만, 내용물이 바뀐다고 컨테이너가 바뀌는건 아니다. 즉 여전히 같은 객체이다.

 

const obj = {}; // 객체의 기본 구조
//객체 이름은 아무거나 써도 되지만 user/shoppingCart 같은 의미를 알 수 있는 이름이 좋다.

 

객체의 콘텐츠는 프로퍼티 / 멤버 라고 부른다. 프로퍼티는 이름[키]와 값으로 구성된다.

프로퍼티 이름은 반드시 문자열 or 심볼이여야하고 값은 어떤 타입이든 상관없고 다른 객체여도 상관없다.

 

obj.color = "yellow"

프로퍼티 이름에 유효한 식별자를 써야 멤버 접근 연산자(.)를 사용할 수 있다. 프로퍼티 이름에 유효한 식별자가 아닌 이름을 쓴다면 계산된 멤버 접근 연산자[ ]를 써야한다.

 

* 프로퍼티 이름이 유효한 식별자여도 대괄호[ ]로 접근할 수 있다.

obj["not an identifier"] = 3;

obj["not an identifier"]; 	//3

obj["color"];	 //"yellow"
//유효한 식별자지만 대괄호로 접근


// 심볼 프로퍼티에 접근할 때도 대괄호를 사용한다.
const SIZE = Symbol();
obj[SIZE] = 8;
obj[SIZE]; 		//8

변수 obj에 저장된 객체를 수정했지만 obj는 항상 같은 객체를 가리킨다.

obj에 저장한 것이 문자열이나 숫자, 기타 원시값이었다면 수정할때마다 다른 값을 가리켰을것이다.

즉, obj는 계속 같은 객체를 가리키고 바뀐것은 객체의 프로퍼티이다.

 

 

 

const sam1 = {
	name: 'Sam', 	// 프로퍼티 1개
   	age: 4,			// 프로퍼티 2개
};

const sam2 = { name: 'Sam', age: 4 };	// 한줄로 선언 하는 방법


//프로퍼티 값도 객체로 만드는 방법
const sam3 = {
	name: 'Sam',
    	classification: {		//객체 안에 객체 만들기
    		kindom: 'Anamalia',
       	 	class: 'Mamalia',
         	order: 'Carnivoria',
        	family: 'Felidae',
    	},
}

 

 

sam1과 sam2의 프로퍼티는 같지만 둘은 서로 다른 객체다.

sam3의 classification 프로퍼티는 그 자체가 객체며 sam3의 family에 접근하는 방법도 여러가지가 있다.

 

sam3.classification.family;		//'felidae'
sam3["classification"].family;		//'felidae'
sam3.classification['family'];		//'felidae'
sam3['classification']['family']	//'felidae'

 

OOP??

 

 

13. Number, String, Boolean 객체

이 객체 타입들은 두가지 목적이 있다.

1) Number, INFINITY 같은 특별한 값을 정하는 것.

2) 함수 형태로 기능을 제공하는 것

 

 

14. 배열

배열 콘텐츠에는 항상 순서가 있고 키는 순차적인 숫자이다.

 

- 배열 크기는 고정이 아니다. 언제든 요소를 추가하거나 제거할 수 있다.

- 요소의 데이터 타입을 가리지 않는다. 즉, 문자열만 쓸 수 있는 배열이라던가 숫자만 쓸 수있는 배열 같은 개념이 없다.

- 배열 요소는 0으로 시작한다.

 

const a1 = [1,2,3,4];

const a2 = [1, 'two', 3, null];

const a3 = [
	{name: 'Ruby', hardness:9 },
    	{name: 'Diamond', hardness:10 },
   	{name: 'Topaz', hardness:8 },
]

const a4 = [
	[1,3,5],
   	[2,4,6]
];

 

배열에는 요소 숫자를 반환하는 length 프로퍼티가 있다.

 

const arr = ['a', 'b', 'c'];
arr.length;			//3

 

배열 요소의 값을 덮어쓸 때는 새 값을 할당한다.

const arr = [1, 2, 'c', 4, 5];
arr[2] = 3; 	// arr은 이제 [1, 2, 3, 4, 5] 이다.

 

 

15. 날짜

 

현재 날짜와 시간을 나타내는 객체를 만들 때는 new Date()를 사용한다.

const now = new Date();
now;
// Thu Aug 13 2020 11:15:04 GMT+0900 (대한민국 표준시)

- 특정 날짜에 해당하는 객체를 만들때

const halloween = new Date(2020, 9, 31);
// 월은 0에서 시작됩니다. 즉, 9는 10월. 

 

- 특정 날짜와 시간에 해당하는 객체를 만들 때

 

const halloween = new Date(2020, 9, 31, 19, 0);
// 19:00 = 7:00pm

 

날짜 객체를 만들면 다양한 부분을 가져 올 수 있다.

halloween.getFullYear();	// 2020
halloween.getMonth();	// 9 (0은 1월)
halloween.getDate();	// 5 (금요일. 1은 월요일 / 0은 일요일)
halloween.getDay();	// 31
halloween.getHours();	// 19
halloween.getMinutes();	// 0
halloween.getSeconds();	// 0

 

16. 정규표현식

정규표현식은 여러 가지 프로그래밍 언어에서 일종의 확장으로 제공하며 문자열에서 필요한 복잡한 검색과 교체 작업을 비교적 단순하게 만든다.

 

 

17. 맵과 셋

ES6의 새로운 데이터 타입 Map / Set.

Map은 객체와 마찬가지로 키와 값을 연결하지만 특정 상황에서 객체보다 유리한 부분이 있다.

Set은 배열과 비슷하지만 중복이 허용되지 않는다.

 

 

18.데이터 타입 변환

 

18-1. 숫자로 바꾸기

문자열을 숫자로 바꿔야 하는 경우가 있다.

 

1) Number 객체 생성자를 사용하는 방법.

 

const numStr = "33.3";
const num = Number(numStr); 	//이 행은 숫자 값을 만든다.

console.log(num); 	//33.3

 

숫자로 바꿀 수 없는 문자열에서는 NaN이 반환된다.

 

2) 내장 함수인 parseInt / parseFloat 함수를 사용하는 방법.

Number 생성자와 비슷하게 동작하지만 다른점이 있다.

parseInt 사용하면 기수를 넘길 수 있다. 기수는 변환할 문자열이 몇 진수 표현인지 지정한다.

ex_ 16진수를 변환할때는 기수로 16을 넘긴다.

 

parseInt / ParseFloat는 모두 숫자로 판단할 수 있는 부분까지 변환하고 그 뒤에 문자열은 무시한다. 그래서 문자열의 형태가 엉망진창잉도 입력값을 쓸 수 있다.

 

 

18-2. 문자열로 변환

자바스크립트 모든 객체에는 문자열 표현을 반환하는 toString() 메서드가 있다. 문자열 병합에서 자동으로 숫자를 문자로 변환하므로 사용할 일이 별로 없지만 어떤 경우든 숫자를 문자열로 바꿔야한다면 toString() 메서드는 잘 작동하게 된다.

 

const n = 33.5;
n; 	//33.5 > 숫자

const s = n.toString();
s; 	//"33.5" > 문자열