[JS] - 증감연산자를('++'와 '--') 사용하면 안되는 이유(EsLint no-plusplus) - 간단하고 쉽게 이해하기

🧹 간단 정리

JS에서는 ++, -- 말고 '+= 1'을 사용하자.

 

(자세한 내용은 아래에.. 짧으니 읽어보길 추천한다! 도움이 된다 👀)

---

😤 서론 (자바스크립트에서 ++와 -- 사용을 피해야 하는 이유)

필자는 평소처럼 ++와 -- 연산자를 사용하던 어느 날 ESLint의 no-plusplus 규칙을 마주했다.

 

🤷🏻‍♂️🤷🏻‍♂?? 왜 왜 사용하면 안 되는데? 너 뭔데 도대체 왜?

정말 미추어 버리겠네!?!.. 진짜 너무 궁금하니 바로 알아보자...

 

---

👀 공식 페이지 확인

eslint의 링크

위 링크를 클릭하면 공식 홈페이지에 친절히 나와있다(https://eslint.org/docs/latest/rules/no-plusplus)

공식 페이지를 토대로 이야기하자면 아래와 같은 이유로 인하여 사용을 지양한다. 

 

 

---

 

✍🏻 자동 세미콜론 삽입

자바스크립트는 종종 세미콜론을 자동으로 삽입해 코드의 끝을 추정한다!

이런 특성 때문에 공백에 따라 ++와 --의 작동 방식이 달라질 수 있다.

 

코드로 확인해 보자

var i = 10;
var j = 20;

i ++
j
// i = 11, j = 20

 여기서 i는 11이 되고 j는 20이 된다.

하지만 공백을 조금만 달리 한다면??

var i = 10;
var j = 20;

i
++
j
// i = 10, j = 21

 

여기서 i는 여전히 10이지만, j는 21이 된다.

이처럼 자바스크립트에서는 공백이 코드의 의미를 크게 바꿀 수 있기 때문에 ++와 -- 연산자의 사용은 권장되지 않는다.

 

 

---

 

😓 그럼 뭘 써야 하는데?

ESLint에서 추천하는 ++와 -- 대신 사용할 수 있는 명확하고 안전한 방법은.

+= 1 또는 -= 1을 사용하면 변수의 값을 명확하게 변경할 수 있다.

 

🧑🏻‍💻 오류 코드

// 비추천 (ESLint 오류 발생 코드)
var foo = 0;
foo++;

var bar = 42;
bar--;

for (i = 0; i < l; i++) {
    doSomething(i);
}

 

 

 

🧑🏻‍💻 추천 코드

아래처럼 for 루프에서도 동일하게 적용할 수 있다. 

// EsLint 추천 코드
var foo = 0;
foo += 1;

var bar = 42;
bar -= 1;

for (i = 0; i < l; i += 1) {
    doSomething(i);
}

 

 

---

👍🏻 마무리

다들(본인 포함!) 'eslint-disable-next-line @typescript-eslint/no-unused-vars' (치트키) 주석으로 상황을 모면하려 하지 않고

근본적인 문제를 해결하려는 개발자가 되자!