JavaScript 사용법에 대한 오해


이 장에서는 JavaScript 사용에 대한 오해에 대해 논의합니다.

대입 연산자 적용 오류

JavaScript 프로그램에서 if 조건문에 대입 연산자의 등호(=)를 사용하면 잘못된 결과가 나오는 현상이 발생합니다. 방법은 비교 연산자의 등호 두 개를 사용하는 것입니다. (==).

if x가 10과 같지 않기 때문에 조건문은 false(예상했던 대로)를 반환합니다.

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x == 10);
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

조건문은 true를 반환합니다(예상했던 것과는 다릅니다). 조건문이 실행되고 x에 10의 값이 할당되기 때문입니다. 10은 true입니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 10);
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

조건문은 false를 반환합니다(예상한 것과 다름) 조건문이 실행되므로 x에 0 값이 할당되고 0은 false입니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 0);
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

Note赋值语句返回变量的值。

비교 연산자의 일반적인 오류

일반 비교에서는 데이터 유형이 무시됩니다. 다음 if 조건문은 true를 반환합니다.

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
var y = "10";
document.getElementById("demo").innerHTML = Boolean(x == y);
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

엄격한 비교 연산에서 ===는 항등 계산기입니다. 표현식의 값과 유형을 확인하는 동안 다음 if 조건문이 false를 반환합니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
var y = "10";
document.getElementById("demo").innerHTML = Boolean(x === y);
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

이런 종류의 오류는 비교를 위해 항등 연산자(===)를 사용하는 스위치 문에서 자주 발생합니다.

다음 인스턴스는 경고 팝업을 실행합니다:

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
switch(x) {
    case 10: alert("Hello");
}
</script>

</body>
</html>

인스턴스 실행»

클릭" 인스턴스 실행' 버튼을 눌러 온라인 인스턴스 보기

다음 인스턴스는 유형 불일치로 인해 경고 팝업 창이 실행되지 않습니다.

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
switch(x) {
    case "10": alert("Hello");
}
</script>

</body>
</html>

인스턴스 실행»

"인스턴스 실행" 버튼을 클릭하면 온라인 인스턴스를 볼 수 있습니다

추가 및 연결 시 주의사항

더하기는 두 개의 숫자를 더한 것입니다.

연결은 두 개의 문자열을 연결하는 것입니다.

JavaScript는 더하기와 연결 모두에 + 연산자를 사용합니다.

다음에는 예를 통해 두 숫자를 더하는 것과 숫자와 문자열을 연결하는 것의 차이점을 확인할 수 있습니다.

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10 + "5";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

변수 추가 결과도 일치하지 않습니다.

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
var y = "5";
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

참고 사항 부동 소수점 데이터 활용 참고

자바스크립트의 모든 데이터는 64비트 부동 소수점 데이터(float)로 저장됩니다.

JavaScript를 포함한 모든 프로그래밍 언어는 부동 소수점 데이터의 정확성을 결정하는 데 어려움이 있습니다.

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0.1;
var y = 0.2;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

예제 실행»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

정수 곱셈과 나눗셈을 사용하여 위의 문제를 해결했습니다.

인스턴스

아아아아

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

JavaScript 문자열 분기

JavaScript 실행 줄 바꿈 문은 문자열에서 사용됩니다:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0.1;
var y = 0.2;
var z = (x * 10 + y *10) / 10;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Run Instance»

"Run 온라인으로 보기 위한 Instance" 버튼 예

그러나 캐리지 리턴과 라인 피드를 문자열에 직접 사용하면 오류가 발생합니다.

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
	"Hello World!";
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

개발 도구를 선택하거나 F12를 눌러 오류 메시지 보기:

QQ截图20161017174526.png

문자열 줄 바꿈에는 아래와 같이 백슬래시()를 사용해야 합니다.

세미콜론을 잘못 사용했습니다.

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>about:newtab

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello 
World!";
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

다음 예에서는 세미콜론을 잘못 사용하여 if 문의 코드 블록이 실행되지 않습니다.

Return 문 사용 시 주의 사항

JavaScript는 기본적으로 코드의 마지막 줄에서 자동으로 종료됩니다.

다음 두 예는 동일한 결과를 반환합니다(하나는 세미콜론이 있고 하나는 없음).

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 5;
if (x == 19);{
	document.getElementById("demo").innerHTML = "Hello";
}
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
    var power = 10
    return a * power
}
</script>

</body>
</html>

예제 실행 »

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.

JavaScript는 여러 줄을 사용하여 명령문을 끝낼 수도 있습니다. 온라인 인스턴스를 보려면 "인스턴스 실행" 버튼

그러나 다음 인스턴스 결과는
정의되지 않음

을 반환합니다.

인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
    var power = 10;
    return a * power;
}
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

왜 이런 결과가 나온 걸까요? 왜냐하면 JavaScript에서는 예제 4의 코드가 다음 코드와 일치하기 때문입니다: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
    var
    power = 10;
    return a * power;
}
</script>

</body>
</html>

구문 분석

불완전한 명령문인 경우 다음과 같이: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
    var
    power = 10;
    return
    a * power;
}
</script>

</body>
</html>

JavaScript는 다음을 시도합니다. 명령문의 두 번째 줄 읽기: 

function myFunction(a) {
    var
    power = 10;  
    return;       // 分号结束，返回 undefined
    a * power;
}

그러나 명령문은 다음과 같이 완성되므로: 

var

JavaScript는 자동으로 명령문을 닫습니다: 

power = 10;

JavaScript에서는 break The 번호는 선택사항입니다.

return은 완전한 문이므로 JavaScript는 return 문을 닫습니다.

Note注意：不用对 return 语句进行断行。

이름을 사용하여 배열 색인

많은 프로그래밍 언어에서는 이름을 배열 색인으로 사용할 수 있습니다.

이름을 인덱스로 사용하는 배열을 연관 배열(또는 해시)이라고 합니다.

JavaScript는 이름을 사용하여 배열을 인덱스하는 것을 지원하지 않으며 숫자 인덱스만 허용됩니다.

인스턴스

return

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

JavaScript에서 객체는 이름을 인덱스로 사용합니다.

이름을 인덱스로 사용하는 경우 JavaScript는 배열에 액세스할 때 배열을 표준 개체로 재정의합니다.

이 작업을 수행한 후에는 배열의 메서드와 속성을 더 이상 사용할 수 없습니다. 그렇지 않으면 오류가 발생합니다:

Instance

return;

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

배열 요소를 정의하며 쉼표를 추가할 수 없습니다. 끝에

잘못된 정의 방법:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
	person[0] + " " + person.length;
</script>

</body>
</html>

올바른 정의 방법:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>
如果你使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象，数组的方法及属性将不能再使用，否则会产生错误:。
</p>
<p id="demo"></p>
<script>
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 
document.getElementById("demo").innerHTML =
	person[0] + " " + person.length;
</script>

</body>
</html>

객체를 정의하고 끝에 쉼표를 추가할 수 없습니다.

잘못된 정의 방법:

points = [40, 100, 1, 5, 25, 10,];

올바른 정의 방법: 

points = [40, 100, 1, 5, 25, 10];

정의되지 않은 것은 Null이 아닙니다

JavaScript에서는 null 은 객체에 사용되고, undefine은 변수, 속성, 메서드에 사용됩니다.

객체는 정의된 경우에만 null일 수 있으며, 그렇지 않으면 정의되지 않습니다.

객체가 존재하는지 테스트하려는 경우 객체가 아직 정의되지 않으면 오류가 발생합니다.

잘못된 사용법: 

websites = {site:"php中文网", url:"www.php.cn", like:460,}

올바른 방법은 객체가 정의되었는지 감지하기 위해 먼저 typeof를 사용해야 한다는 것입니다: 

websites = {site:"php中文网", url:"www.php.cn", like:460}

프로그램 블록 범위

JavaScript는 각 코드 블록에 새로운 범위를 생성하지 않습니다. 일반적으로 각 코드 블록의 범위는 전역입니다.

다음 코드의 변수 i는 정의되지 않은 대신 10을 반환합니다.

Instance

if (myObj !== null && typeof myObj !== "undefined")

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요