제로초 JavaScript - 흔하게 발생하는 에러, 이스케이프 문자, 문자열

 

• 제로초 JavaScript 강의 - 섹션 0, 섹션 1

---

Review
 
 
 오늘부터 제로초님의 자바스크립트 강의 듣기를 시작했다.
패스트 캠퍼스에서 프론트엔드 강좌도 구매했지만, 우선 제로초님의 강의를 먼저 듣고 나서
패캠 강의로 들어가기로 했다. 하나하나 입력해보면서 공부할 수가 있고, 또 실무자의 관점
에서 하나하나 알려주셔서 더 유익하다고 느꼈다.
 
 제로초님은 본인뿐만 아니라 다른 사람들의 강의도 다양하게 들어보면서 공부해야 더 도움이
된다고 하셨다. 정말 여러 분들의 강의를 들어보면서 각자의 스타일이 다르다 보니 중점을 두는
포인트도 다르고, 실습 방식도 다르다고 느꼈다.
실력있는 분들이 너무 많다보니 그 분들의 강의를 들으며 습득하고 싶은 것들도 많고 점점 욕심
이 생긴다. 물론 좋은 부분이긴 하지만 이론으로 기본기를 탄탄하게 쌓고 얼른 실습도 하면서
감을 잃지 않도록 해야할 것 같다. 
 
 기록하는 것들은 강의를 들으며 제로초님이 강조하시는 것들을 제로초님의 서적에서 요약해서
기록하는 것이다. 
 
파이팅 !!!
 
 
 
 

---

 

• 제로초 JavaScript 강의 - 섹션 0, 섹션 1

 
<흔하게 발생하는 에러>
 
1. Uncaught ReferenceError: consle is not defined
: console 입력 중에 오타(consle, comsole 등)가 나면 발생하는 에러이다.
ex) consle.log ('hello world')  (X)  →  console.log ('hello world')  (O)
console은 브라우저에서 제공하는 기능이기 때문에 오타가 나면 안 된다.
또한, 대소문자도 구분하므로 모든 글자는 소문자로 적어야 한다.
 

2. Uncaught TypeError: console.lg is not a function

: console은 제대로 입력했으나 log에서 오타가 나면 발생하는 에러이다.

ex) console.lg ('hello world')  (X)  →  console.log ('hello world')  (O)

log는 console의 기능 중 일부라서 이 역시 오타가 나서는 안 된다. 대소문자도 구분해야 한다.

 

3. Uncaught SyntaxError: missing ) after argument list

: 따옴표 뒤에 괄호를 작성하지 않았을 때 발생하는 에러이다.

ex) console.log ('hello world'  (X)  →  console.log ('hello world')  (O)

또 ‘Hello, world!’ 같은 문자는 `(백틱)이나 '(작은따옴표) 또는 "(큰따옴표)로 감싸줘야 한다.

 

4. Uncaught SyntaxError: Invalid or unexpected token

: 따옴표의 짝을 맞추지 않았을 때 발생하는 에러이다.

‘Hello, world!’ 같은 문자는 따옴표로 감싸 줘야 하는데, 이때 시작과 끝의 따옴표 종류가 같아야

한다. 예를 들어, 시작이 작은 따옴표였으면 끝도 작은 따옴표여야 한다.

 

4. Uncaught SyntaxError: Unexpected identifier

: 뭔가 작성해야 하는데 작성하지 않았을 때 발생하는 에러이다.

ex) console.log ('hello world!') console.log ('hello javascript!') console.log ('hello');  (X) 

→  console.log ('hello world!'); console.log ('hello javascript!'); console.log ('hello'); (O)

명령이 끝난 뒤에는 세미콜론을 붙여 각각의 명령을 구분해주는 것이 좋다.

세미콜론을 붙이는 것이 필수는 아니지만 붙인다고 해서 에러가 나는 경우는 거의 없다.

 

여기서 언급한 에러 외에도 다양한 에러가 발생한다. 대부분 에러는 오타 때문에 발생한다. 
 
 

---

 
- 소괄호 ( ) : parentheses
- 중괄호 { } : braces
- 대괄호 [ ] : brackets
 
 

---

 
 

<이스케이프(escape) 문자>

 

: 문자열 안에 역슬래시(＼)를 사용하여 특정 문자를 출력할 수 있는데 간단하게 자주 쓰이는

이스케이프 문자들을 정리했다.

 

＼t	탭 만큼 띄움
＼n	한 줄 내림
＼r	캐리지 리턴
＼"	" 출력
＼'	' 출력
＼＼	＼ 출력

 

\는 언어에 따라 백슬래시(\)나 원화(₩) 기호로 다르게 표시된다. 

\를 붙이면 그다음에 나오는 문자를 기존과는 다르게 처리하라고 엔진에게 알리는 역할을 한다.

원래는 따옴표가 문자열의 끝을 알리는 문자지만, \가 붙은 따옴표는 보통의 문자로 해석된다.

이렇게 문자가 다르게 해석되게 하는 행위를 이스케이핑(escaping)이라고 하며, 

따옴표를 이스케이핑한다고 표현한다.

 

 

 

---

 

<문자열을 숫자로 바꾸기>

 

parseInt로 문자열을 숫자로 바꿀 수 있다.

> parseInt('5');
< 5

 
typeof를 붙여 숫자가 맞는지 확인해 보자-

> typeof parseInt('5');
< "number"

 
parseInt는 문자열을 정수로만 바꾼다. 정수가 아닌 값을 입력하면 정수 부분만 추출해 표시한다.

> parseInt('3.14');
< 3

 
문자열을 실수로 바꾸고 싶으면 parseInt 대신에 parseFloat을 사용합니다.

> parseFloat('3.14');
< 3.14

 
 
 
 
<문자와 숫자 더하기>
 

> '문자열' + 0
< "문자열0"

 
"문자열0"으로 문자열과 숫자가 하나로 합쳐진다.
문자열과 다른 자료형을 더하면 다른 자료형이 문자열로 바뀐 후 문자열과 더해진다.
이처럼 값의 자료형이 바뀌는 현상 또는 바꾸는 행위를 형 변환(type casting)이라고 한다.
 

> '1' + 0
< "10"

 
 
<문자와 숫자 빼기>
 

> '문자열' - 0;
< NaN

 
- 연산자를 사용할 때는 다른 자료형이 먼저 숫자로 형 변환된 후 빼기를 하게 된다.
앞의 경우에는 문자열을 숫자로 바꾸면 NaN이 되고, 여기서 0을 빼도 그대로 NaN이므로
결괏값도 NaN이 나온다.
 

> '9' - 5;
< 4

 
이번에는 결괏값이 숫자로 나온다.
문자열 9는 숫자 9로 형 변환되고, 여기서 5를 빼기 때문에 결괏값이 4가 된다.
 
마찬가지로 나누기 연산자, 곱하기 연산자는 다른 자료형이 숫자로 변환된 후 연산을 하게 된다.
 
 
 

 
 
 
 
 
* 내용 출처
: Let's Get IT 자바스크립트 프로그래밍