Console 객체

브라우저의 디버깅 콘설에 접근할 수 있는 메서드 제공.
브라우징 문맥에서는 Window, 워커에서는 WorkerGlobalScope 속성으로 포함

var, let, const

var

• 함수 레벨 스코프 : 오로지 함수의 코드 블록만을 지역 스코프로 인정, 코드 블록 내에서 선언해도 모두 전역 변수가 된다.
• 중복 선언과 재할당 가능

let

• 블록 레벨 스코프 : 모든 코드블록 ( if, for, while, try/catch문 ) 을 지역 스코프로 인정
• 중복 선언은 불가, 재할당 가능

const

• 블록레벨 스코프 : 모든 코드블록 ( if, for, while, try/catch문 ) 을 지역 스코프로 인정
• 중복 선언과 재할당 모두 불가

호이스팅

변수 선언문이 선두로 끌어 올려진 것처럼 동작하는 것

변수 호이스팅

var

• 변수 호이스팅에 의해 변수 선언문이 선두로 끌어 올려진 것처럼 동작
• “선언 단계”와 “초기화 단계”가 동시에 진행
• var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있다.

// 이 시점에는 변수 호이스팅에 의해 이미 foo 변수가 선언되었다(1. 선언 단계)
// 변수 foo는 undefined로 초기화된다. (2. 초기화 단계)
console.log(foo); // undefined

// 변수에 값을 할당(3. 할당 단계)
foo = 123;

console.log(foo); // 123

// 변수 선언은 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 실행된다.
var foo;

let / const

• 변수 호이스팅이 발생하지 않는 것 처럼 동작
• “선언 단계”와 “초기화 단계”가 분리되어 진행
• 선언은 런타임 이전에 먼저 실행되지만 초기화는 변수 선언문에 도달했을 때 실행.
• 스코프의 시작 지점 ~ 초기화 전까지 변수를 참조할 수 없는(referenceError) 구간 ⇒ 일시적 사각지대 TDZ

// 런타임 이전에 선언 단계가 실행된다. 아직 변수가 초기화되지 않았다.
// 초기화 이전의 일시적 사각 지대에서는 변수를 참조할 수 없다.
console.log(foo); // ReferenceError: foo is not defined

let foo; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

결론

🗨️ 권장 가이드라인

• ES6 를 사용한다면 var 키워드는 사용하지 않는다.
• 재할당이 필요한 경우에 한정해 let 키워드를 사용한다. 이때 변수의 스코프는 최대한 좁게 만든다.
• 변경이 발생하지 않고 읽기 전용으로 사용하는(재할당이 필요 없는 상수)원시 값과 객체에는 const 키워드를 사용한다. const 키워드는 재할당을 금지하므로 var, let 키워드보다 안전하다.

함수 호이스팅

함수 선언문

함수 선언문은 코드가 실행되기 전에 메모리에 미리 로드
=> 함수가 코드에서 선언되기 전에 호출되더라도 오류가 발생 x

// 함수 호출이 함수 선언문보다 위에 있음
greet(); // 'Hello, world!' 출력

function greet() {
 console.log('Hello, world!');
}

함수 표현식

변수에 함수를 할당하는 방식으로, 선언부가 호이스팅되더라도 할당된 함수 자체는 호이스팅되지 x

// 함수 표현식을 사용한 경우
sayHello(); // ReferenceError: Cannot access 'sayHello' before initialization

let sayHello = function() {
  console.log('Hello!');
};

• 함수 선언문: 선언 위치와 상관없이 코드 실행 전에 메모리에 등록되어 호출 가능.
• 함수 표현식: 변수 호이스팅만 발생하고, 함수 할당이 실행 시점에 이루어짐.

자바스크립트 타입

• 원시 타입 : Boolean, String, Number, Null, Undefined, Symbol
• 참조 타입 : Object, Array

기본적으로 원시 타입 값을 저장하기 위해 Call Stack 메모리 공간을 사용하지만,
참조 타입의 경우 Heap 이라는 별도의 메모리 공간을 사용한다.
이 경우에 Call Stack 은 개체 및 배열 값이 아닌 Heap 메모리 참조 ID를 값으로 저장

동적 타입 언어

JS는 미리 선언한 타입의 값만 할당 할 수 있는 것이 아닌,
어떠한 데이터 타입의 값이라도 자유롭게 할당할 수 있다.

• 값을 할당하는 시점에 변수의 타입이 동적으로 결정되고 타입을 언제든지 자유롭게 변경할 수 있다.
• 선언이 아닌 할당에 의해 타입이 결정(타입 추론) 된다.
• 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다. ⇒ 동적 타이핑
• 변수는 타입을 가지지 않지만, 값은 타입을 갖는다. 변수는 값에 묶여있는 값에 대한 별명일뿐이다.

타입 변환

• 명시적 타입변환 / 타입 캐스팅 : 개발자가 의도적으로 값의 타입을 변환하는 것
• 암묵적 타입변환 / 타입 강제변환 : 개발자의 의도와 상관없이 표현식을 평가하는 도중에 JS엔진에 의해 암묵적으로 타입이 자동 변환되는 것

=> 둘 다 기존 원시 값을 직접 변경하는 것은 아니다.
=> 타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다.

암묵적 타입변환

문자열 타입으로 변환

문자열 연결 연산자 + 가 활용된 표현식을 평가하기 위해서 피연산자를 모두 문자열로 암묵적 타입변환

// 숫자 타입
0 + ''              // "0"
  -0 + ''             // "0"
1+ ''               // "1"
  -1 + ''             // "-1"
NaN + ''            // "NaN"
Infinity + ''       // "Infinity"
  -Infinity + ''      // "-Infinity"

// boolean 타입
true + ''           // "true"
false + ''          // "false"

// null 타입
null + ''           // "null"

// undefined 타입
undefined + ''      // "undefined"

// 심벌 타입
(Symbol()) + ''     // "TypeError"

// 객체 타입
({}) + ''           // "[object Object]"
Math + ''           // "[object Math]"
[] + ''             // ""
[10, 20] + ''       // "10, 20"
(function(){}) + '' // "function()"
Array + ''          // "function Array() {[native code]}"

숫자 타입으로 변환

산술 연산자 표현식을 평가하기 위해 산술 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환

// 숫자 타입
+''               // 0
+'0'              // 0
+'1'              // 1
+'string'         //  NaN

// boolean 타입
+true             //  1
+false            //  0

// null 타입
+null             //  0

// undefined 타입
+undefined        //  NaN

// 심벌 타입
+Symbol()         //  TypeError

// 객체 타입
+{}               //  NaN
+[]               //  0
+[10, 20]         //  NaN
+(function(){})   //  NaN

객체와 빈 배열이 아닌 배열, undefined는 변환되지 않아 NaN이 된다는 것에 주의

불리언 타입으로 변환

조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환

if(' ') console.log('1'); //빈문자열은 Falsy한 값
if(true) console.log('2');
if(0) console.log('3');		//0은 Falsy한 값
if('str') console.log('4'); //문자열은 Truthy한 값
if(null) console.log('5');	//null은 Falsy한 값

💡 false로 평가되는 Falsy 값

• false
• undefined
• null
• 0, -0
• NaN
• ‘ ‘ (빈 문자열)

⇒ Falsy 값 외의 모든 값은 모두 true로 평가되는 Truthy 값이다.

명시적 타입 변환

문자열 타입으로 변환

1. String 생성자 함수를 new연산자 없이 호출

//숫자->문자열타입
String(1);		//-> '1'
String(NaN);		//-> 'NaN'

//불리언 타입 -> 문자열타입
String(true) 		//->'true'
String(false)		//->'false'

2. Object.prototype.toString 메서드 사용 -> toString()

  //숫자->문자열타입
  (1).toString();	//-> '1'
  (NaN).toString();	//-> 'NaN'

  //불리언 -> 문자열타입
  (true).toString();	//-> 'true'
  (false).toString();	//-> 'false'

3. +(문자열 연결 연산자) 이용

  //숫자 -> 문자열 타입
  1 + ''; 	//-> '1'
  //불리언 -> 문자열 타입
  true + '' //'true'

불리언 타입으로 변환

1. Boolean 생성자 함수를 new 연산자 없이 호출

 //문자열 -> 불리언
  Boolean('x');			//true
  Boolean(' ');			//false
  Boolean('false');		//true

2. ! 부정 논리 연산자를 두번 사용

  //문자열 -> 불리언
  !!'x';			//true
  !!' ';			//false
    //숫자 -> 불리언
  !!0;				//false
  !!1;				//true
  !!NaN;			//false
  !!Infinity		//true

자바스크립트 연산 및 Math Object

Template literals

백틱 ``` 을 사용하여 문자열을 표현한 것
줄바꿈을 쉽게할 수 있고, 내부에 표현식을 포함할 수 있게 된다.

Loops