[새싹 프론트엔드] 22.11.09

나작생 (나만의 작은 선생님) 성현님께서 무지한 나를 이해시켜주신 내용들

Class 에 대해서 배웠는데 내 기준 많이 어려웠다.

그럼 배운 것 중에 쉬운건 뭐였냐고 물어보면 대답은 못하는데 아무튼 특히 더 어려웠다 이 말임.

---

---

 

보면 알겠지만 일반 함수와 생성자 함수의 차이는 단 한 가지라고 한다

( ) 이거 안에 단어를 넣는 것도 아니고 this. 를 사용하는 것도 아닌 

function 다음에 대문자를 쓰는거라고 한다. 

 

근데 이게 무조건 지켜지면 상관이 없는데 누군 소문자로 하고 누군 대문자로 하고

딱 정해진게 없으니까 확립된 개념이 있으면 좋겠다 싶어서 만들어진게

Class 라고 한다.

 

---

---

 

이게 클래스인데 우선 class 뒤에 대문자로 작성해준다. (약속) 

그리고 constructor 는 '생산자'라는 뜻인데 얘는 class 안에서 반드시 붙는 영혼의 단짝으로 생각하면 된다.

 

그 후 붕어빵 틀을 만들어 준다 ( age , legs ) 같은 

그리고 this.age 로 바로 위에 있는 constructor ( age, legs ) 의 age를 칭해준다

그니까 저 constructor 에 있는 age , this.age 를 나는 age라고 부를거야~ 라는 뜻이다.

 

---

---

여기가 상당히 헷갈렸던 부분인데 get 이랑 set 이 내 기준 어려웠다.

근데 나작생께서 잘 알려줬는데 이제 그걸 설명을 하겠다.

 

일단 set 은 어떤 부분을 고치거나 수정하거나 바꾸거나 할 때 앞에 써주는 거다.

set 은 set 함수( 어쩌고 ) 에서 '어쩌고'를 반드시 채워줘야한다. 

 

 set changeAge(age) {
    this.age = age
  }

 

이렇게 해주면 된다. 즉 changeAge 라는 함수에 age 값을 넣으면

this.age 아까 위에 있던 그 값에 새롭게 age 값을 넣어줘~ 라는 뜻이다.

 

let 철수 = new Person(20, 2)

// 철수.changeAge(21)
철수.changeAge = 21

 

여기서 보면 철수라는 객체는 위에서 만든 Person 붕어빵틀에 ( 20, 2 ) 값을 넣어줬다.

age 와 legs 값에 각각 20과 2를 넣어준 것이다 .

근데 여기서 철수의 나이를 바꾸고 싶다면 위에서 만든 changAge 함수를 이용하면 된다.

저렇게 입력하면 철수의 나이는 20에서 21로 바뀐다.

위에 있는 주석은  set changeAge(age) 가 아니라 set 이 없는 그냥 changeAge(age) 라고 입력했을 경우

저렇게 입력해야 값이 나온다는 것을 적어둔 것이다.

 

get printInfo(){
    return document.write(`
    나이: ${this.age}, 다리 개수: ${this.legs}<br>
    `)

 

printInfo() 라는 함수는 말그대로 출력하는 함수이고 이건 값을 바꿔주는게 아니라 값을 주는거니까 

앞에 get 을 붙여준다. 

printinfo() 라는 함수를 적으면 (return 은 '값을 밖으로 꺼낸다'는 의미이다.)

document.write 출력해줘~ 입력한 나이 값과 다리 개수를 ~ 이런 뜻이다.

 

---

---

밑에 코드를 입력하면 위처럼  뜬다

---

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 3주차 블로그 포스팅