[JavaScript] 제로부터 시작하는 자바스크립트(1)

유데미로 React 를 수강하면서 맥스쌤이 자바스크립트 복습을 해주시는데,

자바스크립트가 아리송까리송 할때 들어와서 보면 좋을 것 같아서 정리 해 보려고 한다.

 

 

 

[변수]

기존 javascript에서는 변수를 선언할때 "var" 만을 사용했는데, 

es6 javascript에서는 "let" 과 "const" 가 등장하였으나~

자바스크립트를 제대로 공부하지 않고 무작정 문제만 풀었던 나는 뭐가 다른건지도 모르고 내 마음대로 번갈아가며 썼었다..

 

먼저 let은 변수를 선언하고 그 변수를 다른 값으로 갱신 했을 때, 오류 없이 변경되는 경우에 사용한다!

그리고 const는 변수를 선언 한 뒤에 갱신하면 오류가 뜬다. 상수라고 생각하면 될 것 같다.

 

예를 들어

 

let myName = 'Coyangee';

console.log(myName);

 

myName = 'dogi';

console.log(myName);

는 아무런 문제 없이 dogi 가 출력되지만, 

 

const myName = 'Coyangee';

console.log(myName);

 

myName = 'dogi';

console.log(myName);

은 출력은 되지만 TypeError가 뜬다.

상수 변수에 값을 재할당하려고 했기 때문이다 !

 

[화살표 함수]

기본의 함수는

function myFnc() {

...

}

화살표 함수는

const myFnc = () => {

...

}

화살표 함수의 구문은 function 키워드를 생략했기 때문에 일반적인 함수보다 짧다.

 

fucntion printMyName(name) {

console.log(name);

}

 

printMyName('Coyangee')

 

fucntion printMyName = (name) => {

console.log(name);

}

 

printMyName('Coyangee')

 

-> 두 경우 모두 Coyangee 출력!

화살표 함수의 경우 인수가 한 개 뿐이라면 ()를 생략할 수 있다.

fucntion printMyName = name => {

그러나 인수가 하나도 없다면 괄호를 생략하는 것이 아니라 빈 괄호 쌍을 입력해 주어야 한다.

화살표 함수를 이용하면 코드의 길이가 짧아지는데, 예를들어 곱하기 계산을 하려고 하면 

const multiply = number => number * 2;

console.log(multiply(2));

이렇게 짧게 쓸 수 있당.

 

 

[클래스]

 

상속 가능 !

class Person {
  constructor() {
	this.name = 'Coyangee';
}

printMyName() {
	console.log(this.name);
  }
}

const person = new Person();
person.printMyName();

일반적인 클래스 사용 

 

class Human {
  constructor() {
  	this.gender = 'female';
}

  printGender() {
  	console.log(this.gender);
  }
}

class Person extends Human {
  constructor() {
  	super();
    this.name = 'Coyangee';
}

printMyName() {
	console.log(this.name);
  }
}

const person = new Person();
person.printMyName();
person.pritnGender();

상속 사용 !

서브클래스에서는 super 생성자를 먼저 호출해야함 !! **