함수 범위(Function Scope)
// 예시 1
function helpMe(){
les msg = “I’m on Fire!”;
msg;
}
msg; // NOT DEFINED // 예시 2
let bird = ‘참새’;
function birdWatch(){
let bird = ‘비둘기’;
bird; // 비둘기
}
birdWatch(); // 비둘기
bird; // 참새 함수 안에서 선언하는 변수는 오직 함수 안에서만 존재한다.
함수 내외 같은 이름으로 정의된 변수가 있을 경우,
함수 내에서는 무조건 함수 내의 변수를 참조한다.
블록 범위(Block Scope)
조건문 뒤에부터 나오는, 중괄호의 {내용물들}을 의미한다.
함수 자리에 함수 대신 블록이 들어간다.
변수가 블록 안에서 선언된다면 해당 변수들은 그 블록의 중괄호 또는 중괄호 두개 사이의 범위에서만 존재한다.
블록 범위도 함수 범위랑 같은 개념인데, 함수가 아닌 조건문과 루프 같은 것이 나온 것 뿐이다.
* var 키워드는 let, const와 다르게 블록 범위에 접근할 수 있다. // 예시 1
let radius = 8;
if(radius > 0){
const PI = 3.14159; // PI는 오직 중괄호 사이에서만 존재한다.
let circ = 2 * PI * radius; // circ도 오직 중괄호 사이에서만 존재한다.
}
console.log(radius); // 8
console.log(PI); // NOT DEFINED
console.log(circ); // NOT DEFINED렉시컬 범위(Lexical Scope)
부모 함수의 안에 중첩된 내부함수는, 해당 외부 함수의 범위에 또는 범위 내에서 정의된 변수에 접근할 수 있다. //예시 1 :
//내부함수(inner)는 외부함수(outer)의 변수(heroes)에 접근할 수 있다.
function outer(){
const heroes = [‘IRONMAN’, ‘SPIDERMAN’, ‘BLACK PANTHER’];
function inner(){
for(let hero of heroes){
console.log(`PLEASE HELP ME, ${hero}`);
}
}
inner(); // PLEASE HELP ME, IRONMAN PLEASE HELP ME, SPIDERMAN PLEASE HELP ME, BLACK PANTHER
} 중첩된 함수나 내부함수는 부모함수나 조부모함수 등이 접근하는 모든 항목에 동일하게 접근할 수 있다.함수 표현식(Function Expression)
함수를 정의하는 새로운 방식 : “변수 안에 함수”를 저장하는 것(함수의 이름은 따로 짓지 않는다)
기본적으로 Javascript에서는 함수를 값으로 취급한다.(배열, 객체와 같은..)
사용하면 좋은 점
함수를 인수로 전달할 수 있다.
숫자를 반환하듯이 함수를 변환 값으로 반환할 수 있다. // 예시 1
const square = function(num){
return num*num;
}
square(7); // 49고차 함수(One of the Higher Older Functions)
다른 함수와 함께 작동하거나 또는 다른 함수에서 작동하는 함수를 고급스럽게 표현한 것.
다른 함수를 인수로 받아서 그 인수로 어떤 작업을 하는 함수
함수를 반환할 수 있는 함수 // 예시 1 : 함수를 인수로 받는 예시
function callTwice(func){
func();
func();
}
function greet(){
console.log(“HelloWorld!”);
}
callTwice(greet); // HelloWorld! HelloWorld! 함수를 인수로 받을 때, 인수함수의 인수가 없는 이유는, 값이 아닌 함수를 원하기 때문 // 예시 2 : 함수 내에서 함수를 값으로 반환하기
function winOrLoseFunc(){
const rand = Math.random();
if(rand > 0.5){
return function(){
console.log(‘Congrats! You Win!’)
}
}
else {
return function(){
alert(’Sorry…You Lose…’);
}
} // 예시 3: 팩토리 함수 만들기 - 입력 값에 따라 함수들을 생성후 반환하는 함수
function makeBetweenFunc(min, max){
return function(num){
return num >= min && num <= max;
}
}
const isChild = makeBetweenFunc(0,18);
isChild(30); // FALSE
isChild(7); // TRUE
const isAdult = makeBetweenFunc(19,64);
isAdult(18); // FALSE
isAdult(20); // TRUE 풀이) 최소최대값을 인자로 받는 makeBetween함수가 생성되면,
num을 인자로 받는 함수를 반환하고 num을 인자로 받는 함수는 최소최대값을 num과 비교해 값을 반환한다.METHODS
메서드와 함수
메서드는 객체에 종속된 특성으로 함수에 포함되는 개념이다.
메서드 이름 앞에 . 을 찍어 사용한다.
모든 메서드는 함수이지만, “모든 함수가 메서드인 것은 아니다.”
그래서 메서드를 객체에 추가할 수 있다. // 예시 1 : 매서드 - 객체에 속성으로 추가된 함수
const math = {
multiply : function(x, y){
return x*y;
},
devide : function(x, y){
return x/y;
},
square : function(x){
return x*x
}
}
math.square(30); // 900 // 예시 2 : 매서드 - 객체에 속성으로 추가된 함수를 단축시키기
//(함수를 객체의 값으로 쓸 때, 키-값 구분없이 )(ShortHand)
const math = {
multiply(x, y){
return x*y;
},
devide(x, y){
return x/y;
},
square(x){
return x*x
},
score : 90
}
math.square(30); // 900
math.scroe; // 90THIS 키워드
메서드에 있는 객체를 가리킬 때(접근할 때) this 키워드를 사용한다.
객체에 여러가지 특성이 있거나 정보와 메서드가 다양하고 여러 기능이 있을 때 사용한다. // 예시 1 : this 키워드가 person 객체를 가리킨다.
const person = {
first : ‘WookJin’
last : ‘Noh’
fullName( ){
console.log(`${this.first} ${this.last}` 입니다.);
}
}
person.fullName(); // WookJIn Noh 입니다.
person.last = ‘Kim’
person.fullName(); // WookJIn Kim 입니다. this 키워드는 항상 사용자가 입력한 객체만을 가리키지 않는다.
this값은 바뀔 수 있다. 사용자 함수의 호출 방법에 따라 달라진다. const person2 = person.fullName;
person2(); // 입니다.
// this가 person 객체를 가리키지 않아 키-값이 사라졌다. person2에 person 함수를 저장했는데도 불구하고 this 키워드가 접근이 안된 이유
그 이유는 같은 함수이지만 다른 방식으로 호출했기 때문이다.
this는 person이라는 객체를 가리키지 않는다.
console.log(this) 를 통해 this의 실체를 보면 파악할 수 있다.
앞서 person()에 console.log(this)를 쓰면 this가 가리키는 건 person()이라는 객체라는 것을 알 수 있다.
하지만 person2()를 실행하면 this가 윈도우 객체를 가리키는 모습을 볼 수 있다.
person.fullName()은 점 왼쪽에 person을 가리키지만
person2()는 왼쪽에 아무것도 가리키지 않는다. 사실 person2()는 왼쪽에 윈도우 객체가 있다. 이 윈도우 객체를 this가 가리킨다고 생각하면 된다.
즉, this가 윈도우 객체를 가리키고 이는 this 키워드에 대한 기본값이 된다. this가 텅 빈 값(객체)을 가리키고 있는 것이다.
때문에 person2를 호출했을 때 앞선 person의 this가 가리켰던 값이 나오지 않는 것이다…
* 윈도우 객체란? 자바스크립트의 최상위 객체. 윈도우는 주요 객체라고 볼 수 있는데 윈도우 안에 모든 것이 있기 때문이다.
콘솔에 window를 입력시 alert 함수를 포함해서 모든 함수를 볼 수 있다. 이는 전부 윈도우 객체 안에 있는 것이다. // 예시 3 :
//this 활용 - this를 통해 객체 내의 값을 객체 내부에서 변경시킬 수 있다!
const hen = {
name : 'Helen',
eggCount : 0,
layAnEgg(){
this.eggCount = this.eggCount+1;
return 'EGG';
}
}
hen.eggCount; // 0
hen.layAnEgg(); // ‘EGG’
hen.layAnEgg(); // ‘EGG’
hen.eggCount; // 2Try&Catch 사용하기
두 문은 항상 같이 사용되며, Js의 오류 및 예외를 처리한다.
특히 오류를 잡아내서 코드 실행이 정지되거나 중단되지 않도록 하는 역할을 한다.
catch는 try문 안에서 예외나 오류가 났을 때 실행하는 코드 블록 try {
오류가 실행될 것으로 예상되는 코드
} catch {
console.log(‘ERROR’); // 코드를 중단시키지 않고 우회로 에러가 났음을 알 수 있다.
}
99 ~ 100