[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 사전직무교육 3일차(05.28)

학습기록

📜 생성자 함수

🟡 생성자 함수란?

 👉🏻 객체를 생성할 때 사용하는 함수

 👉🏻 생성자 함수는 대문자로 시작한다는 암묵적 약속 존재

 👉🏻 함수의 매개 변수를 활용할 수 있다

 👉🏻 객체를 생성할 때 new 키워드를 사용한다.

function Shape(width, height) {
  //this = {}
  this.width = width
  this.height = height
  // return this
}
Shape.prototype.getArea = function () {
  return this.width * this.height
}
//프로토타입에 넣어서 가져다 쓰고 싶을때 쓰면 됨

const rect1 = new Shape(10, 10)
console.log(rect1) // Shape  { width: 10, height: 10, getArea: λ }
console.log(rect1.getArea() // 100
console.log(rect1.__proto__.getArea()) //NaN
console.log(Shape.prototype) Shape { getArea: λ, constructor: λ:Shape }

 

📜 래퍼 객체(Wrapper Object)

👉🏻 javascript는 기본자료형 (number, string, boolean ) 을 객체로 다루기 위해 래퍼 객체 제공

const a = "Hello"
console.log(a.length)
/* 
1. a는 기본 자료형
2. 기본 자료형은 객체가 아니라서 속성과 메서드를 가질 수없음
3. 어떠한 속성이나 메서드를 사용할때만 일시적으로 래퍼 객체로 변환
 => const a = new String("Hello")
 일시적으로 변환하는 거라서 사용후에는 벗겨짐
 console.log(typeof a) // string
 실제로 const b = new String("Hello") 로 코드 작성을 할 경우에는
 console.log(typeof b) // Object
*/

 👉🏻 number ⇒ Number(), string ⇒ String(), boolean ⇒ Boolean()

 

📜 Class

🟡 es6에서 추가된 class, (함수아님 주의)?

 👉🏻 class 문법 : class는 class 키워드를 사용해서 선언한다.

 👉🏻 클래스는 내부에 constructor 메소드를 가지고 있다.

class Shape {
  constructor(color) {
    this.color = color
  }
  getColor() {
    return this.color
  }
}
const shape1 = new Shape("blue")

 

 👉🏻  상속 : 클래스는 extends 키워드를 사용해서 상속을 한다.

• super(): 자신이 상속한 constructor를 호출하는 역할을 함, extends쓰고 super()작성을 안하면 오류 발생
• 상속할 때 매개변수가 있으면 super()에도 갗이 전달해줘야 함 안그러면 undefined 출력

class Rectangle extends Shape {
  //상속을 하든, 상속을 안하든 반드시 constructor를 가지고 있어야 한다.
  constructor(color, width, height) {
    super(color)
    this.width = width
    this.height = height
  }
  getArea() {
    return this.width * this.height
  }
  // 오버라이딩 : 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의해서 사용하는 것을 의미
  getColor() {
    return `사각형은 ${this.color}입니다.`
  }
}

const rect1 = new Rectangle("blue", 10, 20)
console.log(rect1.getArea()) //200
console.log(rect1.getColor()) // '사각형은 blue입니다.'

 

🟡 set, get

 👉🏻 set : 값을 설정하는 키워드

 👉🏻 get : 값을 가져오는 키워드

 👉🏻 꼭 같이 사용할 필요는 없는데 다른 코드에 영향을 주고 싶지 않아서 같이 사용하는 거임

class Car {
  // #speed 처럼 '#'을 붙이면 private 속성이 됨
  // 2020년에 추가된 최신 문법, 적용 안되는 웹 브라우저 존재
  constructor(speed) {
    this.speed = speed
  }
  set speed(value) {
    this._speed = value
  }
  getSpeed() {
  // set 에서 설정한 this._speed의 값을 리턴해야 값이 나옴 set이 설정하는 거라서... 아니면 undefined가 나옴
    return this._speed
  }
}

const car1 = new Car(-100)
console.log(car1.getSpeed()) // -100

 

🟡 static

 👉🏻 static을 사용하면 인스턴스화 되지 않음

 👉🏻 인스턴스는 만들어 놓은 클래스를 함수에서 사용하기 위해 객체로 선언한것을 말함.

 👉🏻 static 메소드는 해당 클래스에 직접 접근해야 사용 가능

class MathUtils{
  static APP_NAME = "Math Utils"
  //
  PI = 3.14
  constructor(number) {
    this.number = number
  }
  static add(a,b) {
    return a + b
  }
  static minus(a,b) {
    return a - b
  }
}
const mathUtils = new MathUtils(10)
console.log(mathUtils) // MathUtils { PI: 3.14, number: 10}
console.log(mathUtils.APP_NAME) // undefined
console.log(MathUtils.APP_NAME) // 'Math Utils'
console.log(MathUtils.add(1,3)) // 4

📜 클로저

🟡 클로저

 👉🏻  inner를 참조하는 상태, 삭제하면 안될 것 같은 거를 임시로 별도 메모리에 넣어놓음

 👉🏻  그래서 outer함수가 임시로 넣어진 메모리에서 참조해서 사용가능한거임

 👉🏻  변수를 은닉화할때나 임시메모리에서 반 영구적으로 값을 갖고 있고 싶을 때 사용함

function outer() {
  let i = 0
  return function inner() {
    return i++
  }
}


function outer() {
  let i = 0
  return function inner() {
    return i++
  }
}

let innerFunc = outer()
console.log(innerFunc())
console.log(innerFunc())
innerFunc = null

//마지막에 null로 해줘야 메모리에서 제거

 

 

---

 

/*

[문제]
매개변수로 숫자를 전달하면 그 숫자의 역순을 되돌려주는
함수를 만들어주세요.

ex) 32125 -> 52123
    15231 -> 13251 
*/

function reverse_to_number(number) {
  //let`s do it
  let numStr = number.toString()
  // let numStr = String(number)

  // return numStr.split("").reverse().join("") * 1
  return Number(numStr.split("").reverse().join(""))

  //강사님 풀이
  return parseInt(number.toString().split("").reverse().join(""))
}

let a = reverse_to_number(32125)
console.log(a) // 52123

let b = reverse_to_number(13251)
console.log(b) // 15231

/*
  [가장 긴 단어를 출력하기]

  매개변수로 전달된 문장에서 가장 긴 단어를 출력해주세요.

*/

function findLongStr(str) {
  let long = str.split(" ")
  let longStr = ""
  for (let i = 0; i < long.length; i++) {
    if (longStr.length < long[i].length) {
      longStr = long[i]
    }
  }
  return longStr
}

let result = findLongStr("we are the champion")
console.log(result) // champion

let result2 = findLongStr("i`m fine thank you, and you?")
console.log(result2) // thank

function findLongStr2(str) {
  return str.split(" ").sort((a, b) => b.length - a.length)[0]
  let long = ""
  str.split(" ").map((a) => {
    if (a.length > long.length) {
      long = a
    }
  })
  return long
}

 

 

---

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 과정(B-log) 리뷰로 작성 되었습니다.