[JavaScript] 자바스크립트 입문하기 _ JS 변수/상수/자료형/연산자

JavaScript

[JavaScript] 자바스크립트 입문하기 _ JS 변수/상수/자료형/연산자

개발하는 노숙자 2024. 4. 7. 03:06

1)변수와 상수

변수나 상수는 어떤 데이터를 담는 주머니로 인지하면 이해하기 편하다. 변수나 상수에 어떤 데이터를 담아두고 이를 재활용 하거나 값을 출력하는 등, 작업을 위해 필수적이다.

1.1) 변수 let

변수란, 변경이 가능한 값이 담긴 곳 으로 이해하자.

예전에는 var을 많이 썼던것 같은데 ES6라는 표준 문법 이후로는 let을 쓰는것을 권장한다.

let x = 1;
console.log(x);

가장 일반적인 변수의 사용법인 변수 초기화 방법이다. 변수 x를 선언함과 동시에 값을 넣는 형태이다. 메모리상으로는 선언과 초기화를 따로 하는 것과 동일하다. 즉, undefined할당 후 재할당을 하는 것이다.

let x = 1;
let y = x; // x가 가진 값을 y에 할당

console.log(x, y);

이런식으로 변수 x의 값을 변수 y의 값으로 사용할 수 있다. 이때 값은 데이터 영역에서 같은곳을 가리킨다. 즉 같은곳에 저장된다는 것. 이는 메모리를 절약할 수 있는 장점이 있다.

let x = 1;
let y = x; // x가 가진 값을 y에 할당
x = 2;
console.log(x, y);

위에서 말했듯 변수의 값은 변경가능하다.

변수 x를 선언할때 1이라는 값을 넣었지만, 이후 x에 2를 넣었다. 위 경우 결과는 2 1이 나온다.

즉, x에는 변경한 값이 나오고 y에는 변경 전 값이 나오는 것이다.

이는 데이터 영역에서 각 변수가 가르키는 값이 달라 발생하는 현상이다.

y는 초기에 선언된 x의 값을 가르키고, x는 이후 변경된 값을 가르키기 때문이다. 그 뜻은 x의 값이 재할당 되었다 해도 기존 위치에 데이터를 저장하는 것이 아닌 새 위치에 새 값을 넣는다는 것이다.

let x = 1;
console.log('첫 선언', x);

let x = 2;
console.log('다시 선언', x);

마지막은 주의 사항이다. 이미 만들어진 변수는 다시 선언할 수 없다. 위 코드 처럼 이미 변수 x가 선언 된 상태에서 추가로 변수 x를 선언할 수는 없다는 뜻이다. 이게 var로는 가능했다.(무근본...)

1.2) 상수 constant

상수는 변경 불가능 한 값이 담기는 곳 이라고 이해하면 된다.

상수 선언시 const를 사용하며, 상수의 선언은 대문자로 명명하는것이 일반적이다.

const PI = 3.14;
console.log('원주율:', PI);

상수는 무조건 선언과 동시에 값을 넣어 초기화 해줘야 한다. 단순히 선언만 하고 이후 값을 넣는 행위는 불가하다.

const PI = 3.14;
PI = 3.14159

또한 위에서 말했듯, 상수는 값을 변경할 수 없기 때문에, 값이 바뀔일이 없는 값만 상수로 지정해야 한다.

1.3) 변수/상수 여러개 선언하기

// let a = 1;
// let b = 2;
// ...

let a = 1, b = 2, c = 3;
const X = 4, Y = 5, Z = 6;

console.log(a, b, c);
console.log(X, Y, Z);

변수와 상수는 위와 같이 한번에 여러개를 선언할 수 있다. 하지만 가독성을 위해서는 주석 처리된 부분 처럼 하나하나 선언하는것이 좋다.

1.4) 식별자

식별자란 상수나 변수의 이름을 말한다. 식별자 명명에는 몇가지 규칙이 존재한다.

영문, 한글 및 유니코드 글자, 숫자 사용 가능
특수문자는 $ 또는 _ 사용가능
숫자로 시작 할 수 없음
공백(스페이스) 사용 불가
예약어 사용 불가

기존에 다른 프로그래밍 언어를 사용했던 사람도 식별자 명명 규칙은 비슷하니 햇갈릴 일은 없을듯 하다.

2) 자료형과 연산자

2.1) 원시 자료형 (primitive data types)

그냥 값 하나만 담는 단순한 자료형이다.

const a = true, b = 123.45, c = '안녕하세요!';
console.log(a, typeof a);
console.log(b, typeof b);
console.log(c, typeof c);

실행결과: ture 'boolean' <br> 123.45 'number' <br> 안녕하세요! 'string'

<br>은 줄바꿈 표시이다. 실제 결과창에는 안나온다.

위 코드에서 보았듯 typeof 연산자 형태로 뒤에 오는 값의 자료형을 반환(return) 받을 수 있다.

boolean : 참/거짓 (true/fales). 상반된 둘 중 하나의 값을 담음.
number : 숫자. 단, 다른 프로그래밍 언어와 달리 정수/실수 구분이 없음
string : 큰따옴표("), 작은따옴표('), 백틱(`)으로 둘러싸인 텍스트 데이터.

undefined

참고로 undefined 또한 값이다.

값이 부여되지 않은 상태라는 의미이다.

null

null 또한 값이다.

의도적인 빈 값을 의미한다.

let x;
console.log('값 넣기 전', typeof x);

x = null;
console.log('null값 넣은 후', typeof x);

실행결과: 값 넣기 전 undefined <br> null값 넣은 후 object

null값은 비어있다 라는 의미이다. 이러한 null값이 필요한 이유는 객체가 필요하나 값이 없을때 넣는것이다.

예시로 들면 "잠깐 있어봐, 뭐 들어올 자리야"/ "뭘 주긴 해야 되는데, 일단 이거라도 들고있어" 이런 느낌이다...

또는 객체 생성이 실패한 경우 등에 대신 반환하기도 한다.

2.2) 문자열(string) _ 텍스트 데이터

기본표기는 작은따옴표(')나 큰따옴표(") 사용. 각 따옴표 안에 문자를 입력하면 됨. 주의 사항은 같은 종류의 따옴표를 문자 안에 넣으면 오류가 발생함. 만약 같은 따옴표를 쓸거라면 이스케이프 표현을 해야함.

// ⭐️ 이스케이프 표현(escape sequence)
let word1 = '작은따옴표 안에 \'작은따옴표\' 사용';
let word2 = "큰따옴표 안에 \"큰따옴표\" 사용";
console.log(word1, word2);

이스케이프 표현	대체
\'	작은따옴표
\"	큰따옴표
\n	줄바꿈
\t	탭
\\	백슬래시

또는 백틱(`)으로 쓰기도 한다.

템플릿 리터럴

const NAME = '홍길동';
let age = 20;
let married = false;

console.log(
`제 이름은 ${NAME}, 나이는 ${age}세구요, \
${married ? '기혼' : '미혼'}입니다.`
);

${} 안에 상수나 변수, 표현식 등을 삽입할 수 있음.

다른 자료형 사용도 가능.

2.3) 문자열에 사용되는 연산자

비교

연산자	의미	비고
x == y	값 동일
x === y	자료형, 값 둘다 동일	권장
x != y	값 다름
x !== y	자료형 or 값 다름	권장
x < y	사전순상 x 가 먼저
x <= y	사전순상 x 가 먼저 or 같음
x > y	사전순상 y 가 먼저
x >= y	사전순상 y 가 먼저 or 같음

*작은/큰따옴표, 백틱 구분 없음

'Hello' === 'hello'

식으로 대소문자 구분 가능.

연결

연산자	의미
x + y	x와 y를 이어붙인 값을 반환
x += y	x에 y를 이어붙이고 그 결과를 반환

★다른 자료형과 더하면 문자열로 반환함.

2.4) 연산자 우선순위

순위	연산자
1	!, +, -, ++, --, typeof
2	**
3	*, /, %
4	+, -
5	<, <=, >, >=
6	==, !=, ===, !==
7	&&
8	\|\|
9	*=, +=, -=, =, /=, %=, =, &&=, \|\|=, ??=
10	,

연산자나 자료형은 기존 타 프로그래밍 언어들과 별반 큰 차이가 없으니 한번 훑어보면서 다른부분만 체크하면 될듯하다.

*본 포스팅은 '얄코'의 '제대로 파는 자바스크립트' 강의를 보고 정리한 내용임을 알림*

*해당 강의는 https://www.yalco.kr/ 에서 확인 가능함*

저작자표시 비영리 변경금지