웹개발 복습 정리16 : Scope, 고차함수, this, try catch

Kimhojin_Zeno·2023년 1월 5일

catch scope this try 강의 고차함수

웹개발 복습 정리

목록 보기

16/30

섹션 21 : function2

Scope

범위.

범위는 ‘변수 가시성’ Variable visibility를 참조한다.

변수가 선언된 위치와 변수에 접근 가능한지 등을 구분한다.

기본적으로 변수를 어느 부분에 정의하느냐가 엑세스 지점을 결정한다.

Function Scope

함수 범위

function collectEggs() {
	let totalEggs = 6;
}
console.log(totalEggs); // 에러가 난다.

왜냐면 totalEggs는 collectEggs함수 안에서 선언되었기 때문. 밖에서는 엑세스 할수 없다.

totalEggs를 함수 밖에서 먼저 선언하고 함수 안에서 수정하도록 하면 엑세스 가능하다. → 이걸 ‘전역 변수’라고 한다.

반대로 함수 안에 선언된 변수는 ‘내부 변수’

let bird = 'mandarin duck';
function birdWatch() {
	let bird = 'golden pheasant';
	bird; // 'golden pheasant'
}
bird; // 'mandarin duck'

Block Scope

블록 범위

let radius = 8;
if(radius > 0) {
	const PI = 3.14159;
	let msg = 'Hi'
}
console.log(radius); // 8
console.log(PI); // error

블록이란 저 중괄호 사이에 있는 부분을 말한다

블록은 조건문과 루프문에 많이 들어간다.

함수 범위와 비슷하지만 함수가 아닌 조건문 등 뒤의 중괄호.

여기서 let이나 const가 아닌 var를 사용하면 var키워드는 변수 범위가 함수로 지정되지만 블록으로는 지정되지 않기 때문에 if문 밖에서도 var로 선언한 변수에 접근이 가능하다. var는 이제 사용하지 않는다!

Lexical Scope

렉시컬 범위

function bankRobbery() {
	const heroes = ['spiderman', 'wolverine']
	function cryForHelp() {
		function inner() {
			for(let hero of heroes) {
					console.log(`please help, ${hero}`)
			}
		}
		inner();
	}
	cryForHelp();
}

함수가 중첩되어 있을때

부모 함수의 안에 중첩된 내부 함수는 해당 외부 함수의 범위 내에서 정의된 변수에 엑세스 할 수 있다.

중첩된 함수나 내부 함수는 상위 몇 레벨 위에 있든 상관 없이 부모 함수나 조부모 함수 등이 엑세스 하는 동일한 항목에 엑세스 할 수 있다.

하지만 역방향으로는 성립하지 않는다. 즉 부모 함수가 실행될때 자식 함수 안에 선언된 변수에는 접근할수 없다.

Function Expressions

함수 표현식.

function square(num) {
	return num * num;
}  // 요렇게 하던걸

const square = function (num) {
	return num * nun;
}  // 이렇게 할 수 있다.

변수 안에 함수를 저장하는 방식이다.

square라는 변수를 만들고 그 뒤에 함수를 만드는데 함수에는 이름이 없다.

함수를 변수 안에 저장한다.

똑같이 함수를 사용할 수 있지만 차이점이라면 종전 방식은 함수의 이름이 있다. 하지만 함수 표현식으로 만들면 변수의 이름이 있는것이지 함수에는 이름이 없다.

기본적으로 Javascript에서 함수는 값이다. 숫자나 배열, 객체를 저장하고 전달하듯이 함수도 저장하고 전달할 수 있다.

이렇게 함수를 변수에 저장하는 방식으로 함수를 인수로 전달하거나 함수를 반환값으로 반환할 수 있다.

Higher order function

고차 함수

고차 함수란 다른 함수와 함께 작동하거나 다른 함수에서 작동하는 함수를 말함.

다른 함수를 인수로 받거나
함수를 반환한다

두가지 중 하나이거나 둘 다 해당되면 고차함수다.

function callTwice(func) {
	func();
	func();
}

function laugh() {
	console.log('haha');
}

callTwice(laugh)
// 'haha'
// 'haha'

함수를 인수로 받아서 두번 실행되었다. 고차함수.

함수가 일반적인 값으로 취급되어 함수가 인수로 전달되거나 또는 반환될 수 있다.

function makeBetweenFunc(min, max) {
	return function (num) {
		return num >= min && num <= max;
	}
}

const isChild = makeBetwwenFunc(0, 18);

isChild(40); // false
isChild(7); // true

이렇게 함수를 반환하게 할 수 있다.

Methods

메서드는 객체에 종속된 특성으로 함수에 포함되는 개념이다.

메서드 이름 앞에 점을 찍어서 사용한다.

모든 메서드는 함수이지만 모든 함수가 메서드인건 아니다.

메서드를 객체에 추가할 수 있다.

콘솔창에 Math를 치면 Math객체가 쭈욱 나온다.

Javascript에서 배열은 객체이고 문자열도 객체이다.

메서드는 객체에 특성으로 추가된 함수이다.

속기법으로 이렇게 쓸 수 있다.

const math = {
	blah: 'hi',
	add(x, y) {
		return x + y;
	},
	multiply(x, y) {
		return x * y;
	}
}
math.add(50, 60) //110

함수 이름을 넣고 콜론을 쓰는 대신에 바로 특성 이름 쓰고 소괄호, 중괄호로 표현한다.

this

keyword this to access other properties on the same object.

this키워드는 같은 객체에 있는 다른 프로퍼티에 접근하게 해준다.

const person = {
	first: 'rober',
	last: 'haj',
	fullName() {
		return `${this.first} ${this.last}`
	}
}
person.fullName(); // "rober haj"
person.last = "Plant";
person.fullName(); // "rober Plant"

그러나 this는 항상 같은 지점을 가리키지 않는다. 사용된 호출 컨텍스트에 따라 값이 달라진다.

const cat = {
	name: 'Blue Steels',
	color: 'grey'
	meow() {
		console.log(`${this.name} says meoWW`);
	}
}

cat.meow(); // "Blue Steels says meoWW"

const meow2 = cat.meow;

meow2(); // "says meoWW"

똑같은 함수를 실행시켰는데 cat.meow()를 했을땐 this가 “Blue Steels”을 가리키는데 새로운 변수 meow2에 선언하고 사용하니 “Blue Steels”에 접근하지 못한다.

호출 컨텍스트가 다르기 때문.

cat.meow() 를 썼을땐 괄호 안에 this가 cat을 가리킨다. 그래서 cat.name에 접근이 됐던 것이다.

meow2()를 썼을때 괄호 안에 this는 아무것도 없는- 아무것도 없지 않다. window객체에 접근한 것이다.

window객체는 javascript의 내장 객체이다. 최상위 객체. 기본적인 alert같은 함수들이 다 속해있다. 우리가 새로운 함수를 선언하면 window객체에 속하게 된다.

alert를 사용할때 window.alert라고 해도 된다. 아무도 그렇게 사용하진 않지만.

meow2()를 사용하면 meow2왼쪽에 아무것도 없어 보이지만 사실 window.가 생략된 것이다. 그래서 괄호안에 this가 window객체를 가리킨 것이다.

Try / Catch

둘이 함께 일하며 Javascript의 오류 및 예외를 처리해준다.

오류를 잡아내서 코드 실행이 정지되거나 중단되지 않도록 하는 역할을 한다.

일반적으로 오류가 날때 콘솔창을 보면 ‘Uncaught ReferenceError’가 뜨는데 uncaught. catch의 과거형. catch되지 않았다는 뜻이다.

try {
	hello.toUpperCase();
} catch {
		console.log("error")
}

에러가 날것 같은 구문을 try 뒤 중괄호에 넣어주고, 그 다음 catch 뒤 중괄호에 실제 에러가 났을때 어떻게 할 것인지 넣어준다.

에러는 다양한 원인으로 일어난다. 다운되거나 api요청이 사라지거나 입장이 거부되거나 할 수 있다. 그럴때 try와 catch를 써서 에러 핸들링을 한다.

function yell(msg) {
	try {
		console.log(msg.toUpperCase());
	} catch (e) {
			console.log("please pass a string!")
	}
}

msg에 문자열을 넣으면 대문자로 변환되어서 나오겠지만 만약 숫자를 넣으면 에러가 나버린다. try와 catch를 써서 에러가 나면 “please pass a string”이 뜨도록 할 수 있다.

에러가 나서 다운되지 않고 false든 null이든 뭔가가 반환된다는게 중요.

비동기 함수를 쓸때 많이 쓴다.

express와 node에서는 항상 try와 catch를 쓴다.

Kimhojin_Zeno

Developer

이전 포스트

웹개발 복습 정리 15 : function

다음 포스트

웹개발 복습 정리16 : Scope, 고차함수, this, try catch