class & object

class : template에 속함 [- ES6에서 추가 -]

object: 클래스에 데이터를 넣어서 사용하는것.

// class 선언 방식
class Person{
	constructor(name, age){
    this.name = name;
    this.age = age;
    }
    
    speak(){
    	console.log(`${this.name}: hello!`);
	}
}

//object create
const userName = new Person("userName1", 20);
console.log(userName.name);
console.log(userName.age);
userName.speak();

==> class, object 사용예제

 

// Getter & Setter
class User{
	constructor(firstName, lastName, age){
    	this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
        }
    get age(){
    	return this._age;
    }
    
    set age(value){
    	if(value < 0){
        	throw Error('age can not be negative');
        }
    	this._age = value;
    }
}
const user1 = new User('steve', 'Job', -1);
console.log(user1.age);

==> getter, setter 사용예제

 

//상속, 다향성
class Shape{
	constructor(width, height, color){
    	this.width = width;
        this.heigjt = height;
        this.color = color;
    }
    
    draw(){
    	console.log(`drawing ${this.color} color of`);
    }
    
    getArea(){
    	return width*this.height;
    }
}

// -> shape class 상속하여 내부 내용 사용가능.
class Rectangle extends Shape(){}
class Triangle extends Shape(){
	//overrinding
    getArea(){
    	return (this.width * this.height)/2;
    }     
}

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();

const triangle = new Triangle(20, 20, 'red');
rectangle.draw();

==> 상속과 다향성 사용예제

 

//Object
// {Key:Value} 의 집합체

// 1. Literal and properties
const obj1 = {} // -> 1. 'object literal' syntax
const obj2 = new Object(); // -> 2. 'Object constructor' syntax

const user = {name: 'son', age: 20};

// JS는 동적 타입이 Runtime에서 결정되기 때문에 중간에 property를 추가할 수 있음.
user.hasJob = true;

// delete 기능도 가능함. (원하지 않는 property를 뺄 수 있음)
delete user.hasJob;

// 2. Computed properties
// key는 string type로 지정을 해줘야한다.
console.log(user.name); 
console.log(user['name]);
// => 2가지로 접근가능.

// 3. Property value shorthand.
const person1 = {name: 'bob', age=2};
const person2 = makePerson('son', 20);

function makePerson(name, age){
	return {
    	name: name, //-> name 로 생략가능.
        age: age    //-> age 로 생략가능.
    };
}

// 4. Constructor.
const person = new Person('son', 20);
function Person(name, age){
	this.name = name;
    this.age = age;
}

// 5. in operator
// object 안에 해당하는 key가 있는지 없는지 확인하는것.
console.log('name' in person) -> true
console.log('age' in person) -> true
console.log('larh' in person) -> false

// 6. for..in VS for..of
for(key in person){ // person 객체안의 key들이 순서대로 console에 출력.
	console.log(key);
}

// for(value of iterable) // 값이 for~of를 사용하면서 console창에 출력을 할 수 있도록 한다.
const array = [1,2,3,4,5];
for(value of array){
	console.log(value);
}

// 7. cloning
const user1 = {name: 'son', age:'20'};
const user2 = user1; // => user1 의 내용을 같이 사용함.
user2.name = 'kim';
console.log(user1); // => user2의 name을 변경했지만 user1에도 적용되어서 나옴.

const user3 = {};// 빈 객체 생성
Object.assign(user3, user1) //복사받고자하는 객체 입력, 복사하고자하는 객체 입력 + 뒤에 나오는 property가 더 있을수록 앞에 property의 값을 덮어씌워주는 역할을 한다.

==> Object 사용예제