[JS] 모던 자바스크립트 Deep Dive 02

모던 자바스크립트 Deep Dive

최근 느슨해진 본업 모먼트 기강을 잡기 위해 자세를 고쳐 잡고 엉덩이에 무게감을 더했다.
알고 있는 내용이든 모르는 내용이든 주기적으로 시야 범위에 노출시켜 누군가 나에게 물어볼 때면 척수반사의 속도로 대답할 수 있길.

1. JS 변수

값을 저장하기 위한 메모리 공간 확보(allocate) - 변수 이름과 확보된 메모리 공간의 주소 연결(name binding) - 값 저장 준비

 모든 브라우저는 JS를 해석하고 실행할 수 있는 JS엔진을 내장하고 있다.(Node.js도 JS엔진 내장)
→ 브라우저 환경 or Node.js 환경에서 실행 가능  

• 할당: 변수에 값을 저장
• 참조: 변수에 저장된 값을 읽어들이는 것(변수에 저장된 값의 의미를 파악할 수 있는 변수 이름으로 가독성 ↑)
• 식별자: 메모리 상 존재하는 어떤 값을 식별할 수 있는 이름 모두

호이스팅

 소스코드 실행을 위한 준비 단계에서 엔진은 변수 선언을 포함한 모든 선언문을 찾아 먼저 실행하기에 참조에러가 아닌 undefined를 반환한다.

console.log(score); //undefined
var score = 80;
console.log(score); //80

이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것 처럼 동작하는 JS고유의 특징.

리터럴

 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법.
크롬 개발자 도구에서 표현식이 아닌 문을 사용하면 언제나 undefined를 출력한다.(값으로 평가될 수 있는지에 따라 표현식의 유무 판단)

02. 타입

 JS의 7타입

• 원시 타입: 숫자, 문자, boolean, undefined, null, symbol
• 객체 타입: 객체, 함수 배열 등

JS는 하나의 숫자 타입만으로 모든 수를 실수 처리. ex(1 === 1.0 //true)
Infinity, -Infinity, Nan도 추가로 표기 가능

• Symbol Type: 변경 불가능한 원시타입 값. 다른 값과 중복되지 않는 유일무이한 값.(충돌 위험이 없는 객체의 유일한 프로퍼티 키 만들기)

템플릿 리터럴

var template = `Template Literal`;
console.log(template) //Template Literal

멀티라인 문자열, 표현식 삽입, 테그드 템플릿 등 편리한 문자열 처리 기능 제공.
멀티라인 문자열 내 필요시 *이스케이프 시퀀스 사용.

JS에서 선언한 변수에 값이 없다는 것을 의도적으로 명시할 때 null을 사용한다.
함수가 유효한 값을 반환하지 않는 경우 명시적 null 반환.

03.제어문

If…else

if-else문은 표현식이 아님. 변수에 할당 X (삼항연산자는 표현식)

Switch-Case

break; 을 쓰지 않아 switch문을 탈출하지 않고 switch문이 끝날 때 까지 이후의 모든 case문과 default문을 실행하는 fall through 조심.

label

label state 식별자 : 가 붙은 구문.
반복문이나 블록 앞에 label을 붙여 break/continue같은 제어문에서 이름을 지정해 원하는 위치의 반복문을 정확히 제어할 수 있게 해주는 문법.

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      break outer; // outer로 표시된 바깥쪽 for문까지 통째로 종료
    }
    console.log(i, j);
  }
}

용어 정리

☑️ 변수 이름은 어디에 저장?: 변수 이름을 비롯한 모든 식별자는 실행 컨텍스트에 저장
☑️실행 컨텍스트: JS 엔진이 소스코드 평가, 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역
☑️ 변수는 선언이 아닌 할당에 의해 타입이 결정되고, 재할당에 의해 동적으로 변할 수 있다.