Goeun's Devlog. · A Jekyll theme

Javascript - 객체지향 기본 3 (Class)

28 Jul 2018 • Javascript

1. Class

프로토타입의 자바스크립트 > 클래스 기반 객체지향(대세)으로 변화하는 중

1.1 클래스 선언

1.1.1 클래스 선언하기
클래스는 선언할 때 클래스명을 대문자로 선언해야 함.
클래스 내부에 생성자(constructor) 선언

class Student {
  constructor(이름,국어,영어,수학){
  this.이름=이름;
  this.국어=국어;
  this.영어=영어;
  this.수학=수학;
  }

1.1.2 모든 객체가 공유하는 기능
생성자 함수 밖에서 공유할 기능을 선언하는 prototype과 달리, 클래스 내에서 선언함.
클래스 내에서 함수를 선언할때는 function 키워드를 사용하지 않아도 됨.

class Student {

    ...

    getSum() {
     return this.국어 + this.영어 + this.수학;
    }
    getAvg() {
      return this.getSum() / 3;  
    }
    toString() {
      return output = this.이름 + "\t" + this.getSum() + "\t" + this.getAvg() + "\n";
    }
}

1.2 인스턴스 생성하기

프로토타입과 동일
new 생성자함수명(속성값,속성값,...) 형태로 작성

var students=[];
students.push(new Student('우고은',80,90,78));
students.push(new Student('우고은',70,90,78));
students.push(new Student('우고은',60,90,78));
students.push(new Student('우고은',50,90,78));

1.3 출력부

프로토타입과 동일

var output= '이름\t총합\t평균\n';
for(var k=0; k<students.length; k++){
  output+= students[k].toString();
}
console.log(output);

Javascript - 객체지향 기본 2 (Prototype)

28 Jul 2018 • Javascript

1. Prototype

Javascript => 프로토타입 기반의 객체지향 프로그래밍
IE => 프로토타입 지원
최신 웹브라우저 => 클래스, 프로토타입 지원

1.1 생성자 함수 선언

1.1.1 생성자함수 만들기
생성자 함수는 선언할 때 생성자 함수 이름을 대문자로 선언해야 함.

function Student(이름,국어,영어,수학){
  this.이름=이름;
  this.국어=국어;
  this.영어=영어;
  this.수학=수학;
}

1.1.2 모든 객체가 공유하는 기능
prototype키워드를 사용하여 생성자 함수 밖에서 선언
생성자함수이름.prototype.함수이름 = function () {...} 형태로 작성
prototype 으로 선언된 기능들을 모든 객체가 공유하게 됨

function Student(이름,국어,영어수학) { ... }

//

Student.prototype.getSum = function () {
     return this.국어 + this.영어 + this.수학;
}
Student.prototype.getAvg = function () {
    return this.getSum() / 3;  
}
Student.prototype.toString = function () {
    return output = this.이름 + "\t" + this.getSum() + "\t" + this.getAvg() + "\n";
}

1.2 인스턴스 생성하기

인스턴스를 생성할 때 new 생성자함수명(속성값,속성값,...) 형태로 작성

var students=[];
students.push(new Student('우고은',80,90,78));
students.push(new Student('우고은',70,90,78));
students.push(new Student('우고은',60,90,78));
students.push(new Student('우고은',50,90,78));

1.3 출력부

기존과 동일

var output= '이름\t총합\t평균\n';
for(var k=0; k<students.length; k++){
  output+= students[k].toString();
}
console.log(output);

Javascript - 객체지향 기본 1

28 Jul 2018 • Javascript

1. 학생들의 성적 총점과 평균을 출력하는 코드 작성하기

1.1 배열에 인스턴스 추가하기

var students=[];
students.push({ 이름: '우고은', 국어:80, 영어:90, 수학:78 });
students.push({ 이름: '김이박', 국어:90, 영어:92, 수학:72 });
students.push({ 이름: '박이김', 국어:70, 영어:94, 수학:98 });
students.push({ 이름: '이박김', 국어:78, 영어:95, 수학:86 });

1.2 점수의 총합과 평균 출력하기

1.2.1. For 문 내부에 변수(total, avg) 선언하기

var output= '이름\t총합\t평균\n';
for(var i=0;i<students.length;i++){
  var total = students[i].국어 + students[i].영어 + students[i].수학;
  var avg = total/3;
  output += students[i].이름 + "\t" + total + "\t" + avg + "\n";
}
console.log(output);

1.2.2. 객체 내부에 메서드 삽입하기

for(var j=0;j<students.length; j++){
  students[j].total = function() {
   return this.국어 + this.영어 + this.수학;
  }
  students[j].avg = function() {
    return this.total() / 3;
  }
  students[j].toString = function(){
    return output = this.이름 + "\t" + this.total() + "\t" + this.avg() + "\n";
  }
}

1.3 출력하기

var output= '이름\t총합\t평균\n';
for(var k=0; k< students.length; k++){
  output+= students[k].toString();
}
  console.log(output);

1.4 한계

서로 다른 기능을 하는 코드들이 혼재되어 있어 코드의 가독성이 떨어짐
이를 위해 기능 별로 코드를 분리하여 코드의 가독성을 높이고자 함.

See the Pen Javascript 객체지향 기본[1] : 객체를 만드는 함수 by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.

2. 기능 별로 코드 분리해보기

동일한 기능을 하는 부분들을 분리하여 따로 작성함으로써, 협업 및 코드 관리가 용이

2.1 객체 선언

2.1.1 객체의 속성 정의

function createStudent(이름,국어,영어,수학){
  var object = {
    // 2.1.1 속성 정의
    //키로 선언되는 값 : 매개변수의 값
    이름 : 이름,
    국어 : 국어,
    영어 : 영어,
    수학 : 수학
  };

2.1.2 객체의 메서드 정의
createStudent() 함수 내부에 메서드 정의

 function createStudent(이름,국어,영어,수학){

    ...
    // 2.1.2 메서드 정의
    object.total = function() {
   		return this.국어 + this.영어 + this.수학;
  	}
  	object.avg = function() {
    	return this.total() / 3;
  	}

  	object.toString = function(){
    	return output = this.이름 + "\t" + this.total() + "\t" + this.avg() + "\n";
  	}
  	return object;
	}
}

2.2 student 객체 생성하기

createStudent()로 배열에 객체 추가

var students=[];
students.push(createStudent('우고은',80,90,78));
students.push(createStudent('우고은',70,90,78));
students.push(createStudent('우고은',60,90,78));
students.push(createStudent('우고은',50,90,78));

2.3 출력하기

toString() 함수 이용

var output= '이름\t총합\t평균\n';
for(var k=0; k<students.length; k++){
  output+= students[k].toString();	//toString()함수 이용
}
console.log(output);

2.4 한계

객체를 생성할 때 마다 같은 기능을 하는 메서드를 객체를 생성할 때 마다중복하여 정의하게 됨
메모리 낭비 발생
이를 해결하기 위해 객체지향 프로그래밍 방식의 prototype 개념이 도입됨.

See the Pen Javascript 객체지향 기본[1] : 기능 별 코드 분리하기 by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.

Javascript - 객체 (속성 추가와 제거)

27 Jul 2018 • Javascript

1. 정적으로 속성 추가하기

객체 내부에서 직접 추가

var student = {
이름 : "우고은"
	};
console.log(student); // 이름:'우고은'

2. 동적으로 속성 추가하기

객체 외부에서 속성 추가
객체명.추가할 속성명 = '추가할 속성 값' 입력

student.성별 = '여자';
console.log(student); // 이름:'우고은', 성별:'여자'

3. 속성 제거하기

delete 객체명.속성명 키워드 이용

delete student.이름;

console.log(student); // 성별:'여자'

4. toString() 메서드

자바스크립트의 모든 객체들이 내장하고 있는 함수

student.toString = () =>{
  return '안녕하세요';
}
console.log(student); // '안녕하세요', 성별 : '여자'

Javascript - 객체 (속성과 메서드)

27 Jul 2018 • Javascript

1. 함수에서 this 키워드 사용하기

객체 메서드 내부에서는 this 키워드를 사용하여 자기 자신이 가지고 있는 다른 속성을 참조할 수 있다.

var person = {
  name : '우고은',
  eat_a : function(food) {
    //this == person 객체
  document.write(this.name + '이 ' + food + '을 먹습니다');
  }

출력 결과

person.eat_a('밥');  // 우고은이 밥을 먹습니다.

2. Arrow 함수에서 this 키워드 사용하기

출력할 때 this.name 이 비워져 있음 화살표 함수에서는 this 를 바인딩 하지 않는다. ** 객체 내부에서 this 키워드를 활용하고 싶을 때는, 화살표 함수를 사용하지 않는다.**

    eat_b : (food) => {
  document.write(this.name + '이 ' + food + '을 먹습니다');
  }
}

출력 결과

person.eat_b('냠냠'); // 이 냠냠을 먹습니다

See the Pen Javascript - 객체 02 속성과 메서드 by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.