2. JavaScript 기초이론(1) : Class/변수/할당/spread/삼항

지선·2021년 7월 22일
0

1. Class


정의

  • 특정 객체를 생성하기 위해, 변수와 함수를 정의하는 일종의 틀
    (객체를 정의하기 위한 상태 + 함수)
  • 객체단위 코드를 그룹화하고, 쉽게 재사용하는 용도로 씀


구성

class Cat {
// 생성자 함수
  constructor(name) {
	// 여기서 this는 이 클래스입니다.		
    this.name = name; 
  }

// 함수
  showName(){
	console.log(this.name);
  }
}

let cat = new Cat('perl');
cat.showName();
console.log(cat);
  • 생성자함수 : 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화(초기값을 설정 한다고 생각하기!)하는 역할을 한다.
  • 함수 : 어떤 일을 하는 함수이다.



클래스를 상속하려면?

  • 이미 만들어 둔 어떤 클래스를 가지고 자식 클래스를 만듬.
class Cat {
	// 생성자 함수
  constructor(name) {
		// 여기서 this는 이 클래스입니다.
		this.name = name; 
	}

	// 함수
	showName(){
		return this.name;
	}
}

// extends는 Cat 클래스를 상속 받아 온단 뜻입니다.
class MyCat extends Cat {
	// 생성자 함수
  constructor(name, age) {
		// super를 메서드로 사용하기
		super(name); 
		this.age = age; 
	}
	
	// 부모 클래스가 가진 것과 같은 이름의 함수를 만들 수 있습니다.
	// 오버라이딩한다고 해요.
	showName(){
		// super를 키워드로 사용하기
		return '내 고양이 이름은 '+super.showName()+'입니다.';
	}
	
	showAge(){
		console.log('내 고양이는 '+this.age+'살 입니다!');
	}
}

let my_cat = new MyCat('perl', 4);
my_cat.showName();
my_cat.showAge();

super키워드

1) 메소드로 사용( constructor 안에서 )

  • 부모 constructor를 호출하면서 인수를 전달함
  • this를 쓸 수 있게 해줌

2) 키워드를 사용할 수 있다.

  • 부모 클래스에 대한 필드나 함수를 참조할 수 있음





2. Scope와 let,const


  • Scope? 변수의 유효범위

변수

  • var : 함수단위
  • let : 블록단위(변수:let으로 선언한 변수는 값이 변할 수 있음)
  • const : 블록단위(상수:한번 선언한 값은 바꿀 수 있음)




3. = 과 == 과 ===


  • = : 할당
  • == : 유형x 비교
  • === : 유형o 비교




4. spread 연산자


어떤 객체안에 있는 요소들을 객체 바깥으로 꺼내줌.

let array = [1,2,3,4,5];
let new_array = [...array];//[1,2,3,4,5]



5. 조건부 삼항 연산자


조건 ? 참일경우 : 거짓일경우

let info = { name : '지선', age : 25 }
let is_me = info.name === '지선' ? true : false ;
profile
프론트엔드개발자가 될거야!

0개의 댓글