[JS] 변수, 문자와 숫자

자바스크립트란?

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

ex) 어떤 사이트에 로그인하는 것, 이미지를 업로드 하는 것, 메뉴를 눌러 다른페이지로 이동하는것 등.....

- 처음 웹 페이지를 조작하기 위해 탄생하였으나 현재 서버구축, 비디오 스트리밍, 게임 등 많은 분야에서 활용되고 있다.

 

변수란?

- 데이터 보관함(원하는 데이터를 담을 수 있는 상자)과 같은 개념

- 나중에 다시 사용하기 위해 기억해야할 정보를 저장해야하는 공간

(쉽게 말하자면 변수명이라는 이름의 박스에 데이터를 넣는다)

 

변수 선언과 데이터 할당

변수 선언시에 변수명은 반드시 이름만으로도 어떠한 데이터가 담겨있는지 알 수 있도록 명시적이어야 한다. 

var aaa; // x
var age; // o

 

프로그래밍에서 어떠한 변수에 데이터를 담아주는 것 => 할당

자바스크립트에서 변수 할당은 할당연산자(=)를 통해 할당한다. (수학에서의 같다의 의미가 아님)

할당된 데이터는 컴퓨터의 메모리에 저장을 하게됨

age = 12; // age 변수에 숫자 12 '할당'

변수 선언과 데이터 할당을 동시에

var age = 20;
//선언부  //할당부

 

변수 선언 키워드

var, let, const 키워드 3개를 활용해 변수를 선언할 수 있다

 

var는 범위 내에서 업데이트 하고 재선언할 수 있다. (재선언O, 재할당O)

재선언이 가능하므로 에러를 야기할 수 있으니 사용을 지양

var name = "Syong";
console.log(name) // 결과: Syong

var name = "SyongSyong"; // 재선언
console.log(name) // 결과: SyongSyong

name = "Jerry" // 재할당
console.log(name) // 결과: Jerry

 

let은 업데이트 할 수 있지만 재선언할 수 없다 (재선언X, 재할당O)

let name = "Syong";
console.log(name) // 결과: Syong

name = "Jerry"; // 재할당
console.log(name) // 결과: Jerry

 

const는 업데이트하거나 재선언할 수 없다. (재선언X, 재할당X) - 상수변수

선언과 할당이 동시에 진행되어야 한다

const name = "Syong";
console.log(name)

name = "Jerry";
console.log(name) // 오류

	var	let	const (상수)
재선언 가능여부	O	X	X
재할당 가능여부	O	O	X

 

변수명 주의사항 

- 변수명 선언시 표기법(camelCase, PascalCase, snake_case)

- 동사가 아닌 명사로

- 첫글자는 숫자가 될 수 없음

- 상수는 가급적 대문자로 표현

- 예약어*는 사용할 수 없음 (에러발생)

 

예약어란?

자바스크립트 내에서 특별한 의미를 가진 단어들

new, else, do, if, break, case, finally, catch, this.....

더 많은 예약어는 MDN에서 볼 수 있다

 

데이터타입(자료형)

자바스크립트의 모든 데이터는 특정한 데이터 타입*에 속한다

-> 자바스크립트 데이터의 종류, 자료형이라고도 불림

 

문자열(String)

- 텍스트 데이터를 의미

- 큰따옴표, 작은따옴표로 정의할 수 있다

- 따옴표안에 존재하는 모든것들이 문자열 데이터가 됨 (한글, 공백, 숫자, 영어, 특수문자)

 

문자열의 연산은 +만 사용할 수 있다

다른 연산을 시도할 경우 NaN을 반환함

console.log('안녕'+' 반가워') // 안녕 반가워

 

숫자(Number)

- 숫자 데이터

- 산술 연산자의 사용이 가능

산술 연산자
+	더하기
-	빼기
*	곱하기
/	나누기
%	나머지

- 문자와 혼합 연산시 NaN을 반환한다 (더하기 제외)

- 산술연산자는 숫자 타입의 데이터로 연산을 시도했을 경우에만 정상적인 값을 반환, 숫자가 아닌 값으로 연산을 시도했을 경우에는 NaN을 반환한다

 

예외상황. 암시적 형변환*

- 자바스크립트에 의해 자동으로 형변환이 일어남

console.log('10'+10) // 문자열 1010
console.log('10'*10) // 숫자 100
consol.elog('abe'*10) // NaN
console.log('안녕'+10) // 문자열 안녕10
console.log(true+3) // 숫자 4

더하기 연산자의 경우, 암시적 형변환이 일어나고 +가 문자열 연결 연산자로서 동작함

그 외의 산술연산자의 경우 주어진 데이터를 암묵적으로 숫자로 변환시키려함. 이때 문자열 내의 숫자와 같이 숫자로 변환이 되는 데이터라면 숫자로 인식되어 연산을 진행함

 

본 글은 훈훈한 자바스크립트 강의의 내용을 정리한 글입니다