j43. 자바스크립트에서 저지르기 쉬운 실수

자바스크립트에서 저지르기 쉬운 실수

자바스크립트 에서 일반적으로 발생하기 쉬운 실수 에 대해 알아 보겠습니다.

---

비교 연산자 (comparison operator, == ) 대신에, 할당 연산자 (Assignment Operator, = ) 를  if 문 내에서 사용하여 오류가 나는 경우입니다.

원래는 아래와 같이 비교 연산자로 비교하여야 하며, myAge == 20 은 false 가 되어야 합니다.

var myAge = 40;
if (myAge == 20)

---

그런데 아래와 같이 할당 연산자로 잘못 사용하면, myAge = 20 에서 20 은 true 이므로, if 문의 조건식은 true 가 되어 버립니다.

var myAge = 40;
if (myAge = 20)

---

switch 문에서는 엄격 비교 (strict comparison) 를 사용합니다.

원래는 아래와 같이 자료의 형 까지도 일치하여야 합니다.

var myAge = 40;
switch(myAge) {
    case 20: alert("한참 좋을 때 입니다.");
    case 40: alert("나이 좀 드셨어요?");
}

---

그런데 아래와 같이 자료 형을 바꾸어 버리면, case 40: alert("나이 좀 드셨어요?"); 에 대해서 경고창이 뜨지가 않습니다.

숫자 40 과 문자열 "40" 을 switch 문에서는 다르다고 보기 때문입니다.

var myAge = 40;
switch(myAge) {
    case "20": alert("한참 좋을 때 입니다.");
    case "40": alert("나이 좀 드셨어요?");
}

---

숫자 더하기 (Addition) 와 문자 합하기 (Concatenation) 에서 혼란이 있을 수 있습니다.

자바스크립트 에서는 숫자 더할 때도 + 연산자, 문자 합할 때도 + 연산자를 사용합니다.

숫자로 더할 때와 숫자를 문자로 더할 때가 결과가 다르게 됩니다.

var myScore = 100 + "100";

위에서 myScore 는 "100100" 이 됩니다.

---

자바스크립트는 줄바꿈을 허용하는데, 이때 문자열 사이에서 줄바꿈을 하면, 자바스크립트는 작동하지 않습니다.

<script>
document.getElementById("demo").innerHTML = "오늘은
개학하는 날";
</script>

---

자바스크립트 코드에서 속도를 증가 시키는 방법에 대해 알아 봅니다.

---

for 문을 포함하여, 루프 에서는 매번 한번 반복할 때 마다 각각의 반복 문 (statement) 이 실행됩니다.

따라서 매번 실행할 필요가 없는 것은 루프의 외부로 빼내는 것이 좋습니다.

for (i = 0; i < myArray.length; i++) {}

위와 같이 하면 매번 myArray.length 를 실행하게 될 것입니다.

---

따라서 아래와 같이 루프의 바깥으로 빼주면 좋습니다.

<script>
myArrayLength = myArray.length;
for (i = 0; i < myArrayLength; i++) {}
</script>

---

웹 페이지가 로딩 되면, 브라우저는 그 웹페이지 문서의 각 태그들 간의 관계를 생성하게 됩니다.

이것을 HTML DOM (Document Object Model, 문서 객체 모델) 이라고 합니다.

HTML DOM 모델은 html 태그, head 태그, body 태그, 그 밑에 h1 태그, 그 다음 a 태그 등등과 같이, 문서내 태그 들의 트리 구조를 의미합니다.

HTML DOM 으로, 자바스크립트가 HTML 문서의 모든 태그 들에 접근 (access) 할 수 있고 또 변경할 수도 있게 됩니다.

그런데, HTML DOM 에 접근 하는 것은, 자바스크립트의 다른 지시문 과 비교하여, 매우 느립니다.

그래서 만일 DOM 태그에 여러 번 접근하여야 한다면, 한번만 접근한 다음, 지역 변수 (a local variable) 로 할당하여 사용하는 것이 좋습니다.

<p id="myDomResult"></p>

<script>
var myDom;
myDom = document.getElementById("myDomResult");
myDom.innerHTML = "태그를 한번 찾아서 가져온 후, 지역변수로 그 태그를 사용하고 있습니다.";
</script>

---

HTML DOM 내에 태그의 수를 줄여야 합니다.

태그의 수가 줄면, 소형 단말기에서는 특히, 페이지 로딩 이나, 렌더링 속도가 증가합니다.

그리고 자바스크립트가 getElementsByTagName 같은 것으로 DOM 을 검색할 때도 DOM 태그는 적은 것이 좋습니다.

---

<ol>

<li>비교 연산자 (comparison operator, == ) 대신에, 할당 연산자 (Assignment Operator, = ) 를 if 문 내에서 사용하여 오류가 나는 경우가 있습니다.</li>

<li>switch 문에서는 엄격 비교 (strict comparison) 를 사용하므로 유의해야 합니다.</li>

<li>숫자 더하기 (Addition) 와 문자 합하기 (Concatenation) 에서의 혼란이 있을 수 있습니다.</li>

<li>자바스크립트는 코딩할 때 줄바꿈을 허용하는데, 이때 문자열 사이에서 줄바꿈을 하면, 자바스크립트는 작동하지 않게 되므로 주의합니다.</li>

<li>루프에서는 매번 한번 반복할 때 마다 각각의 반복 문 (statement) 이 실행되므로, 따라서 매번 실행할 필요가 없는 것은 루프의 외부로 빼주면 좋습니다.</li>

<li>HTML DOM 에 접근 하는 것은, 자바스크립트의 다른 지시문 과 비교하여, 매우 느리므로, 만일 DOM 태그에 여러 번 접근하여야 한다면, 한번만 접근한 다음, 지역 변수 (a local variable) 로 할당하여 사용하는 것이 좋습니다.</li>

</ol>

---

[광고] Udemy 동영상 강의로 보기