김민태의 데브캠프 2기 - javascript 정리

저번 HTML/CSS에 이은 javascript 강의 내용을 정리하고자 한다.

 

1. 로드맵

https://roadmap.sh/javascript

위 사진은 'javascript'에서 우선적으로 학습되어야할 내용을 담은 로드맵이다 

강사님께서 추천하신 내용이니 참고하기 바란다.

 

다음은 강의 내용 중에서 중요하다고 생각하는 부분이다.

• 식별자
  • data에 이름을 붙여서 저장하지 않으면 data를 읽고 바로 정보가 사라짐.
  • 데이터를 가리키도록 허용하는 식별자가 let
  • const(상수)는 let과 다르게 처음 값을 할당하고 재할당이 불가(고정)
  • javascript는 식별자가 data value의 종류(type)를 제한하지 않기 때문에 위에서 설명한 차이를 알아두자

• 객체
  • 각 데이터에 대해 이 데이터가 어떤 데이터인지에 대한 설명(이름)이 필요할 때 리스트 안에 객체를 넣을 수 있음

예시) 

function User(first, last){
    this.firstName = first;
    this.lastName = last;

}

class cUser {
    constructor(first, last){
        this.firstName = first;
        this.lastName = last;        
    }
    getFUllName(){
        return `${this.firstName} ${this.lastName}`
    }
}


const heropy = new User('Heropy', 'Park');

 

위와 같이 'new' 생성자 키워드를 이용하여 함수 또는 class의 동적 객체를 만들어 사용할 수 있다.

이때 heropy를 '인스턴스'라고 한다.

 

2. this

 

함수에 따라 두가지로 나뉜다. 

1. 일반 함수는 호출 위치에 따라 this 정의
2. 화살표 함수는 자신이 선언된 함수 범위에서 this 정의

const heropy = {
    name: 'Heropy',
    normal: function(){
        console.log(this.name);
    },
    arrow: () => {
        console.log(this.name);
    }
}

normal이 일반함수, arrow가 화살표 함수이다.

위에서 설명한 일반 하무와 화살표 함수의 차이를 알아야 나중에 코드를 작성할 때 의도한 대로 동작하게 할 수 있으므로 

결과와 함께 자세히 살펴보겠다.

 

우선 일반함수의 경우 호출 위치에 따라 this를 정의하므로 변수 heropy의 객체 안에서 정의되어 있는 name : 'Heropy'에 따라 결과값이 Heropy가 출력되었다.

 

화살표함수의 경우 자신이 선언된 함수 내에서 값을 찾는데, arrow함수 내에서 name에 대한 값 정의가 되어있지 않으므로 이상한 값이 출력되었다. 

원래는 undefined가 출력되어야 하는데 왜 ..? 

 

3. 상속

https://brunch.co.kr/@myolivenote/265

위 사진을 사용한 이유는 상속이 부모가 자식에게 무언가를 물려준다는 것을 의미하기 때문이다.

다음의 코드를 살펴보자.

 

class Vehicle{
    constructor(name, wheel){
        this.name = name;
        this.wheel = wheel;
    }
}

 

Vehicle이라는 최상위 부모 class가 있다.

이때 클래스명이 대문자로 시작함을 알 수있는데, 이는 생성자를 사용하는 클래스를 암시함을 알리기 위함이다.

이렇게 첫문자를 대문자로 작성하는 방법을 Pascal case라고 한다. 

기본 생성자로 매개변수로 name과 wheel을 받아 이를 this로 저장하고 있다.

따라서 이를 통해 입력받은 값이 저장될 것을 알 수 있다.

const myVehicle = new Vehicle('운송 수단', 2);
console.log(myVehicle);

의도한대로 값이 저장되었음을 알 수 있다.

다음은 extends 키워드를 이용하여 이를 상속(확장)하여 새로운 클래스를 생성한다.

//extends : 다른 클래스를 확장, 상속한다.
class Bicycle extends Vehicle{
    constructor(name, wheel){
        //부모 매개변수 참조
        super(name, wheel)
    }
}

이때 우리가 살펴보아야할 코드는 'super'이다.

이는부모 클래스의 생성자 호출 키워드로, 이미 위에서 작성되어있는 this.name, this.wheel에 값을 저장한다.

 

그다음 new 샏성자 키워드를 이용하여 객체를 만들고 값을 넣어 콘솔로 확인한다.

const myBicycle = new Bicycle('삼천리', 2);
const daugthersBicycle = new Bicycle('세발',3);
console.log(myBicycle)
console.log(daugthersBicycle);

 

의도한대로 값이 저장됨을 확인 할 수 있다.

 

마지막으로 매개변수를 추가한 클래스이다.

class Car extends Vehicle{
    constructor(name, wheel, license){
        super(name, wheel);
        this.license = license;
    }
}

'super'키워드를 사용하여 Vehicle 클래스의 생성자를 호출하여 name과 wheel을 저장하고,

this.license = license를 통해 입력받은 license 값을 저장한다.

그렇다면 값을 넣어 확인해보자

 

const myCar = new Car('벤츠', 4, true);
const daughtersCar = new Car('포르쉐',4,false);
console.log(myCar);
console.log(daughtersCar);

 

상속받은 name과 wheel 뿐만아니라 추가한 license에 대한 값도 저장되었다.

 

4. Timer 함수 

const timer = {
    name: "Heropy!!",
    timeout: function() {
        //setTimeout(함수, 시간); ms 단위
        // setTimeout(function(){
        setTimeout(()=> {
            console.log(this.name);
            // 결과값 : Heropy!!
        },2000)
    }
}
timer.timeout();

javascript에서는 setTimeout 함수를 제공하는데,  매개변수 값을 함수와 시간 두개로 받는다.

이때 시간은 ms단위를 사용한다. ex) 3000 -> 3초

실행해보면 2초가 지난 후 Heropy!!라는 값이 출력된다.