JavaScript 에러 해결 방법

이번 포스트에서는 JavaScript 코드를 입력하면서 만날 수 있는 error에 대해서 다루고자 합니다. 그리고 error와 관련된 JavaScript 개념을 함께 소개합니다. 

JavaScript 에러 해결 방법

JavaScript

Assignment to constant variable 

타입 에러, const 변수에 재할당을 시도했을 때 보이는 에러입니다. TypeError: Assignment to constant variable. 아래 코드에서 myName='min'; 부분이 재할당하는 부분으로 보이는데, 이 부분을 없애거나, 다른 변수를 만들어서 해당 오류를 없앨 수 있습니다. 또는 const myName = 'max';이 부분을 let myName ='max';로 설정해주어서 여러 번 할당받을 수 있도록 설정할 수 있습니다. 

const myName = 'max';
console.log(myName);
myName='min';

 

const 정의: const로 선언된 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다. const에는 나중에 값을 변경할 수 없기 때문에 선언되는 같은 문에 그 값을 지정해야 합니다. 상수는 상수 또는 변수와 이름을 공유할 수 없습니다. 

 

let 정의: let은 블록 범위를 가지는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수 있습니다. const와 다르게 재할당이 가능합니다. var와 다른 점은 var는 현재 함수 또는 전역에서 접근할 수 있는 변수이고, let은 let을 사용한 범위 내에서 제한되기 때문에 var처럼 이상한 곳에서 값이 바뀔 위험이 적습니다. 

 

Unexpected token '=>'

const printMyName4 = =>{
                     ^^
SyntaxError: Unexpected token '=>'

printMyName4에서 =>이 기호가 예상하지 못한 기호이기 때문에 발생한 에러입니다. 본래 의도는 화살표 함수(arrow function expression)를 의도했기 때문에 const printMyName4 = () =>{ 로 수정하면 됩니다. ( = = 사이에 ()를 추가했습니다.) 

const printMyName4 = =>{
    console.log('Max4');
}

화살표 함수는 전통적인 함수 표현(function 키워드를 사용하여 만드는 함수)의 대안입니다. this나 super에 대한 바인딩이 없기 때문에 This를 빼먹어서 발생하는 오류를 줄일 수 있습니다. 그리고 function 키워드를 입력하지 않아서 더욱 짧은 코딩을 할 수 있다는 장점이 있습니다. 

위에서 매개변수가 없는 경우 괄호를 생략해서 오류가 발생했는데, 매개변수가 하나인 경우엔 괄호 생략이 가능합니다. 예시 코드는 아래에 있습니다. 그리고 매개변수가 여러 개일 경우 괄호로 반드시 묶어주어야 합니다. 화살표 함수를 만드는 방법은 전통적인 함수 표현에서 function 대신 const를 입력하고, = 추가하고, 괄호 안에 매개변수를 넣고, => 표시로 화살표를 만들고, 대괄호 안에 식을 쓰면 됩니다. 

//function myFunc() {}
//function 사용하지 않아서 편하고, This로 에러 발생 줄임 
//const myFunc = () => {}

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

printMyName('Max');

const printMyName2 = (name) => {
    console.log(name);
}

printMyName2('Max2');

//하나의 인자를 전달할 때 () 생략 가능 
//0개일때 (), 여러개일때 (a, b, c)
const printMyName3 = name => {
    console.log(name);
}

//ES5
var selected = allJobs.filter(function (job) {
    return job.isSelected();
});

//ES6
var selected = allJobs.filter(job => job.isSelected());

화살표는 바로 위 코드처럼 함수를 아주 간단하게 표현하는 데 사용됩니다. Identifier (식별자) => Expression (표현식)으로 코딩하면, function과 return을 사용하지 않아도 됩니다. 다른 예시를 보자면 아래 코드처럼 화살표를 이용하여 함수를 간편하게 바꿀 수 있습니다. 

//ES5
val sum = values.mini(function (a,b){
    return a+b;
    }, 0);
    
//ES6
val sum = values. mini((a,b) => a+b, 0);

 

 

Must call super constructor in derived class before accessing 'this'

        this.name='week-book';
        ^
ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

Class와 관련된 에러입니다. class를 선언했을 때 extend로 상속받았는데, constructor 생성자에 super()를 추가하지 않아서 발생하는 에러입니다. 

class Website{
    constructor () {
        this.title = 'Website';
    }
    printTitle(){
        console.log(this.title);
    }
}

class Blog extends Website{
    constructor () {
        this.name='week-book';
    }
    printName() {
        console.log(this.name);
    }
}

const myBlog = new Blog();
myBlog.printName();
myBlog.printTitle();

해결 방법: 자식 class 생성자에 super();를 추가하면 됩니다. 

class Blog extends Website{
    constructor () {
        super();
        this.name='week-book';
    }
    printName() {
        console.log(this.name);
    }
}

super 정의: super는 부모 오브젝트의 함수를 호출할 때 사용되는 키워드입니다. super([arguments]); 을 사용하면 부모 생성자를 호출합니다. 생성자에서는 super가 this보다 먼저 호출되어야 합니다. this를 먼저 쓰면 참조 오류가 발생합니다.