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


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

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

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

case study 1

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

`const name = "javascript";
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'



---

# 맺음말

좀 더 있는데 한번에 다 소개 하면 머리가 아프니 내일 2탄을 ... ㅋㅋ 행복한 주말 보내세요 ~

Comments 1


@upvu voted. voting percent : 29.26 %, delegate sp : 19442, token amount : 0, total sp of upvu : 1262437

27.06.2020 13:16
0