[패스트 캠퍼스 FE] JS 클래스

조규준·2022년 4월 26일

Prototype js this 생성자함수 클래스

[패스트 캠퍼스 FE]

목록 보기

10/20

JS 클래스

❗️ 생성자 함수(prototype)

개발을 하다보면 유사한 객체를 여러 개 만들어야 할 때가 있다.
이때, new연산자와 생성자 함수를 사용하면, 유사한 객체 여러개를 쉽게 만들 수 있다.

생성자 함수 만드는 법
1. 함수 이름의 첫글자는 대문자로 시작함
2. 반드시 new 연산자를 붙여 실행함

생성자의 의의
-> 재사용 할 수 있는 객체 생성 코드의 구현

💡 리터럴 방식 : 특정한 기호만 가지고 데이터를 만들어내는 방식

{}, "", []

this

this 는 '현재 객체'를 의미함
(메서드 내부에서 this 키워드를 사용하면 객체에 접근 가능!)

일반(Normal) 함수는 호출 위치에 따라 this 정의!
화살표(Arrow) 함수는 자신이 선언된 함수 범위에서 this 정의!

예제 : setTimeout의 경우

문제
모던 JavaScript 튜토리얼 의 과제이다.

해답

에러가 발생한다.

왜냐하면, this 값은 현재 함수로써 호출 되었기 때문에, makerUser() 내에서 호출되었다.
그런데 호출 위치에서 user라는 객체를 찾을 수 없기 때문에, 오류가 난다.

따라서 ref : this를 메서드로 바꿔주면 해결된다.

답

이렇게 메서드로 만들어주면 해결된다!

ES6 Classes

클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.
출처: 위키백과

기본 문법

clas MyClass {
  constructor(){...}
  method1() {...}
  method2() {...}
  method3() {...}
  ...
}

예시와 사용법

class User {

  constructor(name){
    this.name = name;
  }

  sayHi() {
    alert(this.name);
  }

// 사용법:
let user = new User("Ggyu");
user.sayHi();
}

📌 클래스 파해치기

출처: 코어 자바스크립트 - 클래스와 기본 문법

클래스 상속 (확장)

클래스 상속을 사용하면 클래스를 다른 클래스로 확장할 수 있음
기존에 존재하던 기능을 토대로 새로운 기능을 만들기 위해 사용

✅ 만들어보기

팀원들끼리 문제 하나를 정해서 만들어보기로 했다!

문제) 반 1등 구하기

클래스를 이용하여 5명의 사람을 입력받고,
각각 국어, 수학 점수를 입력받아
국어 1등과 점수, 수학 1등과 점수 그리고 총합 1등과 점수를 출력하기

나의 접근방식)

일단 사람을 입력 받을때 n명을 입력 받으면 좋을텐데...

그럼 n명 만큼 for문을 돌리면서 [이름, 수학 점수, 국어 점수] 입력 받자!
(ex. 짱구, 10, 20)

점수를 비교 하려면, 이름 array, 수학 array, 국어 array 들을 만들어서,
각각의 입력 값들을 넣고...

이 array들을 각각 for문으로 돌려서 최대값을 찾아내면 되겠군

그리고 최대값에 해당하는 사람을 찾으려면, 최대값이 지정된 위치의 index 값을 저장하면 될거같다

그리고 alert로 출력하면 끝이다!

실제 코드)

class ScoreCal{
  studentNumber(){
    var studentnumber = prompt("학생 수를 입력하시오!")
    this.studentnumber = Number(studentnumber);
    // 학생 수를 입력받고, 숫자로 변환
  }

  score(){
    var [name, korean, math] = prompt("학생 이름, 국어 점수, 수학 점수를 입력하시오!").split(" ");
    this.name = name;
    this.korean = parseInt(korean);
    this.math = parseInt(math);
  // 학생의 이름, 국어 점수, 수학 점수를 입력받고, 이름 빼고 숫자로 변환
  }
}

let classA = new ScoreCal();
classA.studentNumber();
// classA를 생성한뒤, 학생수를 입력받음

var student = [];
var koreanScore = [];
var mathScore = [];
var resultScore = [];
// 학생들의 입력 값들을 각각 저장하는 배열

for(let i=0;i<classA.studentnumber;i++)
{
  classA.score();
  student[i] = classA.name;
  koreanScore[i] = classA.korean;
  mathScore[i] = classA.math;
  resultScore[i] = classA.korean + classA.math;
}
// 학생의 숫자만큼 class의 score() 메서드를 실행

function getHighscore(arr){
  var highscore = 0;
  var highstudent = 0;
  for(let j=0;j<arr.length;j++)
  {
    if(j===0)
    {
    highscore = arr[j];
    highstudent = j;
    }
    else if(arr[j]>highscore)
    {
      highscore = arr[j];
      highstudent = j;
    }
  }
  return [student[highstudent],highscore]
}
// 배열에서 최대값과 그 값에 해당하는 index값을 return하는 함수
// 배열을 인자로 받아서 두개의 값을 return하는 함수임,

koreanHighScore = getHighscore(koreanScore);
mathHighScore = getHighscore(mathScore);
resultHighScore = getHighscore(resultScore);
// 각각의 배열들을 함수로 돌려서 최대값과 index값을 저장하는 배열들을 만듬

alert("국어 1등과 최고점수는? " + "\n" + "\n" + koreanHighScore[0]+"님이 "+koreanHighScore[1]+"점으로 1등입니다!");
alert("수학 1등과 최고점수는? " + "\n" + "\n" + mathHighScore[0]+"님이 "+mathHighScore[1]+"점으로 1등입니다!");
alert("최종 1등과 합계점수는? " + "\n" + "\n" + resultHighScore[0]+"님이 "+resultHighScore[1]+"점으로 1등입니다!");
// 이제 띄우기만 하면 끝!!!

💡 추가로 알게 된 것

함수의 매개변수로 배열 전달

prompt에서 변수 여러개 입력받기

함수에서 여러 값 return 하기

출처 : 밤의 공간

🧑🏻‍💻 오늘의 회고

오늘은 갑자기 머리가 어지러웠다... 과부하가 걸려서 그랬나...?
근데 이상했던게 보통은 어지러우면 그만하고 쉬고싶어야 정상인데...

'아니 내 머리야 왜 어지럽고 그래... 더 하고싶은데.. 좀만 힘내봐...'

이런느낌이였다.... 배우는게 너무 재밌어서 계속 더 더 더 하고싶다!!!!
내 몸안에 피가 아니라 코딩이 흐른다~~!!!!!!

하지만 나는 마라톤을 하고 있기 때문에.... 바람도 쐬가면서 해야겠다. 하하.

또 오늘은 굉장히 뿌듯한 날이였다~! 배우기만 하다가 실습해보니 역시 다르다.
내가 생각한 방식이 그대로 동작되었을때의 희열감은... 엄청났다. 히히

앞으로도 "공부 + 실습" 이 패턴을 유지하면서 학습해야겠다!