Frontend/Study

[JS] 14_자바스크립트 기본 문법

BeNI 2021. 7. 6. 19:01
728x90

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다.

 

1. 변수 알아보기

1) 변수 : 프로그램을 실행하는 동안 값이 여러번 달라 질 수있는 데이터

2) 상수 : 값을 지정하면 바뀌지 않는 데이터

 

2. 변수 선언 규칙

1) 영어문자와 _(언더스코어-아래다시), 숫자를 사용함

2) 영어 대소문자 구별함, 예약어 변수 이름 못 씀

3) 여러 단어를 연결한 변수이름은 중간에 대문자를 섞어쓰는게 좋음

4) 변수 이름은 의미있게!

 

3. 변수 선언하기

var 변수명;
var a, b, c; //한꺼번에 변수 지정이 가능하다.

 

4. 자료형

종류 설명 예시
숫자형 따옴표 없이 숫자로만 표시(정수, 실수) var num = 1000;
문자형 작은/큰따옴표로 묶어서 나타냄 var greeting = "안녕하세요; 
논리형 참과 거짓 var isEmpty = true;
배열 하나의 변수에 여러 값을 저장 var seasons = ['봄', '여름', '가을', '겨울']
객체 함수와 속성을 함께 포함 var date = new Date();
undefined  자료형이 지정되지 않았을 때 상태
null 값이 유효하지 않을때

- 자바스크립트에서 실수계산은 적합하지 않음. (이진수로 계산하기 때문)

- 프롬프트창에서 입력받은 값이 문자열이더라도 사칙연산에서 자동으로 숫자형으로 바뀜

 

5. 연산자

종류 설명
산술 연산자 +, -, /, *, %, ++(1을 더함), --(1을 뺌)
할당 연산자 =, +=, -=, *=, /=, %=
비교 연산자 ==, !=, ===, !==, <, <=, >, >=
논리 연산자 !, &&(and), ||(or)
조건 연산자 (조건) ? true 일때 실행 : false 일때 실행  ex) 3+2 ? 

* ==와 ===차이 : ==는 자동으로 자료형을 변환하여 비교, ===는 자료형까지 비교하여 결과 출력

ex) 3 == "3" >> true    3 === "3"  >> false

* 그래서 자동으로 형변환하지 않기 위해 ===를 더 많이 사용함

 

👉 자동 형변환

- 자바스크립트에서는 기대하는 값에 다른 자료형이 오면 자동으로 형 변환을 해준다.

var a = "10";
var b = "20";
var result = a+b;  >> "1020"
var result = a-b;  >> -10

6. 조건문

1) if문/ if-else문

if(조건) {
	조건 결과값이 true일 때 실행 할 명령
} else {
	조건 결과값ㅇ false일 때 실행할 명령
}

2) switch 문

switch(조건)
{
    case 값1: 명령1
      break
    case 값2: 명령2
      break
    ....
    default: 명령n
}

 

7. 반복문

1) for문

for(초기값; 조건; 증감식) {
	실행할 명령
}

2) while문

while(조건) {
	실행할 명령
}

3) do-while문 : 일단 열영을 한번 실행한 후, while문에서 조건을 체크한다.

do {
	실행할 명령
} while (조건)

4) break문 : 반복문이 끝나기 전에 조건에 따라 반복문을 빠져나옴

5) continue : 반복 과정을 한 차례 건너뛰고 반복문의 맨 앞으로 돌아감

728x90