1인 스터디 시작

📕 오늘의 책 '러닝 자바스크립트'
✨ one-day, one-chapter
📑 CHAPTER.3 부터 시작

CHAPTER.3 리터널과 변수, 상수, 데이터 타입

변수와 상수

데이터를 보관하는 메커니즘
변수 : variabel
상수 : constant
리터널 : literal

	var test = 0; // 변수
	let test2 = 1; // 리터널
	const test3 = 2; // 상수

책에서는 변수와 상수중에서는 우선은 상수를 생각하는 것이 좋다고 한다.
필요시 변경이 필요할 경우, 그 부분만 변수(현재는 var 보다는 let)를 사용하는 것이 좋다.

식별자 이름

변수와 상수, 함수 이름을 식별자(identifier)라고 부른다.
식별자에게는 규칙이 있다.

• 식별자는 반드시 글자나 달러 기호($), 밑줄(_)로 시작해야한다.
• 식별자에는 글자와 숫자, 달러 기호, 밑줄만 쓸 수있다.
• 유니코드문자도 사용할 수 있다.
• 예약어는 식별자로 쓸 수 없다.

식별자 표기법은 여러개가 있지만 그 중 많이쓰는 것은

	const currentTem = 0; // 카멜 케이스
	const current_tem = 0; // 스네이크 케이스

식별자를 만들때 아래의 방침을 염두하고 만들어야한다

• 식별자는 대문자로 시작해서는 안된다.(예외도있음)
• 밑줄 한 개 또는 두 개로 시작하는 식별자는 아주 특별한 상황. 또는 '내부' 변수에서만 사용한다. 자시만의 특별한 변수 카테고리를 만들지 않는 한, 변수나 상수 이름을 밑줄로 시작하지 말자
• 제이쿼리를 사용할 경우, 달러 기호로 시작하는 식별자는 보통 제이쿼리 객체라는 의미이다. (겹칠 수도 있으니 조심해야겠군)

리터널(literal)

리터널이란 값을 프로그램안에서 직접 지정한다는 의미이며 리터널은 값을 만드는 방법이다. 자바스크립트는 개발자가 제공한 리터널 값을 받아 데이터를 만든다.
** 리터널과 식별자 차이를 꼭 구분 하자

	let room = "conference_room_a" 
    // "" 안에 있는 conference_room_a라는 문자열은 리터널
    // room은 식별자  

원시 타입과 객체

원시값(primitive)/객체(object)
문자열과 숫자같은 원시타입은 불변(immutable). 다만 불변성이라는 말이 변수의 값이 바뀔 수 없다는 뜻은 아니다.

원시값(primitive) 종류
숫자, 문자열, 불리언, null, undefined, 심볼(symbol)
객체(object) 종류
Array, Data, RegExp, Map, WeakMap, Set, WeakSet

숫자(Number)

실제 숫자의 근사치를 지정할 떄 IEEE-764배정도(doubel-precision) 부동소수점 숫자 형식을 사용 (간단하게 더블이라 표현)
대부분의 프로그래밍 언어는 정수, 부동소수점 2가지 이상의 숫자 타입을 가지고 있다. 하지만 자바스크립트에는 숫자형 데이터 타입이 1개 밖에 없다.
10진수, 2진수, 8진수, 16진수 의 네가지 숫자형 리터널을 인식한다

let count = 10;
const blue = 0x0000ff; // 16진수
const umask = 0o0022; // 8진수
const roomTemp = 21.5; // 10진수
const c = 3.0e6 ; // 지수(3.0 x 10^6 = 3,000,000)
const e = -1.6e-19 //지수(-1.6 x 10^-19 = 0.0000000000000000016
const inf = Infinity
const ninf = -Infinity
const nan = NaN // "Not a Number"

문자열(String)

텍스트 데이터 string 이라는 단어는 string of characters에서 나왔다.
자바스크립트의 문자열은 유니코드(Unicode)텍스트 이다.
유니코드는 텍스트 데이터에 관한 표준이며 사람이 사용하는 언어 대부분의 글자와 심볼에 해당하는 코드 포인트(code point) 를 포함한다 (이모티콘 포함)

자바스크립트 문자열 리터널 종류는 총 3가지
1. 작은따옴표 ''
2. 큰따옴표 ""
3. 백틱(backtick)`` -> ES6부터 도입

문자열 안의 문자열 ""을 표현할 때 이스케이프 사용
문자열이 여기서 끝나지 않았음을 자바스크립트에게 알려준다.

	const Str1 = "He looked up and said \"don't do that!\" to Max."
    const Str2 = 'He looked up and said "don\'t do that!" to Max.'
    const Str3 = "In JavaScript, use \\ as an escape character in strings."; // 자기자신을 이스케이프하여 문자열로 사용가능

숫자를 따옴표 안에 넣으면 숫자가 아니라 문자열이지만 필요하다면 자바스크립트는 숫자가 들어있는 문자열을 자동으로 숫자로 바꾼다. 아래의 패턴을 잘 기억헤두자.
그리고 특별한 경우가 아니면 올바른 출력값을 위하여 올바른 타입값으로 연산을 진행하자.

	const result1 = 3 + '30' // 3이 문자열로 변하여 문자열 330 출력
    const result2 = 3 * '30' //'30'이 숫자로 변하여 숫자 90 출력

불리언(boolean)

true/false 2가지만 존재하는 타입
중요한것은 참/거짓 값을 문자열에 담아두지 않아야 한다는 점이다..
원하는 값을 받고싶다면 원시값을 잘 기억해두도록 하자

심볼(symbol)

유일한 토큰을 나타내기 위해서 ES6에서 도입한 새 데이터 타입이다.
심볼은 항상 유일하다. 다른 어떤 심볼과도 일치 하지 않는다. (객체와 비슷)
다른 식별자와 혼동해서는 안되는 고유한 식별자가 필요하면 심볼을 사용하자

	const RED = Symbol("The color of a sunset!")
    const ORANGE = Symbol("The color of a sunset!")
    RED === ORANGE // false

null / undefined

자바스크립트의 특별한 타입.
null은 프로그래머에게 허용된 데이터 타입이고
undefined는 자바스크립트 자체에서 사용한다고 생각하자. 이 규칙이 강제는 아니지만 undefined를 변수에 직접적으로 할당할 경우는 아직 값이 주어지지 않은 변수의 동작을 고의로 흉내 내야 할 때 뿐이다. (할당하지 않은 변수라던가, 이거는 boolean으로 치면 false 이기 때문에 if 이나 삼항연산자 같은거에 쓰는 편)
변수의 값을 아직 모르거나 적용할 수 없는 경우 null이 더 좋은 선택이다.

	let currentTemp; // undefined
	const targetTemp = null // null 아직 모르는 값
    currentTemp = 19.5 // 값을 할당
	currentTemp = undefined // 초기화 X , 권장하지 않음

객체(Object)

객체의 본질은 컨테이너 이다. 컨테이너의 내용물은 시간이 지나면서 바뀔 수 있지만 내용물이 바뀐다고 컨테이너가 바뀌는 것은 아니다. 즉, 여전히 같은 객체이다.
객체의 콘텐츠는 프로퍼티 또는 멤버 라고 부른다.
프로퍼티는 이름(key)와 값(value)로 구성된다. 프로퍼티 이름은 반드시 문자열 또는 심볼이여야 하고, 값은 어떤 타입이든 상관 없고 다른 객체여도 괜찮다.
프로퍼티 이름에 유효한 식별자를 써야 멤버 접근 연산자member access operator(.)를 사용할 수 있다. 프로퍼티 이름에 유요한 식별자가 아닌 이름을 쓴다면 계산된 멤버접근자computed member access operator([])를 써야한다.

	const obj = {
    	color : "red"
    }
    obj["color"] // red출력 - 유효한 식별자 문자열
	obj["not an identifier"] = 3 // not an identifier키에 3을 할당
	obj["not an identifier"] // 3 출력 - 유효한 식별자가 아닌 문자열

	const SIZE = Symbol() // 심볼
    obj[SIZE] = 8; // 심볼 SIZE키에 8을 할당
	obj[SIZE]; // 8 출력
	
	// 함수를 추가할 수 도 있다
	obj.speak = function(){return "Meow"}
	obj.speak(); // "Meow"

	// 객체에서 프로퍼티를 제거할 때
	delete obj.color	

배열(Array)

특수한 객체. 일반적인 객체와 달리 배열 콘텐츠에는 항상 순서가 있고, 키는 순차적인 숫자이다.
배열의 특징은 다음과 같다

• 배열 크기는 고정되지 않는다. 언제든 요소를 추가하거나 제거할 수 있다.
• 요소의 데이터 타입을 가리지 않는다. 문자열나 숫자만 쓸 수 있는 배열 같은 개념이 아에 없다.
• 배열의 요소는 0부터 시작한다.

	const a1 = [1,2,3,4]
    const a2 = [false, 2, 'two', null] // 다양한 형태의 값
    const a3 = [[1,2,3],[4,5,6]] // 배열안에 들어있는 배열 
    a1.length =. // 4 - 배열의 요소 숫자를 반환하는 값
    a2[1] // 2 - 대괄호 안에 요소의 인덱스 값으로 접근  
	a1[2] = 10 // [1,2,10,4] 특정 값 재할당 가능 

객체와 배열의 마지막 쉼표
요소를 나눌 때 사용하는 쉼표.
trailing comma, dangling comma, terminal comma등으로 부른다
** 마지막 쉼표는 각 프로젝트들의 규칙에 따라 표시한다. (마지막 요소에 , 를 넣거나 넣지 않거나 하는 문제들)

날짜(Date)

new Date, 자바에서 가져온거라네요.

정규표현식(RegExp)

정규표현식(regular expression)은 부속 어언에 가깝다.
나중에 더 배움

	const email = /\b[a-z0-9._-]+@[a-z_-]+(?:\.[a-z]+)+\b/;

맵과 셋

ES6에서 새로운 데이터 타입 Map, Set
'약한' 기능 ? WeakMap, WeakSet 등등
맵은 객체와 마찬가지로 키와 값을 연결하지만, 특정 상황에서 객체보다 유리한 부분이 있다.
셋은 배열과 비슷하지만 중복이 허용되지 않는다.
위크맵과 위크셋은 맵과 셋과 마찬가지로 동작하지만, 특정상황에서 성느잉 더 높아지도록 일부 기능을 제거한 버전이다.

데이터 타입 변환

알아두면 좋은 기능들.. 기억하고 있으면 좋다

	const numStr = "33.3";
	const num = Number(numStr) // 숫자로 바꿀 수 없는 문자열은 NaN을 반환
    const a = parseInt("16 vlots") // vlots 무시 (몇진수인지 지정가능, 기본은 10진수)
    const b = parseFloat("15.5 kph") // kph 무시
    //Date 객체를 숫자로 바꿀 때는 valueOf()를 사용.
    
    const n = 33.5;
	const s = n.toString() // "33.5" 문자열로 반환
    const obj = {a:'1',b:'2'}.toString() //[object, object] 
    const arr  = [1,true, "hello"].toString() // "1,true,hello"

마무리

• 자바스크립트는 문자열, 숫자, 불리언, null, undefined, 심볼 여섯 가지 원시타입과 객체타입이 있다.
• 자바스크립트의 모든 숫자는 배정도 부동소수점 숫자(더블)이다.
• 배열은 특수한 객체이며, 객체와 마찬가지로 매우 강력하고 유연한 데이터 타입이다.
• 날짜, 맵, 셋, 정규표현식 등 자주 사용할 다른 데이터 타입들은 특수한 객체타입이다.

🥲 너무 험난했다. 개인적으로 숫자 말고는 대부분 잘 알고 있는데.. (숫자를 잘 모르는 건 진수랑 비트연산자가 들어가서.. 정확하게 남들한테 설명을 못 함) 다시 정리하려니깐 내용도 많고 해서 시간에 맞춰서 정리를 못했다ㅠㅠ 다음엔 좀 더 빨리 하는 것으로