[자바스크립트/Javascript] 문법(2), 스코프 이해하기

cool_kim·2021년 7월 23일
0

Javascript

목록 보기
6/7
post-thumbnail

5-2 문법

5. 함수 인자

디폴트 인자

: 함수에 인자를 넘기지 않거나 undefined를 전달했을 때 적용

  • undefined받았을 때
    - arguments배열에도 값이 undefined인 원소가 추가

  • 아무것도 넘기지 않았을 때
    • arguments 배열에 원소가 하나도 없음

📍 요즘은 arguments 대신에 레스트인자( ...) 을 많이 쓰는 추세


6. try ... finally

📍 try이후에는 catch, finally 중 하나만 필수! (하지만 둘다 같이 써도 상관 없음)

🔹 finally : 어떤일이 있어도 반드시 실행되는 코드

  • finally 절에서 예외가 던져지면 이전의 실행 결과는 모두 무시 ( continue, break와 같은 비선형 제어문도 비슷하게 작동)
function foo() {
	try {
		return 42;
	}
	finally {
		console.log( "Hello" );
	}
	console.log( "실행될 리 없지!" );
}

console.log( foo() );
//Hello
//42
for (var i = 0; i<10; i++) {
	try {
		continue;
	}
	finally {
		console.log( i );
	}
}
// 0 1 2 3 4 5 6 7 8 9

⇒ continue문 때문에 console.log(i)문은 루프 순회 끝 부분에서 실행,
⇒ 그러나 i++ 로 인덱스가 수정되기 직전까지 꾸준히 실행되므로 0—9가 콘솔창에 표시

📍 finally절의 return은 그 이전에 실행된 try나 catch 절의 return을 덮어쓰는 특출한 능력이 있음.
(단, 반드시 명시적으로 return문을 써야함)


7. switch

switch 표현식과 case 표현식 간의 매치 과정은 === 알고리즘과 똑같음
⇒ 강제변환이 일어나는 동등 비교 ==를 이용할 때 논리 연산자 주의

  • 분명히 표현식의 결과가 true/false로 떨어지게 작성해야함
var a = 10;

switch (a) {
	case 1:
	case 2:
		//절대 들어오지 않음
	default:
		console.log("default");
	case 3:
		console.log("3")
	case 4:
		console.log("4");
}
//default
//3




6장 스코프

1. 컴파일러 이론

자바스크립트 : 컴파일러 언어

토크나이징/렉싱

: 문자열을 나누어 토큰이라는 의미 있는 조각으로 만드는 과정
var a = 2; 를 토큰으로 나누면
⇒ var, a, =, 2, ; 로 나뉘게 됨
(빈칸은 의미가 있느냐 없느냐에 따라 포함될 때가 있고 안될 때가 있음)

파싱

: 토큰 배열을 프로그램의 문법 구조를 반영하여 중첩 원소를 갖는 트리 형태로 바꾸는 과정

📍 AST : 파싱의 결과로 만들어진 트리

  • 최상위 노드 : 변수선언 (var a=2)
  • 자식 노드 : 확인자(a), 대입 수식
  • 대입 수식노드의 자식노드 : 숫자 리터럴 (2)

코드 생성

: AST를 컴포터에서 실행 코드로 바꾸는 과정


2. 스코프 이해하기

1) 출연진

  • 엔진 : 컴파일레이션의 시작부터 끝까지 전 과정과 자바스크립트 프로그램 실행을 책임
  • 컴파일러 : 엔진의 친구로, 파싱과 코드 생성의 모든 잡일을 함
  • 엔진의 또 다른 친구로, 선언된 모든 확인자 검색 목록을 작성하고 유지한다. 또한 엄격한 규칙을 강제하여 현재 실행 콛에서 확인자의 적용 방식을 정함


2) 앞과 뒤

var a=2에 엔진이 어떻게 접근할까?

  1. 컴파일러가 렉싱을 통해 구문을 토큰으로 쪼갬
  2. 토큰을 파싱해 트리 구조를 만듬
  3. 컴파일러가 var a를 만나면 스코프에게 변수 a가 특정한 스코프 컬렉션 안에 있는지 물음
  4. 변수 a가 이미 있다면 컴파일러는 선언 무시 그렇지 않으면 새로운 변수 a를 스코프 컬렉션 내에 선언하라고 요청
  5. a=2 대입문을 처리하기 위해 나중에 엔진이 실행할 수 있는 코드 생성
  6. 엔진이 실행하는 코드는 먼저 스코프에게 a라 부르는 변수가 현재 스코프 컬렉션 내에서 접근할 수 있는지 확인
  7. 가능하면 엔진은 변수 a를 사용, 아니면 엔진은 다른 곳을 살핌

3) 컴파일러체

  • LHS검색 : 변수가 대입 연산자의 왼쪽에 있을 때 수행
    • 값을 넣어야 하므로 변수 컨테이너 자체를 찾음
    • a = 2
  • RHS검색 : 변수가 대입 연산자의 오른쪽에 있을 때 수행
    • 특정 변수의 값을 찾는 것과 다를 바 없음
    • console.log(a)

📍 LHS검색과 RHS검색 모두 수행

function foo(a) {
	console.log( a ); //2
{
foo( a ); 
  1. 마지막 줄에서 foo()함수를 호출하는 데 RHS검색
  2. 코드 속에 내재된 a=2 가 LHS검색



3. 중첩 스코프

중첩 스코프 탐사 시 사용하는 규칙

  • 엔진은 현재 스코프에서 변수를 찾기 시작하고, 찾지 못하면 한 단계씩 올라감
  • 최상위 글로벌 스코프에 도달하면 변수를 찾았든, 못 찾았든 검색을 멈춤



4. 오류

  • RHS검색이 중첩 스코프 안 어디에서도 변수를 찾을 수 없으면 ReferenceError 발생
  • RHS검색이 변수를 찾았지만 그 값을 가지고 불가능한 일을 할 경우 TypeError 발생
  • LHS검색을 수행해 변수를 찾지 못하고 최상위 층에 도착할 때 → 새로운 변수 생성
profile
FE developer

0개의 댓글