This content got low rating by people.

[매일코딩] 009 - 자바스크립트로 개발 시 흔히 하는 실수와 해결법

wonsama(71)

Published in

mini.topia

Words

261

Reading

2 min

Listen

Play

출처 : The Nine Most Common Mistakes Developers Make in JavaScript (and How to Fix Them)

1. = (할당) / == 또는 === (동일 비교 연산자)

IF 구분에는 = (할당) 을 통해 비교하면 안됨
== 과 === 의 차이점은 type casting 이후 비교하는지 여부임.

case study 1

아래와 가은 경우 비교 하는 곳에서 = 할당을 수행하여 if 구문 내부의 문장이 실행됨. => == 연산자를 사용하는 것을 권장

if ((name = "nodejs")) {
    console.log(name);
}
// output - nodejs

case study 2

첫번째 경우는 자동으로 type casting 이후 비교 하기 때문에 true 참을 반환
두번째 경우는 type casting 을 하지 않고 비교 하기 때문에 "1" (문자열) 1 (숫자) 는 타입이 다르기 때문에 false 거짓을 반환

const number = "1";
console.log(number == 1);
// true
console.log(number === 1);
// false

2. callback 사용시 동기화 처리

시간이 흐른 후 (setTimeout) callback 함수를 수행하기 때문에 아래와 같이 출력된다.

function callback() {
    console.log("I am the first");
}
setTimeout(callback, 300);
console.log("I am the last");
// output
// I am the last
// I am the first

secondNumber 에 값이 할당되기 이전에 console.log 함수가 수행되므로 NaN 을 출력하기 된다.

function addTwoNumbers() {
    let firstNumber = 5;
    let secondNumber;
    setTimeout(function () {
        secondNumber = 10;
    }, 200);
    console.log(firstNumber + secondNumber);
}
addTwoNumbers();
// NaN

위 예시처럼 해당 함수가 실행되는 시점이 중요하므로 그것을 고려하여 함수의 위치 지정을 해야 된다. 함수 아래

3. this 의 잘못된 참조

첫번째 함수 ( printName ) this 는 obj 에 선언된 값을 참조하지만, 두번째 (printNameIn2Secs) 함수는 setTimeout 함수 아래 this 를 사용하여 obj가 아닌 printNameIn2Secs 함수를 가르치게 된다. 이런 경우 setTimeout 함수 위에 let that = this; 이런식으로 상위 참조를 that 변수로 참조하는 것도 대안이다.

const obj = {
    name: "JavaScript",
    printName: function () {
        console.log(this.name);
    },
    printNameIn2Secs: function () {
        setTimeout(function () {
            console.log(this.name);
        }, 2000);
    },
};
obj.printName();
// JavaScript
obj.printNameIn2Secs();
// undefined

4. Object 의 불변성 묵살하기 ( 할당을 통해서 ... )

obj2 에 obj1 을 참조 시켜서 둘은 동일한 참조된 값을 지니게 되어 아래와 같이 값을 출력한다.

const obj1 = {
    name: "JavaScript",
};
const obj2 = obj1;
obj2.name = "programming";
console.log(obj1.name);
// programming

이걸 해결하기 위해 아래와 같이 ... rest 연산자를 활용하여 값을 복제 할당하여 deep copy 작업을 수행하면 의도한 대로 작업을 수행할 수 있다.

const obj1 = {
    name: "JavaScript",
};
const obj2 = { ...obj1 };
console.log(obj2);
// {name: 'JavaScript' }
obj2.name = "programming";
console.log(obj.name);
// 'JavaScript'