TIL/HTML, CSS, JS 이것저것

자바스크립트 object 내용 복습1 (2021-02-24)

Dev_Dank 2021. 2. 24. 18:51

Udemy에서 ZTM 강의를 통해 React 를 사용한 앱 만들기 까지 맛보았으나 조금 더 JS에 대한 대한 깊은이해와 정리가 필요하다고 느껴져서 React 공식문서나 MDN 문서등을 보며 공부한 내용을 정리하려 합니다.

reactjs.org/docs/hello-world.html

자바스크립트 복습

React공식문서에서는 자바스크립트를 어느정도 이해할것을 권장하며 링크에서 복습할것을 추천한다. 

내가 잘 이해하지 못한 object에 대한 설명링크는 이쪽

this가 무엇인지에대한 링크

this keyword는 지난 강의에서 배웠듯 현재코드가 쓰여지는 object를 가리킨다. 

const person1 = {
  name: 'Chris',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}
//여기서 this는 person1 오브젝트


const person2 = {
  name: 'Deepti',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}
//여기서 this는 person2 오브젝트

 

OOP(object oriented programming)란 무엇인가?(링크)

가장 기본적인 아이디어는 object를 통해서 현실세계에 있는것을 프로그램으로 표현하거나, OOP를 하지 않으면 활용하기 불가능하거나 힘든 기능들을 쉽게 사용하게 해주는 것이 목적이다. 

1. 오브젝트 템플릿 만들기

예를들어 사람을 object로 만들어 보려고 한다고 해보자. 

사람에게는 주소, 키, 발사이즈, 등등 여러 특성이 있지만 일단 나는 사람의 이름, 나이, 성별, 관심사만 알고싶고 이 데이터를 기반으로 짧은 자기소개와 인사를 하게 하고 싶다고 하자. (이렇게 복잡한 것(사람의 모든 특성)을 프로그램의 목적에 맞게 간단한 모델로 만드는 것을 abstraction(추상화)라고 한다.)

2. 실제 오브젝트 만들기 

1에서 만든 클래스로 이제 실제 사람 오브젝트를 만들수 있다. 

클래스로부터 오브젝트 인스턴스가 만들어지면 클레스의 constructor(생성자) 함수가 해당 오브젝트 인스턴스를 만들기위해 돌아간다. 이렇게 클래스로 부터 오브젝트를 만드는 과정을 instantiation 이라고 한다. 

3. 클래스로 클래스 만들기 

OOP에서는 클래스를 기반으로 새로운 클래스를 만들수 있다. 이 새로운 child classes(subclass라고도한다.) 는 parent class로부터 데이터와 코드를 상속 받을수 있어서 class가 재활용이 가능하다. 또한 클래스 별로 기능이 다르다면 클래스별 특화된 기능또한 따로 추가해넣을 수 있다. 

클래스 별로 상속 받은 부분은 공통이지만 줄친부분에서 볼수 있듯이 특화된 기능이 따로 존재한다. 

참고로 여러 오브젝트 타입에 동일 기능을 적용해 넣을수 있는것을 어려운말로 polymorphism(다형성)이라고 한다. 

기존에 object를 만드는 방식은 아래와 같이 constructor function을 이용하는 것이다. (constructor function은 대문자로 시작하는게 관습이다.)

function Person(name) {
    		this.name = name;
    		this.greeting = function() {
    			alert('Hi! I\'m ' + name + '.');
    		};			
		};

let person1 = new Person('Bob');
let person2 = new Person('sarah');

person 1 과 person2 둘다 같은 name property와 greeting이라는 method를 지닌 것을 콘솔창에서 확인가능하다. 

new 키워드는 브라우저에게 새로운 오브젝트 인스턴스를 만들고 싶다는 것을 알리는 역할이다. 

아래와 같이 좀더 복잡하게 constructor function을 이용해서 더 자세한 오브젝트를 만들수 있다. 

function Person(first, last, age, gender, interests) {
    		this.name = {
    			first : first,
    			last : last
    		};
    		this.age = age;
    		this.gender = gender;
    		this.interests = interests;
    		this.bio = function() {
    			alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interesrs[1] + '.');
    		};
    		this.greeting = function() {
    			alert('Hi! I\'m ' + this.name.first + '.');
    		};
		}

let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);

위의 함수가 성별별로 문구가 다르게 나오고 (지금은 He로만 표현...) interests의 배열 크기가 커질 것을 대비해 나는 아래와 같이 리팩토링을 했다. 

function Person(first, last, age, gender, interests) {
    		this.name = {
    			first : first,
    			last : last
    		};
    		this.age = age;
    		this.gender = gender;
    		this.interests = interests;
    		this.bio = function() {
    			let interestsString = '';
    			for (let i = 0; i < this.interests.length; i++) {
                	interestsString += this.interests[i]
    				if (i === this.interests.length -1) {
    					break
    				} else {
    					interestsString += ' and '
    				}    						
    			};
    		if (gender === 'male'){
    			alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + interestsString + '.');
    		} else {
    			alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. She likes ' + interestsString + '.');
    		}
    		};
    		this.greeting = function() {
    			alert('Hi! I\'m ' + this.name.first + '.');
    		};
		}

		let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing', 'hiking', 'campling']);