Javascript 기초(5) - 객체 및 메서드

1) Javascript 함수

   1-1) 함수 복습 - fibonacci 수열

2) Javascript 객체

   2-1) 메서드 및 this 예약어

   2-2) setter와 getter

   2-3) 생성자 함수

   2-4) class

 

 

 

 

 

1) Javascript 함수

1-1) 함수 복습 - fibonacci 수열

// 피보나치 수열을 구하는 함수 : 메모이제이션 기법을 사용한 함수
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; // 여기서 memo 객체에 n 속성을 만들고 해당 속성에 위의 계산결과인 result를 추가해줌!!
  }
  return result;
}

// 간단한 피보나치 수열 함수 : 값이 커지면 컴퓨터 계산이 느려져 결과 출력이 오래 걸림
// 숫자가 커질수록 동일한 연산을 반복 수행하기에 컴퓨터 게산이 느려짐!! >> 해결책: 메모이제이션
function fiboNum(n) {
  if (n == 1 || n == 2) return 1;

  return fiboNum(n - 1) + fiboNum(n - 2);
}

// 메모이제이션: 한 번 계산한 결과물을 변수에 저장한 뒤 이후 동일한 연산이 진행될 시 해당 변수를 재사용한다는 의미!!
// 메모이제이션 기법은 기존에 콜스택만 사용하여 연산을 수행할 시 부담이 되는 경우에 힙을 추가적으로 사용하여 이미 처리된 연산은 저장하여 해당 연산을 반복수행하지
// 않도록 하여 기존보다 컴퓨터 연산 속도를 올렸다고 보면 됨!!

// 위의 fibo 함수에서는 위의 힙 역할을 하는 부분이 "let memo = {};"이고, 이는 한 번 계산된 연산(key: 인수, value: 계산값)은 memo 객체에 계속 축적하여
// 추후 동일한 연산이 나올 시 memo 객체에 있는 해당 연산을 그대로 사용하여 컴퓨터 계산 속도를 높이는 원리!!

 

 

 

 

2) Javascript 객체

2-1) 메서드 및 this 예약어

// 객체 - 심화 TIP
// 메서드
// 함수는 아래 방식으로 선언(함수 선언문, 함수 표현식, 화살표 함수)한 것을 말하며, 메서드는 객체 안에 있는 함수를 지칭함!!

/*
	함수
	- 함수 선언문
	function showMessage() {}

	- 함수 표현식
	const showMessage = function () {}

	- 화살표 함수
	const showMessage = () => {}
*/


// 메서드
const user = {
    name: '곽인구',
    sum: function(a, b) {
        return a + b;
    }
}

user.sum();


// this 예약어
const user = {
  name: "곽 인구",
  firstName: "",
  lastName: "",
  age: 32,
  sayHi: function () {
    console.log(this.name + "님 안녕하세요."); // 여기서 "this"는 user 객체를 말함!!
    // console.log(user.name + "님 안녕하세요."); // 위와 동일한 코드임!!
  },
  //setter
  setName: function () {
    const arr = this.name.split(" ");
    this.lastName = arr[0];
    this.firstName = arr[1];
  },
  /*
  위의 코드의 setName 함수를 나눠서 쓴 것이 아래 setFirstName과 setLastName 함수이다!!
  setFirstName: function () {
    const arr = this.name.split(" ");
    this.firstName = arr[1];
  },
  setLastName: function () {
    const arr = this.name.split(" ");
    this.lastName = arr[0];
  },
  */
  // getter
};

// 데이터 타입이 "String"이면 split 함수를 쓸 수 있다!!
console.log(user);
// user.setFirstName();
// user.setLastName();
user.setName();
console.log(user);

user.sayHi(); // 곽인구님 안녕하세요.


// 메서드를 많이 아는 것이 자바스크립트를 잘 사용하기 위한 필수요소이다!!

let str = " 자바스크립트 ";
// 데이터 타입: String
console.log(str.length); // 8 => length 메서드: 문자열의 총 길이를 반환해줌(반환 시 띄어쓰기도 총 길이에 포함하여 계산함!!)
console.log(str);
console.log(str.trim());

// 찾아 바꾸기
// String(문자열).replace(찾을 단어, 바꿀 값)
console.log(str.replace("스크립트", "")); // " 자바  "

// 메서드도 함수이기 때문에 return이 생략되어 있어 계산된 결과를 return해주는 방식이기에
// replace 메서드는 원본 String 데이터인 "str" 값을 변경하지 않음!!
const replaceText = str.replace("스크립트", ""); // 원본 String 데이터인 "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]);

let nm = "곽 인구";

let arr = nm.split(" "); // 출력 결과 : ["곽", "인구"] >> split 메서드는 결과를 배열로 반환해줌!!
console.log(nm); // 곽 인구
console.log(arr[0]); // 곽
console.log(arr[1]); // 인구

 

 

2-2) setter와 getter

// setter와 getter

// get과 set이라는 키워드가 숨겨져 있음!!

const user2 = {
  name: "",
  lastName: "",
  firstName: "",
  set _name(value) {
    const arr = value.split("");
    this.name = value;
    this.lastName = arr[0];
    this.firstName = arr[1] + arr[2];
  },
  get _name() {
    return this.firstName + " " + this.lastName;
  },
};

// setter: 아래와 같이 대입연산자를 통해 특정 key에 value를 넣어주면서 그 값을 기준으로 customizing하여 key와 value를 저장함!!(point: 대입연산자)
user2._name = "곽인구";

// getter: 호출 시 반환된 return 값을 불러옴!!(point: 호출)
console.log(user2._name); // 인구 곽

/*

(요약)
- setter: 대입연산자를 통해 값을 customizing하여 저장하는 행위( ex. burger.source = "good"; )
- getter: 호출(console.log / return)하여 해당 값을 불러오는 행위( ex. console.log(burger.source); )

*/

 

 

2-3) 생성자 함수

// 생성자 함수 : 객체의 틀을 만드는 함수
// 가상, 실체

// 객체 리터럴을 사용한 방식
function user3(_name, _lastName, _firstName, _age) {
  return {
    name: _name,
    lastName: _lastName,
    firstName: _firstName,
    age: _age,
  };
}

const ingoo = user3("곽인구", "곽", "인구", 32);
const 준영 = user3("장준영", "장", "준영", 28);
const 배열 = [ingoo, 준영];


// 생성자 함수 : 객체를 찍어내는 함수
// 생성자 함수는 선언 시 첫 글자를 대문자로 작성해야 함!!
// 생성자 함수는 만드는 순간 "this = {};"과 "return this;"가 생성되고, 이는 생략되어 있음!!
// 앞서 언급한 "가상"에 해당
function User(name, age) {
  // this = {};
  this.name = name;
  this.age = age;
  // return this;
}

// 인스턴스 생성했어? = 생성자 함수(붕어빵 틀)를 사용하여 인스턴스(새로운 붕어빵)를 생성했냐는 의미!!

// 앞서 언급한 "실체"에 해당
const 인구 = new User("곽인구", 32);
const 준영 = new User("장준영", 28);

 

 

2-4) class

/*

클래스(class) : 생성자 함수와 마찬가지로 객체를 찍어내는데
다만 생성자 함수의 함수명 부분을
class 명과 constructor(생성자)로 나눠 놓았다고 보면 됨
(즉, 동작 원리는 생성자 함수와 동일하지만 클래스는 "{}"가 하나 더 바깥에 붙었다고 보면 됨)

*/

class User {
  // constructor = 생성자
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const 인구 = new User("곽인구", 32);
const 준영 = new User("장준영", 28);

// 인스턴스화 : 객체를 만드는 행위

// 객체지향 : 객체를 가지고 동작하는 코드를 만들겠다는 의미
// 자바스크립트는 프로토타입 언어이며, 객체지향 언어가 아님!!