JS | 변수, 자료형, 형변환, 연산자

BOZZANG·2022년 3월 26일
0

JavaScript

목록 보기
1/14
post-thumbnail

🎇 변수와 상수

대다수의 자바스크립트 어플리케이션은 사용자나 서버로부터 입력받은 정보를 처리하는 방식으로 동작한다.

🔗 변수

변수 명명 규칙

변수명에는 오직 문자와 숫자 그리고 기호 $와 _만 들어갈 수 있다.
첫 글자는 숫자가 될 수 없다.

🔗 상수

변화하지 않는 변수 선언 시, `let` 대신 `const`를 사용한다.
`const` 로 선언한 변수를 constant라고 부르고, 재할당이 불가하다.
변수의 값이 변경되지 않을 것이라 확신되면, 변경되는 것을 방지하기 위해 `const` 를 사용할 것

대문자 상수

기억하기 쉽고, 오타의 확률을 줄이고, 유의미한 코드를 만들기 위해서 대문자로 명명하기도 한다.

🔗 let, var, const 차이

const (재선언 X, 재할당 X)

constant, 상수, 값이 바뀔 수 없음

let (재선언 X, 재할당 O)

새로운 것을 생성할 때 사용하는 것 

변수 값을 업데이트 하고 싶을 때 const 대신 let을 사용함

이렇게 변수를 선언할 수 있는 이유 중 좋은 점은
코드를 읽고 코드의 의도를 알 수 있다는 것이다.

var (재선언 O, 재할당 O)

예전 거, 원한다면 어디서든 업데이트 할 수 있는데 그래서 문제가 되는 것이다. 쓰지 말 것

let a = b;
let a = c;
//재선언 금지

let a = b;
a = c;
//재할당은 가능

const a = b;
const a = c;
//재선언 금지

const a = b;
a = c;
//재할당 금지

var a = b;
var a = c;
a = d;
//재선언, 재할당 가능

🎇 자료형과 형 변환

🔗 자료형

자바스크립트는 여덟 가지 기본 자료형이 있다. 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있다. 따라서 변수는 어떤 순간에 문자열일 수 있고 다른 순간엔 숫자가 될 수도 있다.

let message = "hi";
mseeage = 123;

이처럼 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어동적 타입(dynamically typed) 언어 라고 부른다.

🔗 숫자형

숫자형에는 일반적인 숫자 외에 infinity, infinity , NaN 와 같은 특수 숫자 값(special numeric value)가 포함된다.

infinity

무한대, 어느 숫자든 0으로 나누면 무한대를 얻을 수 있고, 직접 참조 가능

NaN

 계산 중 에러가 발생했다는 것을 나타내주는 값

🔗 문자형

빈 글자들이나 글자들로 이뤄진 문자열을 나타낼 때 사용하고,
단일 문자를 나타내는 별도의 자료형은 없다.


🔗 Boolean true false


🔗 null 독립 자료형

null값은 오직 null 값만 포함하는 별도의 자료형이다.

다른 언어에서는 null을 ‘존재하지 않는 객체에 대한 참조’나 ‘널 포인터(null pointer)’를 나타낼 때 사용한다.

존재하지 않는 (nothing) 비어 있는 (empty) 알 수 없는(unknown)


🔗 Undefined 독립 자료형

Undefined 값도 null 값처럼 자신만의 자료형을 형성한다.

값이 할당되지 않은 상태

변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 Undefined 자동 할당된다.

하지만 직접 할당은 권장하지 않는다. 변수가 비어있거나, 알 수 없는 상태라는 것을 나타내려면 null을 사용하자.


🔗 Object , Symbol

객체형을 제외한 다른 자료형이든 한 가지만 표현할 수 있는데,
이를 원시(primitive)자료형이라고 부른다.

반면 객체는 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있다.

심볼형은 객체의 고유한 식별자(unique idetifier)를 만들 때 사용한다.


🔗 typeof 연산자

피연산자의 자료형을 문자열 형태로 반환한다.

자료형에 따라 처리 방식을 다르게 하고 싶거나, 변수의 자료형을 빠르게 알아내고자 할 때 유용하다.

typeof x , typeof(x)

nulltypeof연산은 "object"인데, 이는 언어상 오류이고 null은 객체가 아니다.

피연산자가 함수이면 "function"을 반환하지만 함수형은 따로 없다.
하위 호환성 유지를 위해 남겨진 형태이다.


🔗 Array

데이터 구조 배열

Array의 목적은 하나의 variable 안에 데이터의 list를 가지는 것이다.

const dayOfWeek = [mon, tue, wed, thu, fir, sat, sun];
const nonsense = [1, 2, "hello", false, null, true, undefined];

//get item from array
console.log(dayOfWeek[0]);

// add one more item to the array
dayOfWeek.push(2);

//update
dayOfWeek[0] = "Monday";

🔗 형 변환 (원시형의 형변환)

문자형으로 변환

alert메서드는 매개변수로 문자형을 받기 때문에,
다른 형의 값을 전달받아도 문자형으로 자동 변환된다.

String(value)

let value = true;
alert(typeof value); //boolean
value = String(value); //value에 "true"저장됨
alert = (typeof value); //string

숫자형으로 변환

수학과 관련된 함수와 표현식에서 자동으로 일어난다.

Number(value)

let str = "123";
alert(typeof str); //string
   
let num = Number(str); //문자열 str이 숫자 123으로 반환됨
alert(typeof num); //number

숫자 이외의 글자가 들어가 있는 문자열을 숫자형으로 반환하면 NaN

전달받은 값형 변환 후
UndefinedNaN
null0
true or false1 , 0
string문자열의 처음과 끝 공백이 제거됨 공백 제거 후 남아있는 문자열이 없다면 0, 그렇지 않다면 문자열에서 숫자를 읽는다. 반환에 실패하면 NaN이 된다.

null , Undefined는 숫자형으로 변환 시 결과가 다르다는 점에 유의하자.


Boolean형으로 변환

Boolean(value)

false : 숫자 0, 빈 문자열, null, undefined , NaN
(직관적으로 비어있다고 느껴지는 값)

그 외는 true로 반환

주의: 문자열 "0"true이다. + 문자열 공백

전달받은 값형 변환 후
0, null, undefined , NaNfalse
그 외의 값true

🎇 연산자

🔗 할당 연산자

이름단축 연산자
할당x = yx = y
더하기 할당x += yx = x + y
빼기 할당x -= yx = x - y
곱하기 할당x *= yx = x * y
나누기 할당x /= yx = x /y
나머지 할당x %= yx = x % y
거듭제곱 할당x **= yx = x ** y
왼쪽 시프트 할당x <<= yx = x << y
오른쪽 시프트 할당x >>= yx = x >>y
부호 없는 오른쪽 시프트 할당x >>>=yx = x >>> y
논리 AND 할당x &&= yx && ( x = y)
논리 OR 할당x
널 병합 할당x ??=yx ?? (x = y)

🔗 비교 연산자

피연산자를 비교하고, 결과로 논리 값을 반환한다.

타입이 서로 다를 경우 js가 비교하기에 적합한 타입으로 변환한다.

타입 변환의 유일한 예외는 ===!== 연산자를 사용해 엄격일치불일치 비교를 수행하는 경우이다. 두 연산자는 피연산자를 변환하지 않는다.


🔗 산술 연산자

% ++ -- -(단항) +(단항) **


🔗 논리 연산자

AND && OR || NOT !

!
단일 피연산자를 true로 반환할 수 있으면 false를 반환한다.
그 외에는 true를 반환한다.

null, 0, NaN, " ", undefined : false 반환


🔗 문자열 연산자

console.log('문자열' + '연결');
const str = "안";
str += '뇽'; // str "안뇽"

🔗 조건 (삼항) 연산자

세 개의 피연산자를 받는 유일한 연산자
주어진 조건에 따라 두 값 중 하나를 반환한다.

const status = (age >= 19 ) ? "성인" : "미성년자" ;
condition ? val1 : val2

condition 이 참이라면 val1 반환, 거짓이라면 val2 반환

참고 Modern JavaScript Tutorial

0개의 댓글