자바스크립트 관련
- 표기방법에 따른 함수 분류
- 익명함수 :
function(){} - 선언적 함수 :
function 함수명(){}
- 사용방법에 따른 분류
- 재귀함수 :
function 함수명(){ 함수명 } - 콜백함수 :
function 함수명(a,b,c) {
let 함수명2 = 내용;
c(sum); // 본인의 함수 실행callback 함수
- 다른 함수의 매개변수로 사용되거나, event로 특정 시점에 호출되는 함수
(비동기적으로 작동될 때 사용)
// 콜백함수
function avgCalc(a,b,c) {
let sum = a + b;
c(sum); // 함수 실행
}
// 익명함수로 콜백함수 호출
avgCalc(10,30,function(num){
let avg = num/2;
console.log(avg);
});
// arrow function 으로 콜백함수 호출
avgCalc(20,40,(num) => {
let avg = num/2;
console.log(avg);
});
// 선언적 함수로 콜백함수 부르기
function avg(num) {
let avg = num/2;
console.log(avg);
}
avgCalc(50,100,avg)중첩함수
- 변수 선언 이름과 동일한 함수명을 사용할 수 없고, 변수로 사용됨
중첩함수는 외부에서 내부함수를 호출할 수 없으며, 내부에서만 호출 가능함
예외
- 클로저(closure) 함수(폐쇄)
- 함수를 중첩으로 사용하여 외부와 단절 시킴
return을 사용하여 외부에 함수를 노출, 외부에서 매개 변수 등을 통하여 내부함수에 접근할 수 있음- 함수를 만들어내는 공장 (생성자를 통해서 만들 경우)
- 추후
class와 유사 : 객체의 형태를 제공 -> 내부 함수가 그 역할을 함
클로저(closure) 함수
- 내부함수를
return을 통해 외부로 노출하는 것,new 외부함수명()을 선언해주어야 함
function 외부함수명() {
let outerText = '외부 테스트';
function 내부함수명(a) {
let innerText = '내부 테스트'
console.log(`${outerText},${a}`);
}
return 내부함수명; // 내부함수를 return을 통해 외부로 노출(closure 함수)
}
let closureFunc = new 외부함수명();
closureFunc('안녕하세요 전 크로저에요!!'); // return으로 받은 내부함수
console.log(closureFunc);
class
-
여러 클래스를 한번에 선언하여 쉽게 불러올 수 있는 함수 문법
-
let이 아닌,this.형식으로 선언 및 할당
class Test {
constructor(num) {
this.num = num;
}
popupFunc(){
alert('this is popup')
}
}
let testBox = new Test('안녕하세요');
console.log(testBox.popupFunc)
console.log(testBox.popupFunc())
extends
-
class의 자식class를 만들 때 사용되는 문법 -
class 자식 클래스 extends 부모 클래스 {}형식으로 선언 -
super.함수명(): 부모 생성자의 함수를 불러옴,this.또한 그대로 사용 가능
-> rect 같은 경우 사진에는 없는 부모 클래스에서 선언된 내용들을 따라감
getter / setter
-
get과set은 동일한 대상으로 지정해주고,this._선언명형태로 사용해야 함 -
get으로 대상 설정,set으로 삼항연산자 형태인 선택문 2개 설정
class User {
constructor(name,age,local) {
this.name = name;
this.age = age;
this.local = local;
}
introduce() {
alert(`안녕하세요, ${this.local}에 사는 ${this.age}살, ${this.name}입니다.`)
}
get age() {
return this._age;
}
set age(value) {
this._age = value < 0 ? 0 : value;
}
}
let test = new User('박강산','25','대구');
test.introduce();
private field
-
class내부에서는 사용할 수 있지만, 외부에서 독립적으로 직접 접근할 수 없는 필드 -
#선언명 = 값형태로 사용할 수 있음
class User {
#idNumber = '1234'; // private field
constructor(name,age,local) {
this.name = name;
this.age = age;
this.local = local;
}
//소개
introduce(){
alert(`안녕하세요, ${this.local}에 사는 ${this.age}살, ${this.name}입니다. ${this.#idNumber}`)
}
}
let user1 = new User('톰',25,'미국');
user1.introduce();
// console.log(user1.#inNumber); // private field 외부 접근 실행 안됨
-> 외부 접근 실행했을 때
static field
-
상수 형태로 선언할 때는,
static 선언명 = 값사용 -
private과 달리, 필요할 때는부모 클래스.선언명으로 불러올 수 있음
try catch
-
오류가 발생했을 때와 오류 없이 진행되었을 때 실행되는 문법
-
try
정상 코드라면 아무런 문제 없이 블록의 시작부터 끝까지 실행되나, 경우에 따라 예외가 발생
예외로throw문에 의해 직접적으로 발생할 수도 있고, 예외를 발생시키는 메서드의 호출에 의해 발생할 수도 있음. -
catch(e)
블록 내부의 문장들은 오직try블록에서 예외가 발생할 경우에만 실행
이 문장들에서는 지역 변수 e를 사용하여 Error 객체 또는 앞에서 던진 다른 값을 참조할 수 있음
이 블록에서는 어떻게든 그 예외를 처리할 수도 있고, 그냥 아무것도 하지 않고 예외를 무시할 수도 있고, 아니면throw를 사용해서 예외를 다시 발생시킬 수도 있음
console.error(`${e.name}, ${e.message}`) 은 error 발생 시 에러에 대한 설명을 나타나게 해줌
finally
이 블록에는 try 블록에서 일어난 일에 관계없이 무조건 실행될 코드가 위치,try블록이 어떻게든 종료되면 실행
try블록이 종료되는 상황은 다음과 같음
1) 정상적으로 블록의 끝에 도달했을 때
2)break,continue또는return문에 의해서
3) 예외가 발생했지만,catch절에서 처리했을 때
4) 예외가 발생했고, 그것이 잡히지 않은채로 퍼져나갈 때
class User {
constructor(name,age,local) {
this.name = name;
this.age = age;
this.local = local;
}
introduce() {
try{
alert(`안녕하세요. ${this.local}에 사는 ${this.age}살, ${this.name}입니다.`)
throw new Error('헉!! 이런 오류!!'); // 예외 처리 : 강제 에러 발생
}
catch(e){
console.error(`${e.name}, ${e.message}`);
}
finally{
// console.log('진행');
console.log('프로그램을 종료합니다.');
}
}
}
let user1 = new User('jane','39','LA');
user1.introduce();
forEach
-
다중 배열을 쉽게 불러오는 방법
-
기본 배열을 불러옴
array.forEach(function(i){
console.log(i)
});- 다중 배열을 불러옴
array.forEach(function(i){
i.forEach(function(j){
console.log(j)
});
});
