Medium - Common JavaScript Mistakes; Part 1
in Trend
Trend 파악을 위한 Medium 기고문 포스팅 - 일반적인 자바스크립트 실수들; 좋은 것은 기억하셔야죠!
Photo by FuYong Hua on Unsplash
자바스크립트 언어는 세상에 많은 사람들에게 가장 친숙한 언어일 것입니다. 그러나 여전히 자바스크립트로 코드를 작성할 때 실수를 저지르기 쉬운데 이것은 우리가 해당 개념을 잘못 이해했거나 다른데서 이미 알고있는 거라고 대충 넘겨서 그렇습니다. 다음의 리스트들은 우리가 피할 수 있는 실수들이며 우리의 삶을 더욱 쉽게 만들어 줄 것입니다.
Mismatching Brackets
각각 중첩되어 있는 구문과 함수들은 각 파일에 다양한 레벨의 괄호가 있다는 것입니다. 일반적으로 앱들은 꽤 복잡하고 레벨이 추가될 수 있습니다. 이말은 괄호를 잘못 연결시키면 텍스트 에디터가 더이상 문법 하이라이트를 지원하지 못하거나 잘못 짝지어진 중괄호를 체크 못한다는 것입니다. 이것은 VS Code, Atom, Sublime같은 최신 텍스트 에디터만 사용해도 충분히 피할 수 있습니다. 그리고 자동으로 코드를 포맷팅 시켜주고 일반적으로 발생할 수 있는 이슈를 감지해 줍니다; 따옴표 스타일 불일치, 라인 수 표시, 함수 축약 등을 지원합니다.
Mismatching Quotes and Parentheses
자바스크립트에서는 따옴표, 쌍따옴표, backticks를 사용해서 문자열을 표현할 수 있습니다. 이런 기호들은 모두 동일하지만 동일한 문자열에 대해서는 같은 기호를 사용해야 합니다. 그래서 따옴표로 문장을 감싸기 시작했다면 따옴표로 문장을 닫아야 합니다. 또한 만약 문자열에 따옴표, 쌍따옴표, backticks같은 기호가 포함되어 있다면 해당 기호를 포함해서 문자열로 사용해야 합니다.
if 구문에서 괄호는 항상 전체 조건을 감싸야 합니다. 따라서 다음과 같은 코드는 동작하지 않습니다.
if (x > y) && (y < 10) {...} //won't work
if ( (x > y) && (y < 10) ) {...} //work
이런 에러들은 텍스트 에디터를 사용해서 쉽게 피할 수 있습니다.
Confusing the =, ==, and === Operators
단일 등호는 우항의 데이터를 좌항의 변수에 할당하는 연산자 입니다. 이중 등호나 삼중 등호와 혼동되어서는 안됩니다. 이중, 삼중 등호는 좌항, 우항의 값들을 비교하는 것이기 때문입니다. 자바스크립트에서 이런 세개의 등호 연산자를 모두 사용할 수 있습니다. 그러나 많은 경우에 우리는 단일 등호를 if 구문에서 사용하지 않습니다. 우리가 의도했던 바는 대개 이중 등호나 삼중 등호로 좌항과 우항의 값을 비교하는 것입니다.
if (x = 1) {...} //maybe wrong, always true
if (x == 1) {...} //right
Using Variables Outside of Block Level
만약 var키워드를 사용해서 변수를 사용한다면 해당 선언 밑에 어디서든지 조회할 수 있습니다.
for (var j = 0; j < 10; j++) {
j = j+ 1;
}
console.log(j);
//output
//10
마지막 콘솔로그에 찍히는 j의 값이 10인 것을 볼 수 있습니다. 이때문에 우리는 변수와 상수 선언에 let이나 const를 사용해야 되는 이유입니다. var와는 달리 해당 키워드들을 사용해서 선언하면 블록 외부에서는 접근할 수 없습니다.
for (jet j = 0; j < 10; j++){
j = j+1;
}
console.log(j);
//output
//ReferenceError: j is not defined
Photo by Celine Sayuri Tagami on Unsplash
Treating Array-Like Iterable Objects Like Arrays
자바스크립트에서 우리는 숫자키를 가진 프로퍼티를 볼 수 있습니다. 이런 숫자키들은 접근되기 전에 자동적으로 문자열로 변환됩니다. arguments같은 객체와 Nodelist 같은 객체는 배열이 아니지만 숫자키들로 저장된 프로퍼티가 있어서 배열처럼 동작합니다. 그래서 걔네들을 배열처럼 사용한다는 것이 자주 발생하는 실수입니다. 배열과 배열같은 객체(array-like)의 차이점은 배열같은 객체는 배열이 아니지만 둘다 식별자로 Symbol.Iterator 함수를 가지고 있다는 것입니다. 이 경우에 우리는 해당 아이터레이터를 배열로 변환할 수 있습니다. 따라서 정규 함수에 전달된 매개변수를 가져오기 위해서는 다음과 같이 스프레드 연산자를 사용하면 됩니다.
function f() {
const args = [...arguments];
console.log(args)
}
f(1, 2, 3)
//output
//[1, 2, 3]
Confusing Non-Array Objects With Arrays
배열의 요소와 객체의 프로퍼티 모두 대괄호 표현을 이용해서 접근할 수 있기 때문에 정규 객체와 배열이 비슷하게 보입니다. 따라서 혼동하기 쉽죠.
const obj = {
0: 1,
1: 2,
2: 3
}
console.log(obj[0]);
//output
//1
위의 코드에서 obj는 정규 객체이지만 0을 키로사용해서 전달을 하여서 obj[0]의 값인 1이 나오게 됩니다. 배열의 경우 다음과 같습니다.
const arr = [1, 2, 3]
console.log(arr[0])
//output
//1
여기서도 동일하게 1이 출력되고 둘다 대괄호를 사용해서 값에 접근했지만 둘은 같지 않습니다. 배열은 순회를 할 수 있는 객체입니다. 따라서 for…of / forEach / … 연산자들을 사용해서 순회할 수 있으며 정규 객체의 경우 순회 불가능한 객체이기 때문에 에러가 발생합니다.
이런 기법들은 대개 ES6에서 피처로 추가되었습니다. ES6이 릴리즈 된 주요한 이유이기도 합니다. ES6과 좋은 텍스트 에디터를 사용한다면 쉽게 실수들을 피할 수 있을 것입니다. 만약 구식 IE를 지원해야 한다면 Babel 같은 컨버터 모듈을 사용해서 자동적으로 지원할 수 있습니다.
Summary
- 자주 발생하는 자바스크립트 실수들
- ES6의 피처로 대부분이 보강되었다.
- 따라서 최신 에디터와 ES6만 사용해도 많은 실수들을 잡을 수 있다.
- 좋은 에디터 및 자바스크립트 높은 버전을 사용해야 하는 이유;
- 구식 브라우저 등은 Babel같은 컨버터 모듈을 활용하면 된다
