Programming/JS

[JavaScript] 2. JS 기본 문법

코딩하는 포메라니안 2022. 3. 13. 22:51

1. 주석

1. 한 줄 주석 = // code

2. 블록 주석 = /* code */

 

 

 

2. 변수

동적 타입 언어로, 실행하면서 값이 할당되는 시점에 타입이 결정된다.

 

<규칙>

  • 변수 = 형용사, 명사 사용 권장
  • 함수 = 동사 사용 권장
  • 낙타 표기법 ex) userName
  • 키워드, 공백 포함X
  • 숫자로 시작X
  • 특수 문자는 _와 $만 허용

 

 

 

3. 자료형

1. 원시 타입

자료형 typeof 값 설명
숫자 number 정수 or 실수 (구분X)
문자열 string 문자, ' ' or " "로 표기
boolean boolean 참(true, 1, "-" 등) or 거짓(false, 0, null, "" 등)
undefined undefined 변수가 선언되었지만, 초기화 되지 않을 경우 (개발자가 직접 할당X)
null object 값이 존재하지 않을 경우 (직접 할당 O)

 

 

1) 숫자

- 모든 숫자를 8byte 실수 형태로 처리

- Infinity = 무한대를 나타내는 상수, 0으로 나누거나 Infinity를 사칙연산한 값

- NaN (Not a Number) = 계산의 결과가 숫자가 아님을 나타내는 상수

console.log(0/0); //NaN

console.log(parseInt('1A'));//1  => 앞에서부터 숫자(0 ~ 9)까지 잘라냄
console.log(parseInt('A'));//NaN

console.log(new Number('1'));//1
console.log(new Number('1A'));//NaN

 

 

2) 문자열

- 16비트 Unicode문자 사용

- 작은 따옴표(' '), 큰 따옴표(" ") 둘 다 문자열

- 이스케이프 시퀀스 사용 가능 ex) \n = 개행, \' = 문자열 안에 작은 따옴표 출력

 

+)  백틱(` `) = 문자열에 변수를 쓰고 싶을 때 유용

let t1 = "홍길동";
let age = "25";
console.log(`내 이름은 ${t1}이고, 나이는 ${age}입니다.`);

 

 

2. 객체 타입

- 원시 타입을 제외한 모든 값

 

 

 

4. 자동 형 변환

- 자료형에 대해 느슨한 규칙을 적용하여, 혼란을 야기

var num = 10;

console.log("num = " + num); // num = 10

console.log("10" - 5); //5 => 빼기는 두 피연산자가 숫자만 되니까
console.log("10" + 5); //105
console.log((+"10") + 5);//15

console.log(parseInt("123.45")); //123
console.log(parseFloat("123.45")); //123.45

 

 

 

5. 변수 호이스팅 (Variable Hoisting)

- var 선언문이나 function 선언문 등 "모든 선언문"이 해당 영역의 "처음으로 옮겨진 것처럼" 동작

 

*변수 생성 단계

1) 선언 단계(변수 등록) & 초기화 단계(변수가 undefined로 초기화 됨)

2) 할당 단계(초기화된 변수에 실제 값을 할당)

 

//**********var test***********
console.log(num); //undefined
//console.log(su); //*error
var num = 10;
console.log(num); //10
{
    var num = 20; //=> 재할당된 것으로 여김
}
console.log(num);//20

//**********let test*********** //const도 마찬가지
// console.log(num2); //*error
let num2 = 10;
console.log(num2); //10
{
    let num2 = 20;
}
console.log(num2);//10

 

 

 

6. 변수 선언 키워드

키워드 구분 영역 같은 영역 내 재선언
var 변수 전역 스코프 가능
let 변수 해당 스코프 불가능
const 상수 해당 스코프 불가능 (+ 재할당 불가능)
var num = 10;
{
    var num = 20; //=> 재할당된 것으로 여김
    let num2 = 10;
    const num3 = 5;
    //num3 = 10;//*error
}
console.log(num);//20
console.log(num2);//*error
console.log(num3);//*error

 

 

 

7. 연산자

- 다른 건 Java와 동일

연산자 설명
delete 프로퍼티 제거
=== 값이 일치하는지 확인 (타입포함)
!== 값이 일치하지 않는지 확인 (타입포함)

 

 

 

8. 조건문(if, switch), 반복문(while, for)

- java와 동일

 

1. if문

if(조건식){
	//여기 코드
} else if(조건식2){
    //여기 코드2
} else{
    //여기 코드3
}

 

 

2. swtich문

switch(값){
    case 값1:
        break;
    case 값2:
        break;
    default:
        //실행 코드
    }

 

 

3. while문 & do/while문

while(조건식){
    //실행 코드
    }

 

 

4. for문

1) 기본

let arr =['A', 'B', "C", "D"];
for(let i=0; i<arr.length; i++){
    console.log(arr[i]);
}
//A
//B
//C
//D

 

2) for _ in _

//1. 배열
let arr =['A', 'B', "C", "D"];
for(let data in arr){
    console.log(data+" : "+arr[data]);
}
//0 : A
//1 : B
//2 : C
//3 : D

//2.객체
let person = {
    name: "홍길동",
    age : 25
}
for(let data in person){
    console.log(data+" : "+person[data]);
}
//name : 홍길동
//age : 25

 

3) for _ of _

//1. 배열
let arr =['A', 'B', "C", "D"];
for(let data of arr){
    console.log(data);
}
//A
//B
//C
//D

//2. 객체는 X

 

4) forEach

*break 사용 불가능

let arr =['A', 'B', "C", "D"];
arr.forEach(function(data){
	console.log(data);
});
//A
//B
//C
//D

 

'Programming > JS' 카테고리의 다른 글

[JavaScript] 4-1. 화살표 함수  (0) 2022.05.04
[JavaScript] 5. Window 객체  (0) 2022.03.20
[JavaScript] 4. JS의 함수  (0) 2022.03.20
[JavaScript] 3. JS의 객체(Object)  (0) 2022.03.14
[JavaScript] 1. Javascript 개요  (0) 2022.03.13