효과 적 인 자 바스 크 립 트 항목 12

이 시 리 즈 는 Effective JavaScript 의 독서 노트 입 니 다.
 
자 바스 크 립 트 에는 Block Scoping 이 없고 Function Scoping 만 있 습 니 다.
따라서 하나의 Block 에서 변 수 를 정의 하면 이 변 수 는 이 Block 이 속 하 는 Function 에 정 의 된 것 과 같 습 니 다. 예 를 들 어:

function isWinner(player, others) {
	var highest = 0;
	for (var i = 0, n = others.length; i < n; i++) {
		var player = others[i];
		if (player.score > highest) {
			highest = player.score;
		}
	}
	return player.score > highest;
}

위의 코드 에서 for 순환 에서 변수 player 를 설명 합 니 다. Variable Hoisting 때문에 이 변 수 는 실제 적 으로 다음 과 같이 설명 되 었 습 니 다.

function isWinner(player, others) {
	var player;
	var highest = 0;
	for (var i = 0, n = others.length; i < n; i++) {
		<span style="color:#ff0000;">player = others[i];</span>
		if (player.score > highest) {
			highest = player.score;
		}
	}
	return player.score > highest;
}

이 때문에 function 에 들 어 오 는 player 매개 변 수 는 덮어 졌 습 니 다.프로그램 은 예상 한 행동 에 따라 실 행 될 수 없습니다.
 
자 바스 크 립 트 에서 변수 에 대한 성명 은 실제로 두 부분 을 포함 합 니 다.
성명 자체 할당  
JavaScript 는 Variable Hoisting 을 통 해 첫 번 째 부분, 즉 성명 의 부분 을 변 수 를 포함 하 는 function 의 머리 에 넣 습 니 다.
 
다음 예 에서:

function trimSections(header, body, footer) {
	for (var i = 0, n = header.length; i < n; i++) {
		header[i] = header[i].trim();
	}
	for (var i = 0, n = body.length; i < n; i++) {
		body[i] = body[i].trim();
	}
	for (var i = 0, n = footer.length; i < n; i++) {
		footer[i] = footer[i].trim();
	}
}

Variable Hoisting 때문에 i 와 n 은 function 의 시작 부분 에 놓 이기 때문에 실제 적 으로 두 개의 변수 만 설명 합 니 다. for 순환 에서 이들 에 게 값 을 부여 합 니 다. 실제 행 위 는 이 렇 습 니 다.

function trimSections(header, body, footer) {
	var i, n;
	for (i = 0, n = header.length; i < n; i++) {
		header[i] = header[i].trim();
	}
	for (i = 0, n = body.length; i < n; i++) {
		body[i] = body[i].trim();
	}
	for (i = 0, n = footer.length; i < n; i++) {
		footer[i] = footer[i].trim();
	}
}

Variable Hoisting 의 존재 로 인해 일부 프로그래머 들 은 변 수 를 function 의 시작 부분 에 정의 하 는 것 을 선 호 하 는데 이것 은 수 동 으로 Hoisting 을 완성 한 것 과 같다.이렇게 하 는 목적 은 나 쁜 의 미 를 피하 고 코드 를 더욱 선명 하 게 하기 위해 서 이다.
 
단, try... catch 구문 에서 catch block 의 매개 변 수 는 이 block 에 연 결 됩 니 다.

function test() {
	var x = "var", result = [];
	result.push(x);
	try {
		throw "exception";
	} catch (x) {
		x = "catch";
	}
	result.push(x);
	return result;
}
test(); // ["var", "var"]

중점:
Block 에서 설명 하 는 변 수 는 함수 의 시작 부분 에 암시 적 으로 호 이스트 됩 니 다.(위 에서 언급 한 catch block 제외) 하나의 function 에서 하나의 변 수 를 여러 번 설명 하면 결국 하나의 변수 만 설명 합 니 다.
잘못된 의 미 를 피하 기 위해 서 변 수 를 function 의 시작 부분 에 설명 하 는 것 을 고려 합 니 다.