[리뉴얼] 렛츠기릿 자바스크립트 #1

1강

팁(Tip)

• 문법을 완벽히 알려는 것 Nono 적당히~
  HTML/CSS도 공부하는걸 추천

 

• 초반일수록 돈 아끼려 하지 않고
  준비시간을 줄이기 위해 어떤 수를 쓰더라도 그걸 줄이려고 하는걸 추천

 

• 에디터가 좋을수록 오타도 잡아주고 자동완성을 해줘서 타자를 아껴줄 수 있겠죠 (생산성 -> 연봉)

 

• 브라우저가 자바스크립트를 실행해주기 때문에 크롬 브라우저를 설치해준 것
  매년 자바스크립트는 다른 버전이 나온다 => 최신 자바스크립트를 실행하기 위해서

 

• node.js가 있으면 브라우저가 없어도 자바스크립트 코드를 실행시킬 수 있다  // 콘솔 프롬프트 (크롬 F12)

 

• 자바스크립트는 웹 페이지의 작동을 담당하도록 개발된 언어이며, 실제로 대부분 웹 사이트는 자바스크립트를 사용합니다.

 

• 웹 브라우저는 어떻게 자바스크립트 코드를 실행할 수 있을까요? 바로 내부에 자바스크립트 엔진이 내장되어 있기 때문입니다. 웹 브라우저 중 하나인 크롬은 V8이라는 자바스크립트 엔진을 사용하고, 파이어폭스는 스파이더몽키(SpiderMonkey), 사파리는 웹킷(WebKit)이라는 엔진을 사용합니다.

 

• 자바스크립트는 코드를 한 덩어리씩 실행해 결과를 출력하는 방식을 인터프리터(interpreter) 방식이라고 합니다. 한 덩어리라고 표현한 이유는 Shift+Enter를 누르면 줄바꿈해서 여러 줄의 코드를 동시에 입력할 수 있기 때문입니다. 

 

• 자바스크립트와는 반대로 코드를 컴퓨터가 이해할 수 있는 언어로 변환하는 과정을 거친 후 한 번에 실행하는 방식을 컴파일(compile) 방식이라고 합니다. C나 C++, 자바 등의 언어에서 이 방식을 사용합니다.

 

• 브라우저의 콘솔은 코드를 한 줄씩 입력받고(Read), 받은 입력을 평가(Eval)하고, 결과를 출력(Print)한 뒤, 다시 프롬프트가 나타나 새로운 입력을 기다리는 과정을 반복합니다(Loop). 이러한 특성 때문에 콘솔을 REPL(Read-Eval-Print Loop)이라고 합니다.

 

• 많이 발생하는 에러
  - 오타와의 싸움
  - 잘못된 알고리즘, 로직, 순서도, 명령과 싸움
  * () parentheses {} braces [] brackets

 

• 행동의 순서와 절차를 명확하게 설명할 수 있게 된다면 여러분은 프로그래밍 사고력을 갖추게 된 것입니다.

 

• 순서도를 잘 그리면 알고리즘 문제도 잘 풀 수 있고 효율적으로 그려야 고득점 및 속도 할 수 있다
  시작/끝 | 두겹의 원형
  일반 절차  | 타원
  다음 절차로 가는 흐름 | 화살표
  특수한 상황(대기, 이벤트 발생) | 이벤트 두겹 사각형
  판단 절차 | 마름모

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

2강

세미콜론을 붙이지 않으면 대부분의 경우 자바스크립트 엔진이 자동으로 세미콜론을 붙여 줍니다. 하지만 일부 명령에서는 가끔 에러가 발생합니다. 그러므로 혹시 모를 에러 발생을 방지하고 통일성을 위해 모든 명령 뒤에 세미콜론을 붙이기를 권합니다. 항상 끝에 세미콜론을 붙이는 것은 에러를 방지하는 좋은 습관입니다.

 

 

 

주석(//, /* */)
사람만 알아볼 수 있도록 설명을 작성한 부분 (컴퓨터는 무시함)

 

 

 

 

 

들여쓰기(2칸, 4칸, 탭키)

 

 

 

자료형
값: 프로그램이 조작할 수 있는 데이터, 값(value)이 여러 종류가 있는 걸 자료형이라고 한다.
- 문자열('(\n), "(\n), `(줄바꿈가능))
- (연산자:opearator:어떠한 값에 특정 작업 수행하라는 기호)typeof '문자열'
- '"', "'", `"`, 'how\'re you?', 'how\\'re you?'

\를 붙이면 그다음에 나오는 문자를 기존과는 다르게 처리하라고 엔진에게 알리는 역할을 합니다. 원래는 따옴표가 문자열의 끝을 알리는 문자지만, \가 붙은 따옴표는 보통의 문자로 해석됩니다. 이렇게 문자가 다르게 해석되게 하는 행위를 이스케이핑(escaping)이라고 하며, 따옴표를 이스케이핑한다고 표현합니다.
감싸진 문자열을 템플릿 리터럴(template literal)이라고 합니다.

 

 

 

 

숫자
지수표기법도 사용할 수 있습니다. 지수표기법(exponential notation)은 매우 큰 숫자나 소수점 아래 자릿수가 많을 때 숫자를 표현하는 방식입니다. e 뒤에 나오는 숫자만큼 10의 거듭제곱을 하면 원래 숫자가 됩니다.
5e4;  // 5 * 10000 = 50000
5e+4; // 5 * 10000 = 50000
5e-3; // 5 * (1/1000) = 0.005

 

 

 

 

 

10진법 말고도 2진법, 8진법, 16진법으로 수를 표현할 수 있습니다. 10진법이 사람에게 친화적인 기수법이라면, 2진법이나 16진법은 컴퓨터에 친화적인 기수법입니다. 

 

 

 

 

 

2진법은 숫자 앞에 0b(숫자 영, 소문자 b)를 붙입니다.
> 0b11;
< 3
10진법 11이 아니라 2진법 11이기 때문에 1 × 2 + 1을 해서 3이 나옵니다.

 

 

 

 

 

 

8진법을 나타내려면 숫자 앞에 0o(숫자 영, 소문자 o)을 붙입니다.
> 0o15;
< 13
1 × 8 + 5이므로 13이 됩니다.

 

 

 

 

 

16진법을 나타내려면 숫자 앞에 0x(숫자 영, 소문자 x)를 붙입니다.

단, 숫자는 0부터 9까지밖에 없으므로 10~15는 각각 알파벳 a, b, c, d, e, f로 표현합니다.
> 0x1c;
< 28
1 × 16 + c(12)이므로 28이 됩니다.

 

 

 

typeof NaN은 숫자지만, NaN은 숫자가 아니다
NaN은 이름과는 다르게 값이 숫자라는 점을 기억하세요. 숫자가 아닌데 숫자라니 이해되지 않겠지만, 자바스크립트에서 그렇게 정했기 때문에 외워야 합니다.

 

 

 

 

 

문자열 -> 숫자
parseInt 정수, parseFloat 실수, Number

parseInt(10, 2, 8, 16) 진법
parseInt('3월') - 3(최대한 해석)
Number('3월') - NaN

'1231231'.substr(0,2) - "12"
'1231231'.substring(0,2) - "12"
다른 것, 다른 점이 있다

prompt() 직접 입력한 값으로 대체
parseInt(prompt())
typeof parseInt(prompt())

 

 

3**2 : 거듭제곱

 

 

 

2/0 : Infinity
Infinity : 무한대 (숫자)

-2/0
-Infinity (숫자)
*Infinity  - Infinity : NaN

 

 

 

 

행 변환(type casting)

연산자 우선순위 이해하기
https://thebook.io/080270/part01/ch02/02/02-11/
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

연산자 우선순위 - JavaScript | MDN

 

 

'문자열' + 0
"문자열0"
더하기를 할 때는 숫자보다 문자열 자료형이 우선시된다고 기억하세요.

 

 

 

 

'문자열' - 0
"NaN"

 

 

 

'9'-5
>4

 

컴퓨터가 소수점 계산을 잘 못한다

: 부동소수점 문제 ex) 0.1 + 0.2

 

불 값
==는 양쪽 값이 같은지 비교하는 연산자이고, !=는 양쪽 값이 다른지 비교하는 연산자입니다.
> NaN == NaN; 이는 숫자, 문자열, 불 값을 통틀어 false가 나오는 유일한 값입니다.
< false

<=나 >= 연산자를 써도 결과는 false만 나옵니다. NaN은 비교 연산에서 false를 출력한다고 알아 두세요. 

다만, != 연산에서는 true를 출력합니다.

 

> 5 != 5;
< false
> 5 != 6;
< true

 

 

> true > false;
< true
true가 false보다 큰 값임을 기억하세요. true는 숫자로 변환하면 1이고, false는 숫자로 변환하면 0입니다.

 

 

 

문자열끼리 비교하는 경우는 조금 복잡합니다. 기본으로 문자의 번호를 따릅니다. 문자의 번호가 클수록 값이 크죠. 문자의 번호를 알아보는 방법은 뒤에 나오는 참고에 있습니다. 첫 문자가 같은 글자이면 첫 문자를 빼고 나머지를 다시 비교합니다. 사전에서 단어 찾기와 비슷합니다.
> 'b' > 'a';
< true
> 'ad' > 'ab';
< true
b가 a보다 문자의 번호가 큽니다(b는 98, a는 97).

 

 

 

 

문자의 번호를 알아보려면 charCodeAt을 사용합니다. 찾고자 하는 문자열 뒤에 .charCodeAt()을 붙이면 문자의 번호가 나옵니다.

> 'a'.charCodeAt();
< 97

 

 

 

 

이번에는 다른 자료형끼리 비교해 봅시다. 문자열과 숫자의 크기를 비교하면 어떻게 될까요?
> '3' < 5;
< true

 

 

빼기 연산자 때처럼 다른 자료형이 모두 숫자로 형 변환된 후 비교합니다. 따라서 문자열 3은 숫자 3이 되어 5보다 작다는 것이 성립됩니다.
> 'abc' < 5;
< false
이때 문자열 abc를 숫자로 바꾸면 NaN이 됩니다. NaN과의 비교는 false이므로 결괏값이 false가 됩니다.

 

 

 

 

 

 

 

 

불 값도 비교 연산을 할 때는 숫자로 형 변환됩니다.
> '0' < true;
< true

 

 

 

==와 === 차이 이해하기
> '1' == 1;
< true
> 1 == true;
< true
> 1 == '1';
< true
> 1 != '1';
< false

 

 

 

 

 

 

자료형까지 같은지 비교하는 연산자는 따로 있습니다. 

바로 ===입니다. 값을 비교할 때 값뿐만 아니라 자료형도 같은지 비교합니다.

 

 

 

 

 

> '1' === 1;
< false
> 1 === true;
< false
> 1 === '1';
< false
> 1 !== '1';
< true

 

 

 

==이나 != 연산자의 결과를 추정하려면 값들이 어떻게 형 변환되는지를 알아야 하므로 입문하는 처지에서는 매우 어렵습니다. 따라서 ==와 != 대신 ===와 !== 연산자를 사용해 자료형까지 정확하게 비교하기를 권장합니다.

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

| 이 블로그는 방문자와 소통하는 공간이니 마음껏 댓글 및 기타 소통을 환영합니다

 

 

 

 

 

 

 

 

 

 

<출처>

[무료] [리뉴얼] 렛츠기릿 자바스크립트 - 인프런 | 강의

 

Let's Get IT 자바스크립트 프로그래밍: 1장 Hello, JavaScript!