<자바스크립트 완벽가이드> 2주차 catch up

이현정·2022년 5월 27일

북클럽 우아한스터디

우아한스터디와 함께 하는 <자바스크립트 완벽가이드> 읽기

목록 보기

4/12

🔖 읽은 범위: 3장 마무리(~p.68)

원래 이번주는 50쪽까지 읽기가 숙제였는데 스프린트 기간 동안 거의 못 읽었다. 미리 좀 읽어 놓을 걸 열심히 따라잡는 중인데 쉽지 않다.

✨ 책갈피

3.5 null, undefined

차이는 있지만 null과 undefined는 모두 값이 없다는 뜻이고 서로 바꿔 쓸 수 있을 때가 많습니다.
null: 값이 없음
undefined: 아직 값을 변수에 할당하지 않음

3.6 심벌

심벌 값을 가져올 때는 Symbol() 함수를 호출합니다. 이 함수는 절대 같은 값을 반환하지 않습니다. 같은 인자로 호출하더라도 다른 값을 반환합니다.
Symbol() 함수는 선택 사항인 인자로 문자열을 받고 고유한 심벌 값을 반환합니다. 문자열 인자를 전달하면 그 문자열은 심벌의 toString() 메서드 결과에 포함됩니다.
Symbol.for() 함수는 Symbol() 함수과 완전히 다릅니다. Symbol() 은 절대 같은 값을 반환하지 않지만, Symbol.for()는 같은 문자열로 호출했을 때 항상 같은 값을 반환합니다.

Symbol()과 toString() 메서드

	let s = Symbol("sym_x");
	s.toString()					//=> "Symbol(sym_x)"

Symbol.for()

	let s = Symbol.for("shared");
	let t = Symbol.for("shared");
	s === t;			//=> true;
   s.toString()		//=> "Symbol(shared)"
   Symbol.keyFor(t)	//=> "shared"

3.7 전역 객체

이 객체의 프로퍼티는 전역으로 정의된 식별자이며 모든 자바스크립트 프로그램에서 사용할 수 있습니다.
노드의 전역 객체에는 이름이 global인 프로퍼티가 있으며...
따라서 노드 프로그램에서는 항상 global 이란 이름으로 전역 객체를 참조할 수 있습니다.
웹 브라우저에서는 Window 객체가 모든 자바스크립트 코드의 전역 객체입니다. 이 전역 Window 객체에는 자신을 참조하는 window 프로퍼티가 있으므로 이 프로퍼티를 통해 전역 객체를 참조할 수 있습니다.
ES2020 에서 정의한 globalThis는 어떤 환경에서든 전역 객체를 참조하는 표준입니다.

3.8 불변인 기본 값과 가변인 객체 참조

기본 값은 불변입니다.
하지만 문자열에서는 그만큼 명백해 보이지는 않습니다.
객체는 가변이므로 값을 바꿀 수 있습니다.
객체를 기본 타입과 구별하기 위해 참조 타입이라 부를 떄도 있습니다.
객체나 배열의 사본을 만들기 위해서는 반드시 객체 프로퍼티나 배열 요소를 직접 복사해야 합니다.

	let a = ["a","b","c"]			// 복사할 배열
    let b = [];						// 복사해 넣을 대상
	for(let i=0; 1<a.length; i++) {	// a의 각 인덱스에 대해
      b[i] = a[i];					// a의 요소를 b에 복사합니다.
    }
	let c = Array.from(b);		// ES6에서는 Array.from()으로 배열을 복사할 수 있습니다.

3.9 타입 변환

자바스크립트가 필요에 맞게 값을 변환합니다.
변환이 성공적이지 않다면 NaN 으로 바꿉니다.
아래 표는 자바스크립트가 값의 타입을 어떻게 변환하는지 정리:

명시적 변환: 때때로 직접 변환해야 할 때도 있습니다
1) Boolean(), Number(), String() 함수 사용
2) 연산자 사용:

	x + ""						// => String(x)
	+x							// => Number(x)
   x-0							// => Number(x)
   !!x							// => Boolean(x): !가 두 개 입니다.

"숫자 -> 문자열" 타입 변환 3가지 방법:
1) toFixed()
2) toExponential()
3) toPrecision()

이 3가지 외에도 Intl.NumberFormat이 있지만 좀 더 후에 다룬다고 한다.

"문자열 -> 숫자" 타입 변환 2가지 방법:
1) Number()
2) parseInt(), parseFloat()

✅ parseInt() 와 parseFloat() 의 차이점은?

3.10 변수 선언과 할당

변수라는 용어는 새로운 값을 할당할 수 있음을 암시합니다.
값에 이름을 영구히 할당할 때는 변수 대신 상수라고 부릅니다.
let:
변수를 선언할 때 초깃값을 할당하는 것이 좋은 프로그래밍 습관입니다.
let문에서 변수에 초깃값을 할당하지 않으면 값을 할당할 때까지 undefined로 남아있습니다.

-const:
상수를 선언할 때는 const를 사용합니다.
🌟 const는 let과 거의 비슷하지만, 선언할 때 반드시 값을 할당해 초기화해야 한다는 점이 다릅니다.
반드시 지켜야 하는 것은 아니지만, 상수를 선언할 때는 전부 대문자를 써서 변수와 구별하는 관습이 있습니다.

	const H0 = 74;
	const C = 299792.458;
	const AU = 1.3565E5;

for 루프에서는 보통 let을 사용한다. const 를 사용하기도 하는데, 이 때는 루프 바디에서 새 값을 할당하지 않는 경우이다.

	for(const datum of data) console.log(datum);

변수와 상수의 스코프(scope):
프로그램 소스 코드에서 해당 변수가 정의된 영역입니다.
let 과 const로 선언한 변수와 상수는 블록 스코프를 가지는데, 즉, let이나 const 문이 존재하는 블록 안에서만 해당 변수와 상수가 유효하다는 뜻이다.

전역 스코프: 전역 변수(or상수)의 스코프. 선언이 어떤 코드 블록에도 속하지 않고 최상위 레벨에 있을 경우의 스코프.노드와 모듈에서는 그 변수가 정의된 파일이 전역 스코프, 전통적인 자스의 전역 변수의 스코프는 그 변수가 정의된 HTML 문서이다.

반복 선언:
피해야 하는 일이긴 하지만, 중첩된 스코프에서 같은 이름의 변수를 선언하는 것은 가능하다.
선언과 타입:
자바스크립트의 변수 선언에서 타입을 지정하지는 않습니다.

let i  10;
i = "ten";

var: var의 문법은 let과 똑같습니다.
🌟 var 과 let 의 차이:
1) var 로 선언한 변수는 블록 스코프를 갖지 않는다.
2) var 로 선언된 전역 변수는 전역 객체의 프로퍼티로 존재한다. 즉, globalThis(3.7절 참조) 로 참조할 수 있다.
- 주의할게 delete 연산자로 삭제할 수는 없다. 그래서 좀 특이.
  3) var은 같은 변수를 몇 번이고 선언할 수 있다.
- var 블록 스코프가 아니라 함수 스코프를 가지므로,
- 함수스코프를 따른다? => 새로운 함수가 생성될때마다 새로운 스코프가 발생한다.
  4) var 로 변수를 선언하면 이 선언문은 함수의 맨 위로 끌어올려진다(호이스팅); 즉, 초기화 전에 사용한다고 해서 에러가 발생하지는 않는다.
분해 할당(destructing assignment):
선언과 할당을 합친 일종의 복합 문법

배열의 분해 할당

	let [x,y] = [1,2];
	[x,y] = [x+1,y+2];
	[x,y] = [y,x];
	[x,y]				//=> [3,2]

	let [x, ...y] = [1,2,3,4];		// y == [2,3,4]

객체의 분해 할당

	const { sin, cos, tan } = Math; // const sin=Math.sin, cos=Math.cos, tan=Math.tan 과 같다.

	const { cos: cosine, tan: tangent } = Math; // const cosine = Math.cos, tangent = Math.tan 과 같다.

❓ 궁금점

javascript에서 변수는 3단계에 걸쳐서 생성된다.
선언 단계(declaration phase)
변수를 실행 컨텍스트의 변수 객체에 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다.
초기화 단계(initialization phase)
변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다. 이 단계에서 변수는 undefined로 초기화된다.
할당 단계(assignment phase)
undefined로 초기화된 변수에 실제 값을 할당한다.
var 키워드를 사용한 변수 선언은 "선언"과 "초기화"가 동시에 이루어진다.
모던 자바스크립트 Deep Dive 에서는 var 뿐 아니라 let, const, function, function*, class 키워드를 사용해서 "선언"하는 모든 식별자는 호이스팅된다고 한다.(p.43)
선언과 동시에 초기화 단계가 진행되는 var 키워드 변수는 따라서 선언 전에 런타임을 돌려도 undefined 라는 결과가 나오지만, let 또는 const 키워드 변수는 선언 전에 런타임을 돌리면 선언만 되고 초기화는 안 된 상태이기 때문에 ReferenceError 가 나게 된다.