제로초 자바스크립트 입문 #02

기본 문법 배우기

코드 작성 규칙

• 세미콜론 ; 
  • 자바스크립트는 하나의 명령이 끝날 때 세미콜론을 붙여도 되고, 붙이지 않아도 된다
  • 한 줄에 여러 명령을 넣을 때는 명령마다 세미콜론을 붙여 그 다음 명령과 구분 해야한다
  • 세미콜론을 붙이는 것은 에러를 방지하는 좋은 습관
• 주석
  • 다른 사람이 작성한 코드를 볼 때 코드를 이해하기 어려운 경우 유용
  • 주석 (comment) 은 사람만 알아볼 수 있도록 (컴퓨터는 무시하고 넘어감) 설명을 작성한 부분
  • 코드 실행에 영향을 미치지 않음
  • 한줄 주석  //  주석에 적고 싶은 내용 
  • 여러줄 주석 /**/

// 주석에 넣고 싶은 내용 
console.log("Hello!");
/* 주석에 넣고 싶은 내용 */

• 들여쓰기
  • 코드를 작성할 때 들여쓰기는 통일하는 것이 좋다
  • 들여쓰기 만으로도 다른 의미가 있는 부분이라고 표시 할 수 있다
  • 코드의 가독성 (코드를 읽고 이해하기 쉬운 정도)이 향상된다 
  •  

if (condition) {
console.log('Hi!');
}


if (condition) {
	console.log('Hi!');
}

---

자료형 

문자열 

• 프로그래밍에서 하나의 글자를 문자라고 하는데, 문자들이 하나 이상 나열된 것을 문자열 이라 한다
• 시작과 끝이 작은 따옴표 ' ' (혹은 큰따옴표 " " )로 감싸진 값이다
• 시작과 끝이 다른 종류의 따옴표일 때는 문제가 발생
• 따옴표는 시작과 끝은 같은 종류로 해야 에러가 발생하지 않는다

 

문자열

문자열 안에 따옴표 사용하기

• 문자열 내부의 따옴표와 다른 따옴표로 문자열을 감싼다
• 백슬래시가 붙은 따옴표는 일반 문자로 해석된다
• 이렇게 기호를 다른 하는 행위를 이스케이핑 (escaping) 이라고 한다
• 따옴표에 사용하면 따옴표를 이스케이핑 한다고 표현

\ 백슬래시

한 문자열을 여러줄로 표시 하기 

• 문자열에서 행갈이할 부분 앞에 \n 문자를 넣으면 된다

'여러 줄을 걸쳐 \n 표시 됩니다';

 

템플릿 리터럴 사용하기

• 백틱 `, backtick 또는 backquote 으로 감싸는 방법으로 문자열을 표현할 수 있다
• 백틱으로 감싸진 문자열을 템플릿 리터럴 (template literal) 이라 한다
• 행갈이할 때는 백틱 문자열이 편하다
• \n 문자를 사용하지 않아도 행갈이가 된다

`여러 줄을 걸쳐 

표시됩니다.

줄을 더 늘려 볼까요?`;

 

문자열 합치기 

• 두 문자열 사이에 + 기호를 두면 양쪽의 문자열이 하나로 합쳐진다
• + 기호도 typeof 처럼 연산자 이다

문자열 + 문자열

---

숫자

• 숫자는 따옴표로 감싸지 않고 그대로 적으면 됩니다
• 따옴표로 감싼 숫자는 문자열이지 숫자가 아닙니다
• 값이 숫자인지 확인하려면 값 앞에 typeof 를 붙이면 된다
• 콘솔에 'number' 라고 출력되면 그 값은 숫자이다

문자열을 숫자로 바꾸기

parseInt()	문자열을 정수로만 바꿈
Number()	문자열을 숫자로 바꿈, 숫자가 없는 문자열이면 NaN 값이 나옴
parseFloat()	문자열을 숫자로 바꿈

 

NaN

• Not a Number (숫자가 아님)의 약어 
• 놀랍게도 typeof NaN 을 해보면 'number' 라는 값이 출력

산술 연산자
+	더하기
-	빼기
/	나누기
*	곱하기
%	나눗셈의 나머지
**	거듭제곱

 

무한 값 Infinity

• 무한을 의미하는 값
• 음수도 있다 
• 사칙연산을 하더라고 Infinity 로 나온다
• 단, 무한 값끼리 계산할 때는 다르다
  • 결과로 NaN 이 나온다. 무한에서 무한을 빼는 것은 성립하지 않는다는 뜻이다
  • 0 / 0 도 마찬가지다 
• Infinity 는 자주 쓰지는 않지만, 무한이라는 개념을 프로그래밍에서 사용할 때 유용하니 기억하기

 

문자와 숫자 더하기 빼기

문자열 더하기

• + 연산자를 사용할 때는 숫자보다 문자열이 우선시
• 문자열과 다른 자료형을 더하면 다른 자료형이 문자열로 바뀐 후, 더해진다
• 이처럼 값의 자료형이 바뀌는 현상 또는 바꾸는 행위를 행 변환(type casting)  이라고 한다

문자열 빼기

• - 연산자를 사용할 때는 다른 자료형이 먼저 숫자로 형이 변환된 후, 뺀다

연산자 우선순위 이해하기

• 자바스크립트도 수학의 사칙연산 우선순위를 따르기 때문에 곱하기가 더하기보다 우선순위가 높다

실수 연산시 주의할 점

• 정수뿐만 아니라 실수도 연산할 수 있다
• 부동소수점 문제 발생을 주의해야한다
• 실수를 정수로 바꿔 계산하고 마지막에 다시 실수로 바꾸는 방법을 이용한다

부동소수점 문제

불 값 boolean

• 1 과 0은 참(ture) 과 거짓 (false) 에 대응된다
• 불 값 표현하기
  • 따옴표로 감싸지 않고 true 와 false 를 입력 

boolean

 

비교 연산자 사용하기
A > B	왼쪽 값이 오른쪽 값보다 크다 (초과)
A < B	왼쪽 값이 오른쪽 값보다 작다 (미만)
A >= B	크거나 같다 (이상)
A <= B	작거나 같다 (이하)
A == B	양쪽 값이 같다
A != B	양쪽 값이 다르다
A === B	양쪽 값이 같을 뿐만 아니라 자료형도 같다
A !== B	양쪽 값이 다를 뿐만 아니라 자료형도 다르다

 

논리 연산자 사용하기
&&	왼쪽 식과 오른쪽 식이 모두 true 여야 true
||	왼쪽 식과 오른쪽 식 중 하나만 true 면 true
!	참인 값은 거짓, 거짓인 값은 참 (반대로 바뀜)

 

• 대부분의 값은 불 값으로 형 변환했을 때 true가 된다
• 형 변환했을 때 false 가 되는 값은 몇 개 없으니 여기 나온 값만 기억하면 된다
  • false, " " ( 빈문자열), 0 , NaN, undefined, null
• 나머지는 모두 형 변환했을 때 true 가 된다

논리 연산자 사용시 유의할 점
식	결과	결과값
참 && 참	참	뒤에 나오는 값
거짓 && 참	거짓	앞에 나오는 값
참 || 참	참	앞에 나오는 값
거짓 || 참	참	뒤에 나오는 값
값 ?? 값	** ?? : 널 병합 연산자 **	앞에 나오는 값
null ?? 값		뒤에 나오는 값
undefined ?? 값		뒤에 나오는 값

논리 연산자 사용시 주의할 점

빈 값 사용하기 

• undefined
  • 보통 반환할 결과 값이 없을 때
  • 값이자 자료형 
  • 불 값으로 변환시 false
  • undefined != false
• null
  • 값이자 자료형
  • 빈 값을 의미하지만, undefined 와 같지 않다
  • 불 값으로 변환시 false
  • 그러나 자바스크립트의 버그로 typeof object 로 나옴 
  • 값이 null 인지 확인하기 위해서는 === null 을 사용해야함 
• undefined 는 기본값이라는 의미라도 있지만, null 은 아무런 역할이 없다