221103 JavaScript - 메서드, this, 생성자함수, getter, setter, 피보나치 수열, 메모이제이션

오늘 내가 배운 것

1. 메모이제이션(Memoization) - 피보나치 수열

• 메모이제이션

2. 객체

• 메서드(method)
• this
• 메서드의 종류

3. Getter 와 Setter

 

4. 생성자 함수 

• 생성자 함수
• `new`를 이용한 생성자 함수 

 

1. 메모이제이션(Memoization) - 피보나치 수열

 

피보나치 수열은 1, 1, 2, 3, 5, 8, 13, ....이다. 규칙은 구하고자 하는 수는 앞의 두 수를 더한 값이다.
피보나치 수열을 함수로 간단하게 쓰면 이렇게 표현할 수 있다.

function fibo(n) {
    if(n == 1 || n == 2 ) return 1

    return fibo(n-1) + fibo(n-2)
}

n값이 작을 때는 콜 스택에 쌓이는 함수가 적어서 연산이 금방 처리되지만 n값이 커질수록 그 앞에 처리해야 하는 함수가 단계적으로 있다 보니 콜 스택이 많이 쌓여 연산처리 속도가 매우 느려진다.

피보나치 수열에 같은 경우

피보나치 수열에서 같은 영역을 표시하였다.

사진과 같이 파란색 원과 같은 f(2)의 값, 빨간색 원과 같은 f(3)의 값, 초록색과 같은 f(4)의 값처럼 

동일한 연산을 반복해야 할 때 `메모이제이션` 기법을 사용하면 된다.

메모이제이션

컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 동적 계획법의 핵심이 되는 기술

 

let memo = {}   //객체를 만듬 , 전역변수

function fibo(n) {
    let result // 함수 내 지역변수 선언...

    if(n in memo){          //memo 객체 n은 숫자
        result = memo[n]
    } else {
        if( n == 1 || n == 2){
            result = 1
        }else{
            result = fibo(n-1) + fibo(n-2)  //함수 재귀적 표현
        }

        memo[n] = result        //대괄호 표기법
    }
    
    return result
}

자바스크립트 메모이제이션

자바스크립트에서의 메모이제이션은 재귀 함수를 풀어내면서 결과 값을 객체에 저장을 해서 그 저장한 객체를 힙 영역에 두고 다음에 똑같은 연산을 처리할 때 객체 안에 값이 있는지 확인하고 있으면 그 값을 가져다 쓰기 때문에 해야 하는 계산이 줄어들어 처리 속도가 빨라진다.

//memo 객체에 값이 저장되어 있다.
{
	.	
	.
	.
    "3":2
    "2":1
    "1":1
}

 

 

2. 객체

메서드(Method) 

객체 안에 있는 함수를 `메서드`라고 한다.

 

// `sum이 메서드` 이다.
const user ={
    name :'홍길동'
    sum : function (a,b) {
        return a+b
    }
}

user.sum(1,2) //3

this

const user={
    name : '홍길동',
    firstName : "",
    lastName : " ",
    age:32,
    sayHi : function (){
        console.log(this.name + "님 안녕하세요.")
    },
}

부를 제외한 대부분의 메서드는 객체 값을 활용한다. 메서드 내부에서 this 키워드를 사용하면 현재 객체에 접근할 수 있다.
그래서 this.name 은 user.name와 같다.

 

메서드의 종류

메서드는 개발자가 직접 만들어 쓰는 메서드도 있지만, 자바스크립트 안에 내장되어 있는 내장 메서드가 있다.

let str = " 자바스크립트 "  //string 타입
console.log(str.length) //8 // 양 옆에 있는 띄어쓰기도 글자수 1개로 계산 됐다.
console.log(str)        //str을 보여준다( 띄어쓰기 포함해서)

//trim() 메소드 
console.log(str.trim()) 
//replace() 메소드
console.log(str.replace("스크립트", "스크"))
const replaceText = str.replace("스크립트", "스크")
console.log(replaceText)
//split() 메소드
let x = "1,2,3,4,5,6,7,8,9"
console.log(x)
const y = x.split(",")
console.log(y)
console.log(y[8]) // 9

trim()

양 옆의 여백의 여백을 없애준다.

replace("a", "b")

값을 찾아서 바꿔준다. 인자를 필요로 한다.  스트링 타입 뒤에 쓸 수 있는 메서드이다.
찾고자 하는 값을 a에 문자열로 적고, 바꾸고자 하는 값을 b에 문자열로 적어준다.
ex) replace("스크립트", "스크")  // 자바스크립트 -> 자바스크
str의 값 자체를 바꾸는 것이 아니라 출력 결과만 바뀌면서 출력되는 것이다.

변수 replaceText : 해당 위치가 아닌 다른 곳에서 호출해서 사용하는 경우도 있기 때문에 변수에 할당하여 사용한다.

split("separator")

글자를 나누고 싶을 때 사용하는 메서드 : 문자열을 배열 안에 넣어준다.
배열이기 때문에 0번째부터 계산한다 
separator : 구분자를 string 타입으로 입력해준다.
구분자를 기준으로 배열을 만든다.
나누고 싶은 속성에 속성 값을 띄어쓰기로 구분해서 작성한 후 구분자를 띄어쓰기로 설정하면 작업하기 편하다.

 

(VScode기준) 내장 메서드는 키워드 위에 마우스를 올려두면 그 키워드에 대한 설명이 있다.

많은 메서드들을 사용하게 될텐데 필요한 메서드를 찾아서 쓸 때 설명을 보고 타입에 맞춰서 잘 작성하자..

 

Ex)

replace 같은 경우 string타입에 `.replace`를 써야하고 괄호를 쓴다.

괄호 안에 2가지 parameter를 갖는데 처음 오는 param은 searchValue 뒤에 오는 param은 replaceValue를 적어준다.

searchValue(=찾는 내용) 은 string 타입 또는 RegExp(=정규표현식) 으로 사용하고 

replaceValue(= 바꿀 내용)은 string 타입으로 사용한다.

: string은 string타입으로 결과가 나온다는 뜻이다.

*RegExp는 다음에 다시 알아보자...

let nm = "홍 길동"
let arr = nm.split(" ")  //띄어쓰기를 기준으로 ["홍","길동"]

console.log(nm)   // 홍 길동
console.log(nm.length)// 4 // 띄어쓰기도 포함
console.log(arr)    //['홍','길동']
console.log(arr.length) //2
console.log(arr[0])  //홍
console.log(arr[1]) //길동




const user2={
    name : '홍 길동',
    firstName : "",
    lastName : " ",
    age:32,
    sayHi : function (){
        console.log(this.name + "님 안녕하세요.")
    },
    setName : function(){
        const arr= this.name.split(" ")
        this.lastName = arr[0]
        this.firstName = arr[1]
    }
}
user2.sayHi()  //메서드 호출, 메서드 안에 console.log 찍힘
console.log(user2) //현재 상태.. 이름 안나눠짐
user2.setName()  //이름 글자 나누고 first, last에 대입
console.log(user2) // firstName과 lastName에 대입되서 객체 출력.
console.log(user2.lastName) // 홍
console.log(user2.firstName)// 길동

 

 

 

3. getter 와 setter

getter 와 setter

'getter(획득자)'와 ‘setter(설정자)’ 메서드로 표현됩니다. 객체 안에서 getter와 setter 메서드는 `get` 과 `set` 키워드를 사용하여 나타낸다.  원래 메서드 안에 기본으로 있지만 getter과 setter을 사용하여 개발자가 원하는 방향으로 작성하여 사용할 수 있다.

 

 

const users= {
    name : '',
    lastName: '',
    firstName: '',
    //setter 
    set _name(value){
        const arr = value.split("")
        this.name = value
        this.lastName = arr[0]
        this.firstName = arr[1] + arr[2]
    },
    //getter  출력하는 틀을 만들어 줄 수 있다.
    get _name(){
        return this.firstName + " " + this.lastName 
    },
}
users._name = '홍길동'
console.log(users)
console.log(users._name) 
//set 안에 value 값을 넣어주는 메소드

** set 에 들어갈 value는 함수의 매개변수이지만 대입연산자 형태로 value의 할당해 준다. (user._name = '홍길동')

 

 

4. 생성자 함수

생성자 함수

객체 틀을 만드는 함수가 존재한다. 함수에 매개변수를 이용해 객체를 만들 수 있는 틀을 만들고 변수를 만들면서 그 안에 매개변수에 들어갈 데이터를 같이 적는다.

 

//가상
function user(_name, _lastName, _firstName, _age){
    return{
        name : _name ,
        lastName : _lastName ,
        firstName : _firstName ,
        age : _age,
    }
}

//실체
const hong = user('홍길동',"홍" ,"길동" , 32)
const hwang = user("황진이", "황", "진이", 28)
const array = [hong, hwang]

 

 

'new' 를 이용한 생성자 함수

유사한 객체를 여러개 만들어야 할 때가 생기는데 이때, `new` 키워드와 생성자 함수를 사용하면 유사한 객체를 쉽게 만들 수 있다.

 

생성자 함수는 일반 함수와 기술적으로 차이가 있지는 않지만 규칙이 있다.
1. 함수 이름의 첫 글자는 대문자로 시작한다.
2. 반드시 `new` 키워드를 붙여서 실행한다.

 

function User(_name, _age){
    // this = {}           //빈 객체를 this에 할당한다. 생략가능 
    this.name = _name      //객체에 새로운 속성을 추가해 수정한다
    this.age = _age
    // return this         //this를 반환한다. 생략가능
}

const 인구 = new User('홍길동', 32)
const 준영 = new User('황진이', 28)

/*
new 키워드 생성 순간 
this = {}
return this  가 함수 내부적으로 안보이게 생성 된 것이다.
*/

 

---