Dev log - 23, JavaScript #10

자바스크립트 관련

• 표기방법에 따른 함수 분류

1. 익명함수 : function(){}
2. 선언적 함수 : function 함수명(){}

• 사용방법에 따른 분류

1. 재귀함수 : function 함수명(){ 함수명 }
2. 콜백함수 :

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) 함수(폐쇄)

1. 함수를 중첩으로 사용하여 외부와 단절 시킴
2. return을 사용하여 외부에 함수를 노출, 외부에서 매개 변수 등을 통하여 내부함수에 접근할 수 있음
3. 함수를 만들어내는 공장 (생성자를 통해서 만들 경우)
4. 추후 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)
    });
});