191128_TIL_02(JS기초_class, ES6(arrow function)

jotang·2019년 11월 29일
0

개발로그

목록 보기
6/18

1. class

1.1 객체 생성자

  • 붕어빵의 틀을 갖는 것과 비슷
  • 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값 혹은 함수들을 구현 할 수 있게 해준다.
function Animal(type, name, sound) {
  	this.type = type;
  	this.name = name;
  	this.sound = sound;
  	this.say = function() {
    	console.log(this.sound);
  	};
}
const dog = new Animal('개', '멍멍이', '멍멍');
const cat = new Animal('고양이', '야옹이', '야옹');
dog.say(); // 멍멍
cat.say(); // 야옹
  • 함수의 이름을 대문자로 시작
  • 새로운 객체를 만들 때에는 new 를 앞에 붙여주어야한다.

1.2 class

  • object 구조의 객체 틀을 만들고, 비슷한 모양의 객체를 공장처럼 찍을 수 있다.
  • 상속이 훨씬 쉽다.
  • css의 class와는 전혀 다른 개념
  • object와 class는 문법이 비슷
  • class에는 cunstructor라는 생성자 함수가 필요
class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}
//class를 통해 생성된 object를 instance라고 부른다.
//Car는 class의 이름(항상 대문자로 시작)
//class의 실행범위에서 this는 해당 instance를 의미
//name, price 같은 인자는 변경 가능한 상태값이자, class 내부의 어느 곳에서나 사용
//할 수 있는 변수를 '멤버변수'라고 부른다
//'멤버변수'는 this로 접근

1.3 class(Instance)

  • class를 통해서 생성된 객체
  • class의 property이름과 method를 갖는 객체
  • instance마다 모두 다른 property값을 갖는다.
const morning = new Car('Morning', 20000000);
//instance는 new를 붙여서 생성
//cunstructor에 필요한 정보를 인자로 넘겨줌
//instance를 새로운 변수에 저장

1.4 class(methods)

  • method는 함수
  • object가 property값으로 갖고 있는 것을 method라 한다.
  • class의 method는 object와 똑같은 문법
  • 객체는 property마다 ,(쉼표)로 구분, but class는 아님.
class Car {
  	constructor(name, price) {
    	this.name = name;
    	this.price = price;
    	this.department = "선릉지점";
  	}
		applyDiscount(discount) {  
    	return this.price * discount;   
  	}
		changeDepartment(departmentName) {
    	this.department = departmentName;
  	}
}
const ray = new Car('ray', 2500000)
const socar = new Car('socar', 3000000)
//총 4개의 method 구현
class MyMath {
  constructor(num1, num2) {
    this.num1 = num1;
    this.num2 = num2;
  }
  add(num1, num2) {
    return this.num1 + this.num2;
  }
  multiply(num1, num2) {
    return this.num1 * this.num2;
  }
  substract(num1, num2) {
    return this.num1 - this.num2;
  }
  getNumber(num1, num2) {
    return [this.num1, this.num2]
  }
}
const math = new MyMath(3, 4);
console.log(math);
console.log(math.add());
console.log(math.multiply());
console.log(math.substract());
console.log(math.getNumber());

2. [ES6] arrow function

//ES5 
function getN(userInfo, label) {
   return userInfo[label];
 }
//ES6
 const getN = (userInfo, label) => {
   userInfo[label]
};
//ES5
let sayHi = function() {
	alert('Hello');
};
console.log(sayHi())
//ES6
let sayHi = () => {
  alert('Hello');
}
sayHi()
//ES6
const getName = info => info['name'];
//ES5
function getName(info) {
  return info['name']
}

3. [ES6] template literals, string method

3.1 template literals

//ES5
function getEmail(username) {
  return (username)+'@gmail.com'
}
//ES6
const getEmail = username => `${username}@gmail.com`;
getEmail('jotang')
const name = '조개발'
//ES5
const hi = '안녕하세요. 저는 ' + name + ' 입니다.';
//ES6
const hi = `안녕하세요. 저는 ${name} 입니다.`;
//enter 처리(break line)
//ES5
let detail = '오늘도\n'+'내일도\n'+'화이팅';
//ES6
let detail = `오늘도
내일도
화이팅

코딩..`;
//back tick(``)사용으로 srting을 입력한대로 처리된다

3.2 string method

  • 3가지 method
  • startsWith : string의 시작 문자
  • endsWith : string의 마지막 문자
  • includes : stirng에 포함되어 있는 문자
    const email = 'jotang3726@gmail.com';
    console.log(email.indexOf('8')); //8이 없음으로 -1반환
    console.log(email.startsWith('37')); //false
    console.log(email.startsWith('jo')); //true
    console.log(email.endsWith('com')); //ture
    console.log(email.includes('@gmail')); //ture
    //특정 문자열의 반복(repeat 함수 사용)
    '@'.repeat(10);
 


> 참조 : https://javascript.info/string

profile
Jotang's velog

0개의 댓글