20일차 프론트엔드 공부 - 기초 JavaScript

- 20일차 프론트엔드 공부 -

 

JavaScript

 

JavaScript란?

웹 페이지를 동적으로 동작할 수 있도록 만들어주는 프로그래밍 언어

 

변수와 상수

데이터를 담고 꺼내쓰는 상자

 

변수 선언 키워드 

var / let / const

 

선언

변수의 이름을 알려주는 것

변수명은 누구나 무엇에 관련된 변수인지 알 수 있도록 명시적으로 선언해야 한다

ex) let box;

 

할당

변수에 데이터를 담아주는 것

ex) let box = 123;

 

재할당

이미 데이터가 할당되어 있는 변수에 다시 변수를 할당하는 것

 

재선언

이미 선언되어 있는 변수명으로 다시 선언하는 것

const는 반드시 선언과 할당이 동시에 이루어져야 한다

ex) const num = 123; 만 가능

cont num ; 

num = 123; 은 안된다.

 

	var	let	const
재선언	가능	불가	가능
재할당	가능	가능	가능

 

var은 재선언과 재할당이 둘다 가능한데 가장 좋은 변수가 아닌가요?

만약 여러명 한개의 프로젝트를 진행한다고 가정해보자

A라는 개발자가 의자 가격을 선언하기 위해 var price = 10000;이라 선언했다고 해보자

B라는 개발자는 A라는 개발자가 price라는 변수명을 사용했다는 것을 모르고 책상 가격을 var price = 20000;이라는 코드를 사용할 수 도 있다.

이럴 경우 var은 재선언과 재할당 가능하기에 같은 변수를 사용했어도 별다른 오류가 생기지 않아 프로젝트에 큰 차질이 생길 수도 있다.

에러에 대해 미연에 방지하기 어렵다.

 

이러한 점 때문에 var을 사용하는 것을 최대한 지향하 

 

변수명 주의 사항

변수명은 동사가 아닌 명사로 작성하자

첫 글자는 숫자 사용이 불가능하다.

 

예약어

예약어는 특별한 의미를 가진 단어들이기 때문에 변수로 선언하고자 하면 에러가 발생한다.

ex) new, else, do, if, break, for ....

 

 

프로그래밍에서 변수는 공백을 허용하지 않는다

따라서 변수에는 표기법이 존재한다.

 

camelCase

띄어쓰기 대신 대문자로 구분

 

PascalCase

첫글자도 대문자, 띄어쓰기 대신 대문자 사용

 

snake_case

띄어쓰기 대신 언더바( _ )로 구분

 

JavaScript에서는 camelCase를 사용하는 것이 일반적이다.

 

String, Number

 

데이터 타입

String, Number, Boolean, undefined, null, symbol, Bigint, Object

 

문자열(String)

문자열를 데이터타입으로 표시

큰따음표("), 작은따음표(')안에 문자열을 표시

 

숫자(Number)

숫자를 그대로 입력하는 방식

숫자 타입 데이터는 모든 연산이 가능하다

 

산술 연산자

+ - * /

 

문자열과 숫자열에 + 연산을 사용하면 문자열로 반환된다.

ex)

'hello' + 1 = 'hello1'

'32' + 2 = '322'

 

+ 연산을 제외한 다른 연산은 어떻게 될까?

Nan(Not a Number)이 출력된다.

ex)

'hello' - 1 = Nan

'hello' * 1 = Nan

'hello' / 1 = Nan

 

하지만 문자열 안에 숫자가 들어있고 숫자열과 +를 제외한 다른 연산을 진행할 경우 숫자열이 반환된다.

ex)

'2' - 1 = 1

'5' * 2 = 10

 

문자열 연결 연산

더하기 연산에 문자열이 하나라도 포함되는 경우

'a' + 10 = 'a10'