Javascript 메서드 , this , getter/setter , 생성자(생성자함수)를 알아보

 

안녕하세요 개발적금입니다.

오늘 알아볼것은 제목과 같이

메서드 , this , getter/setter , 생성자(생성자함수)입니다.

 

---

목차

 

1. 메서드 란?

 

2. 메서드안에서 쓰는 this라는것은?

 

3. getter / setter

 

4. 생성자(생성자함수)를 알아보자

 

---

 

1. 메서드 란?

 

함수 = 메서드 라고 생각하셔도 됩니다.

어떻게 만들었냐에 따라 함수가 될수도있고 , 메서드가 될수도 있으니까요

 

결론부터 말하면 객체 "안에서" 사용하는 함수를 메서드라고 합니다.

const user = {

 name : "개발적금",

 age : 32,

 sum : function(a,b){

  return a+b

 } //이렇게 함수 안에 함수가 들어간것을 메서드라고 합니다.

} 

 

user.sum(2,3); // 메서드 사용방법입니다!

객체 안에서 사용하는 함수! 그게 메서드 라고생각하시면 됩니다!

 

---

 

2. this의 사용용도

 

this는 메서드(객체 안의 함수)에서 상위객체를 표현할때 사용합니다.

예제를 다시 들어보겠습니다.

 

const user = {

 name : "개발적금",

 age : 32,

 sayHello : function(){

 console.log(this.name + " 님 안녕하세요!");

 }

}

위의 예제와 같이 this는 user라는 객체를 지칭합니다. user.name을 가져옴으로써

console.log는 개발적금 님 안녕하세요 가 출력이 됩니다!

 

---

객체를 사용할때에 , String 타입을 수정하는법을 배워보겠습니다.

 

** 맨앞에 String은 타입을 의미합니다 문자열 타입**

 

1) String.lenght -> 총 문자열의 개수를 알수있습니다

 let str = "자바스크립트";

 console.log(str.lenght) 를 출력하면 6이 나옵니다

 

2) String.trim -> 맨 앞뒤 글자의 공백을 없애줍니다.

 ex) let str = " 자바스크립트 "

 console.log(str.trim) -> "자바스크립트" 처럼 앞뒤 공백을 없애줍니다.

 

3) String.replace(찾을단어 , 바꿀값) -> 엑셀에서 ctrl + F 누르셔서 찾아바꾸기 같은 기능입니다.

  let str = "자바스크립트" / str.replace("스크립트" , "어려워");

 console.log(str) 출력하시게되면 바뀌지 않습니다.. 왜냐?!

 str.replace는 바꾼후에 리턴을 하였지만 그 값이 어디에 담기지는 않았습니다. 그러니까

 

 const replaceText = str.replace("스크립트" , "어려워" );

 console.log(replaceText); / 출력하면 자바어려워 가 출력됩니다!

 

4) str.split("자르는기준값")

 -> split은 인자값을 기준으로 문자열을 잘라서 배열형태로 담아준다

 let name = "개,발,적금";

 const arr = name.split(","); -> , 기준으로 잘라서 변수 arr에 배열형태 인덱스 0번부터 할당한다.

 console.log(arr[0]); -> 개

 console.log(arr[1]); -> 발

 console.log(arr[2]); -> 적금

 

 

---

 3. setter/getter 에대해서 알아보자

 

객체를 채우는 행위를 setter

객체를 가져오는 행위를 getter 라고합니다.

 

const user = {

 name : "",

 firstName : "",

 lastName : "",

 

 set _name(value) {

 const arr = value.split("");

 this.name = name;

 this.lastName = arr[0] + arr[1];

 this.firstName = arr[2] + arr[3];

 },

 

 get _name(){

 return this.firstName + " "  +this.lastName ; 

 }

 

}

 

user._name = "개발적금"

 

//set함수가 자동실행됨

이 코드에서 user._name = "개발적금"; -> set(채우는행위) 메서드에 매개변수 "개발적금"을 넣으면

const arr이라는 변수에 배열형태로 "개발적금" 이 [개 / 발 / 적 / 금 ]으로 구분됩니다.

this.name = name; -> user.name에 name값을 대입했습니다

this.lastName = arr[0] + arr[1] -> split으로 구분된 문자열의 0번쨰 1번째를 lastName에 대입했습니다

this.firstName = arr[1] + arr[2] -> split으로 구분된 문자열의 2번쨰 3번째를 firstName에 대입했습니다

 

// get함수가 자동실행됨

console.log(user._name) -> 개발 적금 이라고 나오게됩니다 

 

---

 

4. 생성자 함수에 대해 알아보자

 

만약에 위에 코드에서 "개발적금" 이라는 사람 외에

"개발적금2" , "개발적금3" 이라는 유저들이 생긴다면 

저희는 계속해서 const user{} / const user1{} 이런식으로 객체를

만들어야할까요?

 

생성자 함수는 객체 내에 객체를 찍어내는 함수를 만드는것입니다.

함수를 호출면서 객체를 계속 만드니 새로운주소가 생기는것입니다.

 

ex)

function user(_name , _lastName , _firstName , _age){

 return{

    name : _name,

    lastName : _lastName,

    firstName : _firstName,

    age : _age,

 }

}

const dev = user("개발적금","개발","적금",32);

const dev2 = user("개발적금2","개발","적금2",32);

 

여기서 function user(){} 부분을 [붕어빵 틀] 로 생각하시고

const dev = user();

const dev2 = user(); 부분을 [붕어빵] 으로 생각하시면 편합니다.

저희는 붕어빵 틀(생성자함수)안에 붕어빵(함수 호출하여 값입력)을 만든것입니다.

 

방금했던 위의 방식은 리터럴 방식 이었고 [new] 라는 키워드로 좀더 편하게 만들어 보겠습니다.

 

function User(name,age){

 // this = {}  -> new 라는 키워드가 있으면 생략가능!

 this.name = name

 this.age = age

 // return this -> new 라는 키워드가 있으면 생략가능!

}

 

const dev = new User("개발적금",32);

const dev2 = new User("방문자",20);

 

붕어빵 틀과 붕어빵이 눈에보이시나요? 

 

new 라는 키워드는 객체를 생성하는것입니다.

User라는 객체(붕어빵틀)안에 새롭게

"개발적금" , 32 라는 재료로 붕어빵을 만드는것입니다

그것을 변수 dev에 담았습니다.

 

---

 

지금부터 하는것들은 이해하기가 너무어렵네요ㅠ

그래서 설명이 많이 부족한것 같습니다.. 

더 공부해서 부족한부분들

조금씩 수정해가겠습니다 감사합니다