[JavaScript] - 기본 문법 (4)

🚀 생성자 함수 / 프로토타입

새로운 객체를 생성하고 초기화하는 함수

• 생성자 함수는 내부에서 this를 사용하여 생성될 객체의 속성 정의
• 프로토타입을 사용하여 메서드를 공유하여 코드의 재사용성을 높임
  • 모든 객체는 프로토타입 객체로부터 속성과 메서드를 상속 받음

function Bellingham(born, height, club) {
  this.born = born;
  this.height = height;
  this.club = club;
}

Bellingham.prototype.getPersonInfo = function() {
  return `${this.born} ${this.height} ${this.club}`;
}

let myBellingham = new Car(`England`, `186cm`, `Real-Madrid`);
console.log(MyBellingham.getPersonInfo()); // England 186cm Real-Madrid

🚀 클래스

클래스는 ES6부터 도입하였고, 객체 지향 프로그래밍을 쉽게 구현할 수 있게 해줌

1️⃣ 클래스 선언

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log('Hello, ' + this.name);
  }
}

let ronaldo = new Person('Ronaldo', 40);
ronaldo.greet(); // Hello, Ronaldo

• ✔️ constructor는 반드시 있어야함

2️⃣ 클래스 선언은 함수 선언과 달리 호이스팅 ❎

const bellingham = new Person('Bellingham', 22); // ReferenceError: Cannot access 'Person' before initialization

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

3️⃣ 상속

클래스는 extends 키워드를 사용하여 다른 클래스 상속 가능

class Employee extends Person {
  constructor(name, age, job) {
    super(name, age);
    this.job = job;
  }

  work() {
    console.log(this.name + ' is working as a ' + this.job);
  }
}

let kane = new Employee('Kane', 32, 'soccer-player');
kane.greet(); // Hello, kane
kane.work();  // kane is working as a soccer-player

4️⃣ static

static 키워드를 사용하여 클래스의 인스턴스가 아닌 클래스 자체에 속하는 메서드와 속성을 정의할 수 있음

class UserService {
  static async login(email, password) {
        const isLogin(email, password){
          console.log("로그인하셨습니다")
        }
        return { email, password };
    }

    // 회원가입
    static async signup(userData) {
        const isSignup(userData){
          console.log("회원가입하셨습니다")
        }
        return userData;
    } 
}

console.log(UserService.login("kanekane", 1234)); // 로그인하셨습니다
console.log(UserService.signup({ name: "Bellingham", age: 22 })); // 회원가입하셨습니다

5️⃣ getter / setter

클래스 내 속성에 접근 및 설정을 할 수 있음

class Person {
  constructor(name) {
    this._name = name;
  }

  get name() {
    return this._name;
  }

  set name(newName) {
    if (newName) {
      this._name = newName;
    }
  }
}

let person = new Person('Messi');
console.log(person.name); // Messi
person.name = 'Walker';
console.log(person.name); // Walker

6️⃣ 오버라이딩

상위 클래스 메서드를 하위 클래스에 재정의(오버라이딩) 가능

class Club {
  name() {
    console.log('Club Name');
  }
}

class Soccer extends Club {
  name() {
    console.log('Manchester UTD');
  }
}

let myClub = new Soccer();
myClub.name(); // Manchester UTD

🚀 내장 객체

1️⃣ 표준 내장 객체

표준 내장 객체는 자바스크립트 엔진에 기본으로 내장되어있고, 별도 선언 없이 사용 가능

• Object
• Function
• Array
• String
• Boolean
• Number
• Math
• Date
• RegEXP

2️⃣ 배열 내장 객체

주요 메서드

• push() ➡️ 배열 끝에 요소 추가
• pop() ➡️ 배열 끝에 요소 제거
• shift() ➡️ 배열 첫 번째 요소 제거
• unshift() ➡️ 배열 앞에 요소 추가
• join() ➡️ 배열을 매개변수와 조합하여 합침
• sort ➡️ 배열 정렬
• reverse() ➡️ 배열 역순으로 뒤집음
• mpa(), filter(), reduce() ➡️ 배열 순회하여 작업 수행

3️⃣ 문자 내장 객체

주요 메서드

• charAt() ➡️ 특정 인덱스 문자 반환
• split() ➡️ 문자열을 separator 기준으로 분리하여 배열 만듬
• concat() ➡️ 매개변수로 전달되어진 문자열을 하나의 문자열로 합침
• indexOf() ➡️ 특정 문자의 인덱스를 반환
• includes() ➡️ 문자열에 특정 문자열이 포함되어 있는지 확인
• slice() ➡️ 문자열의 일부분을 추출
• toUpperCase(), toLowerCase(() ➡️ 대소문자 변환
• substring() ➡️ 부분 문자열 반환

4️⃣ Math 객체

주요 메서드

• Math.abs() ➡️ 절대값 반환
• Math.ceil(), Math.floor() ➡️ 올림, 내림
• Math.max(), Math.min() ➡️ 최대값, 최소값 반환
• Math.random() ➡️ 0과 1 사이의 난수 생성
• Math.min() ➡️ 주어진 숫자 중 제일 낮은 숫자를 반환
• Math.round() ➡️ 소수점을 반올림
• Math.floor() ➡️ 소수점을 내림
• Math.ceil() ➡️ 소수점을 올림
• Math.abs() ➡️ 절대값을 반환
• Math.pow(x, y) ➡️ x의 y 제곱을 반환

🚀 동기 / 비동기

동기 : 코드가 순차적으로 실행, 이전 코드 완료전 까지 다음 코드 실행 X
비동기 : 코드가 병렬로 실행, 다른 코드 실행 방해 X

1️⃣ 콜백함수

콜백 함수는 다른 함수의 인수로 전달되어 실행되는 함수

• 동기식 콜백(synchronous callback)
  • 호출되는 즉시 실행되고, 그 작업이 완료될 때까지 다음 코드를 실행 ❎

  function syncCallback(callback) {
    console.log("콜백 전");
    callback();
    console.log("콜백 후");
  }
  
  syncCallback(() => {
    console.log("내부 콜백");
  });
  
  // 출력:
  // 콜백 전
  // 내부 콜백
  // 콜백 후
  

• 비동식 콜백(asynchromous callback)
  • 비동기식 콜백은 호출된 후 비동기 작업이 완료된 후에 실행

  function asyncCallback(callback) {
    console.log("콜백 전");
    setTimeout(() => {
      callback();
      console.log("내부 콜백");
    }, 1000);
    console.log("콜백 후");
  }
  
  asyncCallback(() => {
    console.log("콜백 실행됨");
  });
  
  // 출력:
  // 콜백 전
  // 콜백 후
  // 1초 후
  // 콜백 실행됨
  // 내부 콜백
  

2️⃣ Promise Then

Promise는 비동기 작업의 완료 또는 실패를 나타내는 객체, then 메서드 사용하여 처리를 정의

Promise는 3개의 상태를 가짐

• 대기 : 초기상태
• 이행 : 연산 완료
• 거부 : 연산 실패

  let promise = new Promise((resolve, reject) => {
  let success = true; // 작업 성공 여부

    setTimeout(() => {
      if (success) {
        resolve('Data fetched successfully'); // 이행 상태
      } else {
        reject('Error in fetching data'); // 거부 상태
      }
    }, 2000);
  });

  >> then 메서드 체이닝
  - 첫 번째 인수는 프로미스가 이행된 경우에 호출되는 콜백 함수
  - 두 번째 인수는 거부된 경우에 호출되는 콜백 함수
  - 각 then은 새로운 프로미스 객체를 반환하여 체이닝을 가능하게 함 
  promise
    .then((data) => {
      console.log(data); // Data fetched successfully
    })
    .catch((error) => {
      console.error(error); // Error in fetching data
    });

3️⃣ async await

async await는 Promise Then을 편하게 사용하게 해줌

• async는 항상 Promise를 반환

  async function fetchData() {
    // 이 함수는 Promise를 반환
    return 'Data fetched';
  }

  fetchData().then(data => console.log(data)); // Data fetched

• await는 Promise가 처리될 때까지 함수 실행을 중지시켜줌

  async function fetchData() {
    let data = await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('Data fetched');
      }, 2000); 2초 중지 시켜줌
    });
    console.log(data); // Data fetched
  }

  fetchData();