Solve common problems in your JavaScript code
다음의 링크들은 당신의 JavaScript 코드가 정상적으로 작동할 수 있게 고쳐야되는 흔한 문제들의 해결책을 제시한다.
초보자들의 흔한 실수들
스펠링과 대소문자를 제대로 해라
코드가 작동하지 않거나 브라우저가 무언가가 undefined라고 불평하면 모든 변수 이름, 함수 이름 등을 정확하게 입력했는지 확인하십시오.
문제를 일으키는 몇 가지 일반적인 내장 브라우저 함수는 다음과 같습니다.
올바른 | 잘못된 |
---|---|
getElementsByTagName() |
getElementbyTagName() |
getElementsByName() |
getElementByName() |
getElementsByClassName() |
getElementByClassName() |
getElementById() |
getElementsById() |
세미콜론의 위치
세미콜론의 위치가 잘못 되지 않았는지 확인하세요. 예를들어:
올바른 | 잘못된 |
---|---|
elem.style.color = 'red'; |
elem.style.color = 'red;' |
함수
함수와 관련하여 실수할 수 있는 것들이 많이 있습니다.
가장 흔한 실수는 함수를 선언하고 어디서도 호출하지 않는 것입니다. 예를 들어:
function myFunction() {
alert("This is my function.");
}
위 코드는 호출하지 않는 이상 아무것도 하지 않습니다.
myFunction();
함수 스코프
함수는 각자의 스코프가 있음을 명심하세요 — 변수를 전역으로 선언하거나 함수에서 값을 리턴하지 않는한 함수 밖에서 함수 내부에 설정된 변수 값에 접근 할 수 없습니다. (즉, 어떠한 함수 내에서도 접근 안됨)
리턴 문 이후 코드 실행
함수 밖으로 값을 리턴할 때, JavaScript 인터프리터가 함수를 완전히 빠져나감을 명심하세요. — 리턴 문 이후에 선언된 코드는 절대로 실행되지 않습니다.
사실, 몇몇 브라우저들은 (Firefox 처럼) 리턴 문 이후에 코드가 있다면 개발자 콘솔에 에러 메세지를 줍니다. Firefox는 "unreachable code after return statement" 라고 알려줍니다.
오브젝트 표기 vs 일반적 할당
보통 자바스크립테어서 무언가를 할당하려고 할때, 단일 등호 기호를 사용합니다. 예:
const myNumber = 0;
하지만, 이 방법은 오브젝트에선 동작하지 않습니다. — 오브젝트에선 멤버와 값 사이를 콜론으로 구분하고, 각 멤버들은 콤마로 구분합니다, 예를 들어:
const myObject = {
name: "Chris",
age: 38,
};
기본 정의
Basic use cases
General
Variables
Math
- What types of number do you have to deal with in web development?
- How do you do basic math in JavaScript?
- What is operator precedence, and how is it handled in JavaScript?
- How do you increment and decrement values in JavaScript?
- How do you compare values in JavaScript? (e.g. to see which one is bigger, or to see if one value is equal to another).
Strings
- How do you create a string in JavaScript?
- Do you have to use single quotes or double quotes?
- How do you escape characters in strings?
- How do you join strings together?
- Can you join strings and numbers together?
- How do you find the length of a string?
- How you find what character is at a certain position in a string?
- How do you find and extract a specific substring from a string?
- How do you change the case of a string?
- How do you replace one specific substring with another?
Arrays
Debugging JavaScript
- What are the basic types of error?
- What are browser developer tools, and how do you access them?(en-US)
- How do you log a value to the JavaScript console?(en-US)
- How do you use breakpoints, and other JavaScript debugging features?(en-US)
For more information on JavaScript debugging, see Handling common JavaScript problems(en-US); also see Other common errors for a description of common errors.
Making decisions in code
- How do you execute different blocks of code, depending on a variable's value or other condition?
- How do you use if ...else statements?
- How do nest one decision block inside another?
- How do you use AND, OR, and NOT operators in JavaScript?
- How do you conveniently handle a large number of choices for one condition?
- How do you use a ternary operator to make a quick choice between two options based on a true or false test?
Looping/iteration
- How do you run the same bit of code over and over again?
- How do you exit a loop before the end if a certain condition is met?
- How do you skip to the next iteration of a loop if a certain condition is met?
- How do you use while and do ... while loops?
- How to iterate over the elements in an array
- How to iterate over the elements in a multidimensional array
- How to iterate over the members in an object
- How to iterate over the members of an object nested inside an array
Intermediate use cases
Functions
- How do you find functions in the browser?
- What is the difference between a function and a method?
- How do you create your own functions?
- How do you run (call, or invoke) a function?
- What is an anonymous function?
- How do you specify parameters (or arguments) when invoking a function?
- What is function scope?
- What are return values, and how do you use them?
Objects
- How do you create an object?
- What is dot notation?
- What is bracket notation?
- How do you get and set the methods and properties of an object?
- What is
this
, in the context of an object? - What is object-oriented programming?
- What are constructors and instances, and how do you create them?
- What different ways are there to create objects in JavaScript?
JSON
Events
- What are event handlers and how do you use them?
- What are inline event handlers?
- What does the
addEventListener()
function do, and how do you use it? - Which mechanism should I use to add event code to my web pages?
- What are event objects, and how do you use them?
- How do you prevent default event behaviour?
- How do events fire on nested elements? (event propagation, also related — event bubbling and capturing)
- What is event delegation, and how does it work?