JS_02_기본 문법

07월 12일 in Category / JAVASCRIPT

한빛미디어 ‘모던 웹을 위한 JavaScript jQuery 입문’ 책으로 공부한 내용입니다.

1. 기본 문법

표현식 : 값을 만들어내는 간단한 코드

123
1 + 2 + 3
'String'

문장 : 하나 이상의 표현식이 모인 것

1 + 2 + 3;
var str = 'String'

키워드 : JavaScript에서 정해진 특별한 의미가 있는 단어

true / false / if / else / for / continue / break / switch / case / default
try / catch / finally / instanceof / typeof / do / while / throw / in
new / void / null / var / return / function / delete / this / with

식별자 : 변수명 or 함수명

• 키워드 사용 금지
• 숫자로 시작 금지
• _ 와 $만 허용
• 공백 사용 금지

1. 생성자 함수의 이름은 항상 대문자로 시작
2. 변수와 인스턴스, 함수, 메서드의 이름은 항상 소문자로 시작
3. 여러 단어로 이루어진 식별자는 각 단어의 첫 글자를 대문자로

구분	단독	다른 식별자와
괄호 없음	변수	속성
괄호 있음	함수	메서드

주석

// 주석입니다1
/*
 * 주석입니다2
 */

2. 출력 & 자료형

문자열 자료형

alert('String' + "String" + "\"String\"" + "\n");

숫자 자료형

alert(123  % 7 + 2.5 - 6 * 0);

불 자료형

alert(30 > 20 > 10);   // false  (30 > 20) 이 true라서 1로 변환 -> (1 > 10) 은 false

형변환

var str = 123 + '4';
var num = 123 * '4';
var str = String(123);
var num = Number('123');
var bool = Boolean(undefined);    // false

일치 연산자

alert('123' == 123);    // true 자동 형변환
alert('123' === 123);   // false 자료형이 다름

3. 변수

var stringVar = 'String';
var numberVar = 123;
var booleanVar = true;
var functionVar = function() {};
var ojbectVar = {};

4. undefined

• 선언 했지만 초기화하지 않은 함수

5. 입력

var input = prompt('Message', 'str');   // 문자열 자료형 입력
var input = confirm('수락하시겠습니까?'); // boolean 자료형 입력

6. 추가

템플릿 문자열

alert(`표현식 123 + 4의 값은 ${123 + 4}입니다.`)   // 표현식 123 + 4의 값은 127입니다.

let & const

키워드	구분	선언 위치	재선언
var	변수	전역	가능
let	변수	해당	불가능
const	상수	해당	불가능

const constant = 123;   // 값 설정 안하면 오류
{
  let variable = 123;
}
{
  alert(variable);      // error
}

비동기 함수 문제

<script>
  for(var i=0; i<3; i++){
    setTimeout(() => {
      alert(i);
    }, 1000 * i);
  }
</script>

• 1초 후에 i는 전역 scope에 3으로 존재하기 때문에 [ 3 / 3 / 3 ] 으로 출력

<script>
  for(var i=0; i<3; i++){
    ((i) => {
      setTimeout(() => {
        alert(i);
      }, 1000 * i);
    })
  }

• 함수로 한 번 감싸고 사용할 변수를 전달하는 방법을 사용

```JavaScript