[JS] JavaScript 객체 기본

 

 

1. 수업소개

• 객체: 서로 연관된 변수와 함수를 그룹핑하고 이름을 붙인 것

 

 

 

2. 실습준비

editor 준비

VSCode 사용

 

 

 

3-1 객체의 기본

object.js

let memberArray = ['egoing', 'graphittie', 'leezhce'];
console.log(memberArray[1]);

//input
let memberObject = {
  manager: 'egoing',
  developer: 'graphittie',
  designer: 'leezhce',
};

memberObject.designer = 'leezche'; //update
console.log('memberObject.designer', memberObject.designer);
console.log("memberObject['designer']", memberObject['designer']);
console.log(`designer: ${memberObject.designer}`);
delete memberObject.manager; //delete
console.log('after delete memberObject.manager', memberObject.manager);
console.log(`delete manager: ${memberObject.manager}`);

 

 

 

3-2 객체와 반복문

object_loop.js

let memberArray = ['egoing', 'graphittie', 'leezche'];
console.group('array loop');
let i = 0;
while (i < memberArray.length) {
  console.log(i, memberArray[i]);
  i = i + 1;
}
console.groupEnd('array loop');
let memberObject = {
  manager: 'egoing',
  developer: 'graphittie',
  designer: 'leezche',
};
console.group('object loop');
for (let name in memberObject) { //(현재 원소의 이름이 들어갈 변수)in(객체)
  //객체에 있는 원소의 개수만큼 중괄호가 실행됨
  console.log(name, memberObject[name]);
}
console.groupEnd('object loop');

 

 

 

4-1 객체는 언제 쓰나

built-in.js

console.log("Math.PI", Math.PI);
console.log("Math.random()", Math.random());
console.log("Math.floor(3.9)", Math.floor(3.9));

• 자바스크립트는 미리 정의된 여러가지 기능을 제공
• 날짜와 관련된 기능, 수학과 관련된 기능 등 여러가지 기능들이 존재
• 이러한 기능들을 잘 정돈하기 위해 객체 이용

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects

 

 

 

4-2 객체 만들어 보기

built-in.js

console.log("Math.PI", Math.PI);
console.log("Math.random()", Math.random()); //method
console.log("Math.floor(3.9)", Math.floor(3.9));

let MyMath = {
  PI: Math.PI,
  random: function () {
    return Math.random();
  },
  floor: function (let) {
    return Math.floor(let);
  },
};

console.log("MyMath.PI", MyMath.PI);
console.log("MyMath.random()", MyMath.random());
console.log("MyMath.floor(3.9)", MyMath.floor(3.9));

• 객체 안에 포함된 함수는 메소드

 

 

 

5. this

this.js

let kim = {
  name: "kim",
  first: 10,
  second: 20,
  sum: function () {
    return this.first + this.second;
  },
};
// console.log(kim.sum(kim.first, kim.second));
console.log(kim.sum());

• 객체는 서로 연관된 변수와 함수를 그룹화하여 이름을 붙인 것
• 프로그래밍에서 자기 자신을 가리키는 표현은 this

 

 

 

6-1 constructor의 필요성

프로그래밍적으로 객체를 찍어내는 공장이 있어서 객체를 양산할 수 있다면?

 

 

 

6-2 constructor의 사례 - date

object_factory.js

let d1 = new Date("2022-3-16");
console.log("d1.getFullYear()", d1.getFullYear());
console.log("d1.getFullMonth()", d1.getMonth());

new 키워드를 사용하여 새로운 Date 객체 생성

 

 

 

6-3 constructor 만들기

object_factory.js

function Person(name, first, second, third) {
  this.name = name;
  this.first = first;
  this.second = second;
  this.third = third;
  this.sum = function () {
    return this.first + this.second + this.third;
  };
}

let kim = new Person("kim", 10, 20, 30);
let lee = new Person("lee", 10, 10, 10);
console.log(`kim.sum() ${kim.sum()}`);
console.log(`lee.sum() ${lee.sum()}`);

• 그냥 함수를 호출할 경우 일반 함수 취급
• new라는 키워드를 붙일 경우 객체를 생성하는 생성자가 됨
• 생성자를 constructor라고 함

 

 

 

7-1 prototype이 필요한 이유

prototype은 원형

Prototype based language

모든 객체가 공통적으로 사용하는 함수를 만들 수 있다면?

공통적으로 사용하는 속성을 만들 수 있다면?

 

 

 

7-2 prototype을 이용해서 재사용성을 높이기

prototype.js

function Person(name, first, second) {
  this.name = name;
  this.first = first;
  this.second = second;
}

// 성능 절약, 메모리 절약
Person.prototype.sum = function () {
  return "prototype : " + (this.first + this.second);
};

let kim = new Person("kim", 10, 20);
// kim 만 sum을 다르게 출력하고 싶을 때
kim.sum = function () {
  return "this : " + (this.first + this.second);
};
let lee = new Person("lee", 10, 10);

console.log(`kim.sum() ${kim.sum()}`);
console.log(`lee.sum() ${lee.sum()}`);

• Person 생성자에 prototype에 sum이라는 함수 정의
  • 생성자 함수 안에 메소드를 정의하는 코드가 들어 있지 않음
  • 객체가 생성될 때마다 호출되지 않고 한번만 생성하게 됨
  • sum의 내용이 수정된다고 해도 한 번만 수정하면 됨
  • 여러 개의 객체가 하나의 함수를 공유하기 때문에 성능을 높이고 메모리를 절약할 수 있음

 

 

 

8_1 Classes

• 자바스크립트는 가장 빠르게 발전하는 언어 중 하나
• class
  • constructor의 대체재
• 자바스크립트는 ECMA script라는 표준을 따름
  • class는 ECMA script6부터 도입된 문법 (이전 버전에서는 동작하지 않는 단점이 있음)

"es6 classes" | Can I use... Support tables for HTML5, CSS3, etc

Can I use 에서 확인

 

Babel · The compiler for next generation JavaScript

새로운 문법을 기존의 문법으로 치환해주는 javascript compiler

 

 

 

8-2 Classes의 생성

class.js

class Person {}

let kim = new Person();
console.log("kim", kim);

• 생성자 함수의 역할 2가지
  1. 객체를 만든다
  2. 객체의 초기 상태를 정의한다
• 객체의 초기 상태는 어떻게 정의???

 

 

 

9 class의 constructor function

class.js

class Person {
  constructor(name, first, second) {
    this.name = name;
    this.first = first;
    this.second = second;
  }
}

let kim = new Person("kim", 10, 20);
console.log("kim", kim);

• constructor 함수
  • class는 객체의 초기 값을 지정하기 위해서 객체가 생성할 때 실행되기로 약속한 함수가 있음
  • constructor 함수
    • 이 함수를 이용해 객체의 초기 값을 설정할 수 있음
    • JS는 객체를 생성할 때 자동으로 constructor 함수를 호출함

 

 

 

10. 메소드 구현

class.js

class Person {
  constructor(name, first, second) {
    this.name = name;
    this.first = first;
    this.second = second;
  }
  sum() {
    return "prototype : " + (this.first + this.second);
  }
}

let kim = new Person("kim", 10, 20);
kim.sum = function () {
  return "this : " + (this.first + this.second);
};
let lee = new Person("lee", 10, 10);

console.log(`kim.sum() ${kim.sum()}`);
console.log(`lee.sum() ${lee.sum()}`);

 

 

 

 

 

 

부스트코스 [자바스크립트의 시작] 강의 공부 기록