[JavaScript] 기초 문법 - 변수와 상수, 자료형, 객체, 연산자, 조건문, 반복문

변수와 상수

 

자바스크립트에서 데이터를 저장할 수 있는 공간을 변수와 상수 변수라고 한다.

변수는 변할 수 있는 데이터를 저장하는 공간이고, 상수 변수는 재할당할 수 없는 데이터를 저장하는 공간이다.

 

1. var

var num; // 변수 선언
var num = 10 + 20; // 변수 초기화

 

2. let

let num = 10 + 20;

(1) 변수명 중복이 불가능하다.

(2) 호이스팅되지 않는다.

+) 호이스팅(hoisting)은 var 키워드로 변수를 선언하고 할당했을 때, 변수 선언을 자바스크립트의 스코프(scope) 맨 위로 올려서 실행하는 것을 말한다.

(3) 스코프의 범위가 다르다

 

3. const

변수를 선언할 때 사용하는 키워드로 const 도 있다. 변수명을 중복으로 선언하는 것과 호이스팅이 안되고, 스코프의 차이가 있다.

const 키워드가 let 과 다른 점은, const 키워드는 재할당이 안 된다는 점이다.

상수(constant)는 보통 변하지 않는 수를 의미하는데, const 키워드는 재할당이 안 되는 특징 때문에 상수 변수(constant variable)를 선언할 때 사용하는 키워드라고 하기도 한다. 

 

4. 비교

변수 선언	규칙
var	중복 선언이 가능.
let	중복 선언 불가능, 재할당 가능
const	중복 선언 불가능, 재할당 불가능, 반드시 선언과 초기화를 동시에 진행

 

 

자료형

 

자료형(data type)이란 자바스크립트에서 사용할 수 있는 데이터의 종류를 의미한다.

자바스크립트의 자료형은 기본 자료형과 참조 자료형으로 구분한다.

기본(primitive) 자료형으로는 문자(String), 숫자(number), 논리(boolean), undefined, null, Symbol 자료형이 있고, 참조(reference) 자료형에는 객체(object)가 있다.

구분	자료형	설명
기본 자료형	문자열	큰따옴표나 작은따옴표로 둘러싸인 값
	숫자형	정수, 실수를 포함한 모든 숫자
	논리형	논리값(true, false)
	undefined	변수에 아무런 값도 할당되지 않은 상태를 나타내는 값
	null	변수를 의도적으로 비워 두기 위해 사용하는 값
참조 자료형	객체	배열, 함수, 객체 리터럴 등으로 파생되는 상위 자료형

 

*템플릿 문자열

백틱(`)으로 문자열을 정의하는 방법이다.

${} 문법을 이용해 문자열에 변수 또는 식을 넣을 수 있다.

let dan = 3;
let gugu = 8;
let string = `${dan} 곱하기 ${gugu}은 ${dan * gugu}입니다.`;
console.log(string); // 3 곱하기 8은 24입니다.

 

*undefined

변수나 상수를 컴퓨터 메모리 공간에 선언하면 반드시 생성한 공간에 저장할 데이터를 할당해야한다. 할당하지 않을 경우 자바스크립트 내부적으로 변수와 상수 공간에 임시로 데이터를 할당하는데, 이 때 할당되는 값이 undefined 이다.

undefined는 사용자가 임의로 정의하고 할당하는 자료형이 아니다.

let empty;
console.log(empty); // undefined

 

*null

null 자료형은 null 값 하나만 있으며, 변수나 상수를 선언하고 의도적으로 선언한 공간을 비워 둘 때 할당한다.

let empty = null;
console.log(empty); // null

 

 

객체

 

객체(object)는 자바스크립트의 핵심적인 자료형이다.

기본 자료형을 제외하고 자바스크립트에서 거의 모든 데이터와 자료구조는 객체라고 봐야 한다. 

객체 자료형에서 파생되는 자료형으로 배열, 객체 리터럴, 함수가 있다.

 

1. 배열

배열은 복수의 데이터를 정의할 수 있는 자료형이다.

배열에는 숫자형 외에도 자바스크립트의 모든 자료형을 정의할 수 있다.

let array = ['abc', 10, true, undefined, null, [], {}, function(){}];

또한, 다음처럼 비어 있는 배열을 정의할 수도 있다.

let array = [];

 

2. 객체 리터럴

객체 리터럴은 객체를 정의하는 가장 간단한 방법이다.

객체 리터럴은 객체를 정의할 때 중괄호{}를 사용하며, 중괄호 안에는 키(key)와 값(value)의 한쌍으로 이루어진 속성(property)이 들어간다.

객체 리터럴로 정의한 객체는 배열보다 장점이 많은데, 그 중 하나는 값을 키로 구분한다는 점이다. 

let studentScore = {
	koreanScore:80,
    englishScore:70,
    mathScore:90,
    scienceScore:60
};
console.log(studentScore.koreanScore); // 80
console.log(studentScore['englishScore']); // 70

 

 

 연산자

 

*연산자 종류

종류	기호
산술 연산자	+, -, *, /, %, **, ++, --
대입 연산자	=
복합 대입 연산자	+=, -=, *=, /=, %=, **=
비교 연산자	==, !=, ===, !==, <, <=, >, >=
논리 연산자	&&, ||, !
삼항 연산자	?:

 

*비교 연산자

==	왼쪽 피연산자와 오른쪽 피연산자의 값이 같으면 참을 반환함.
===	왼쪽 피연산자와 오른쪽 피연산자의 값이 같고, 같은 타입이면 참을 반환함.

 

*논리 연산자

&&	논리식이 모두 참이면 참을 반환함. (논리 AND 연산) false값 찾아서 반환. false 없으면 마지막값
||	논리식 중에서 하나라도 참이면 참을 반환함. (논리 OR 연산) true값 찾아서 반환. true 값이 없으면 맨마지막값
!	논리식의 결과가 참이면 거짓을, 거짓이면 참을 반환함. (논리 NOT 연산)

 

 

조건문

 

조건문은 특정 조건에 따라 코드를 실행할 때 사용한다.

자바스크립트는 조건을 식으로 표현한 if 문과, 조건을 값으로 표현한 switch 문이 있다.

 

1. if 문

if(조건식1) {
	// 조건식1이 참이면 블록문 실행
} else if(조건식2) {
	// 조건식2가 참이면 블록문 실행
} else {
	// 조건식이 모두 거짓이면 블록문 실행
}

 

2. switch 문

switch (key) {
	case value1:
    	// key가 value1일 때 실행할 블록문
        break;
	case value2:
    	// key가 value2일 때 실행할 블록문
        break;
	default:
    	// key가 value1일 때 실행할 블록문
        break;
}

 

 

반복문

 

반복문은 특정 조건이 참으로 평가되는 동안 블록문을 반복해서 실행한다.

자바스크립트의 반복문에는  while, do...while, for, for...in 문 등이 있다.

 

1. while 문

while(조건식) {
	// 조건식이 참(true)이면 실행
}

 

2. do...while 문

do {
	// 블록문
} while(조건식);

 

3. for 문

for (초깃값; 조건식; 증감식) {
	// 블록문
}

 

4. for...in 문

for (가변수 in 배열/객체 리터럴) {
	// 블록문
}

 

5. break, contunue문

반복문을 종료할 때는 break 문, 건너뛰게 할 때는 continue 문을 사용한다.