자바스크립트 변수

tteokbokki-master 2023. 6. 25. 15:24

변수에는 컴퓨터가 구별할 수 있도록 이름을 붙여야 한다.

이를 '변수를 선언한다'라고 한다.

var 변수이름;

변수 선언 방법이다.

변수를 선언하는 세 가지 규칙이 있다.

규칙 1 : 이름은 의미 있게 짓는다

단순히 a, b 등으로 지어버리면 추후 왜 그렇게 만들었는지 모를 수 있다.

그렇기에 올해 연도는 currentYear 등으로 짓는다.

규칙 2 : 여러 단어를 연결한 변수 이름은 낙타 모양으로 만들어 준다.

첫 번째 단어는 소문자, 두 번째 단어부터는 대문자로 시작하는 방법을 사용하는 것을

'낙타표기법'이라고 한다. 프로그램에는 딱히 영향을 주지 않으나, 오랜 기간 암묵적으로 지켜온 규칙

규칙 3 : 선언할 수 없는 이름도 있다.

변수의 첫 글자는 반드시 문자 or 밑줄 or 달러 기호($)로 시작해야 하고, 그 에는

문자, 밑줄, 달러, 숫자를 사용할 수 있다.

var apple = "yummy";

//변수를 선언하면서 값을 저장

var banana;
banana = "long and yummy";

//변수를 선언한 다음에 값을 저장

변수에 값을 저장하려면 변수 오른쪽에 = 기호를 붙이고 저장하고 싶은 값 또는 식을 쓰면 된다.

변수를 선언하면서 저장하는 방법과, 변수를 선언한 다음 저장하는 방법이 있다.

var apple = 2000;
var banana = 10000;
var total = apple + banana;

변수에 식을 저장할 경우 식에 있는 변수는 미리 선언해 두어야 함

ES6 버전부터는 변수를 선언할 때 var 예약어 외에 let 또는 const 예약어를 사용할 수 있다.

let으로 선언한 변수는 블록({})을 벗어나면 사용할 수 없고

const는 상숫값을 선언할 때 사용한다.

자료형이란 컴퓨터가 처리하는 자료의 형태

자바스크립트의 자료형은 값이 하나인 '기본형'과

여러 값을 한꺼번에 담고 있는 '복합형'으로 구별한다.

기본형

- number(숫자) : 따옴표 없이 표기한 숫자를 나타낸다.

- string(문자열) : 작은따옴표(')나 큰따옴표(")로 묶어 나타낸다.

- boolean(논리형) : 참과 거짓이란 두 가지 값만 가지고 있는 유형

- undefined : 자료형을 지정하지 않았을 때의 유형. 예를 들어 변수를 선언만 하고 값을 정의하지 않으면 undefined가 된다.

복합형

- array(배열) : 하나의 변수에 여러 값을 저장하는 유형

- object(객체) : 함수와 속성이 함께 포함된 유형

value 변수에 10을 저장하면 value자료형은 number가 되고,

"10"을 저장하면 string가 된다.

이때 변수(또는 값)가 정말 어떤 자료형인지 알고 싶을 때 typeof 연산자를 사용하면 된다.

숫자형

자바스크립트에서 숫자는 정수와 실수로 구분한다.

-정수

정수는 소수점 없는 숫자를 가리킨다.

정수는 10진수, 8진수, 16진수의 세 가지 유형으로 나누기도 한다.

8진수 : 0~7로 표현하는 수, 10진수와 구별하기 위해 숫자 0을 맨 앞에 붙임

ex) 012,013,01000 (10진수로 10,11,512)

16진수

숫자 0~9와 알파벳 A~F로 표현하는 수로 16진수는 프로그래밍을 할 때 가장 많이 사용한다.

10진수와 구별하기 위하여 0x를 맨 앞에 붙인다.

이때 알파벳 A~F는 대문자와 소문자를 모두 사용할 수 있다.

ex) 0xfff 0xFFF 0Xfff 0XFFF (넷 모두 10진수로 16^3-1 = 4095)

-실수

실수는 소수점이 있는 숫자를 가리킨다.

자바스크립트에서 실수를 계산할 때 주의할 점이 하나 있다.

0.1 + 0.2 수식의 결괏값은 0.3이 아니라 0.300...4가 나온다.

그 이유는 js에서 0.1이나 0.2를 2진수로 변환해서 계산하는데, 이때 자릿수가 많은 소수로

변환되고, 그 상태에서 0.1과 0.2를 더하기 때문에 생긴 결과이다.

따라서 정밀하게 숫자를 계산하는 프로그램을 만들 때는 항상 주의해야 한다.

문자형

문자형은 작은따옴표나 큰따옴표로 묶은 자료를 의미한다.

숫자도 따옴표로 묶으면 문자형으로 인식한다

따옴표 자체를 표시하려면 작은따옴표 안에 큰 따옴표를 넣는 식으로 사용해야 한다.

ex) ' "안녕" '

논리형

논리형은 참, 거짓이라는 값을 표현하는 자료형으로 주로 프로그램에서 조건을 확인할 때 많이 사용한다.

undefined와 null

undefined는 자료형이 정의되지 않았을 때의 상태이다.

자바스크립트에서는 변수를 선언할 때 미리 자료형을 지정하지 않고

값을 할당할 때 그 값에 따라 결정된다.

즉 변수가 undefined라는 것은 '처음부터 변수에 값이 할당되지 않았다'는 의미이지

undefined 자료형을 가진다는 뜻이 아니다.

null은 undefined와 구별해서 생각해야 하는 개념으로

'처음에 할당된 값이 더는 유효하지 않음'을 의미한다.

컴퓨터는 값이 처음부터 없었던 경우와 더는 유효하지 않게 된 경우를 구별한다.

그래서 보통 변수를 초기화할 때 null을 많이 사용한다.

배열

var spring = "봄";
var summer = "여름";
var fall = "가을";
var winter = "겨울";

계절을 4줄로 나타냈다.

var seasons = ["봄","여름","가을","겨울"];

배열을 사용하면 4줄로 작성했던 프로그램이 1줄로 줄어든다.

배열의 이름만 사용하면 배열 내용 전체를 가져오고,

ex) seasons

배열 이름과 대괄호 안에 0,1,2등의 숫자를 사용하면 해당 위치의 값을 가져온다.

ex) seasons[0]

객체

var lee = {
	firstName : "YongJin",
        lastName : "Lee",
        age : 24,
        address : "Seoul"
}

객체는 여러 가지 자료를 중괄호로 묶을 수 있다.

여러 자료를 묶는다는 점은 배열과 비슷하나, 저장하는 값의 모양이 조금 다르다

키(key)와 값(value)을 콜론(:)을 사용하여 한 쌍으로 짝지어야 한다.

위 예제에서 firstName은 키(key)이고, "YongJin"은 값(value)이다.

객체는 자바스크립트에서 가장 큰 비중을 차지하는 개념이다.

c언어, java는 변수를 선언할 때 변수의 자료형을 미리 지정해야 한다.

그리고 그 유형에 맞는 값만 변수에 저장해야 한다.

하지만 자바스크립트는 미리 변수의 자료형을 지정하지 않다. 변수를 지정하여 값을 할당만 하면 된다.

자바스크립트로 프로그램을 만들 때는 변수에 의도한 값이 정확하게 들어갔는지 꼭 확인해야 한다.

(typeof 사용)

사칙연산자 : + - * /

나머지연산자 : %

증감연산자 : ++(변수값 1증가) --(변수값 1감소)

연산 대상을 '피연산자'라고 부른다.

피연산자를 제외한 더하기, 빼기 같은 것을 '연산자'라고 부른다.

var a = 10;
var b = a++ + 5;
b   

// 15 출력

var c = 10;
var d = ++c + 5;
d

// 16 출력

증감 연산자는 피연산자 뒤에 있을 때, 전체 수식의 처리가 끝난 다음 적용된다.

반대로 피연산자 앞에 있을때 전체 수식을 처리하기 전에 적용된다.

즉 위의 식에서 a++은 기존의 a값인 10과 5를 더하여 b에 할당한 다음에

비로소 a값을 1만큼 증가시키는 것이고,

++c는 먼저 c의 값을 1만큼 증가시킨 다음에 5를 더하여 d에 할당하는 것이다.

이 둘의 차이를 반드시 이해하고 넘어가야햔다.

var x = 10; 
x += 10;   // x = 10 + x;
var y = 20;
y += x;   // y = y + x;

할당연산자는 자바스크립트에서 가장 많이 사용하는 연산자이다.

할당연산자는 산술연산자와 조합해서 사용할 수도 있다.

더하기 연산자로 문자열을 더할 때는 '연결 연산자'라는 또 다른 이름으로 부른다.

즉 두 수를 더할 때에도 +기호를 사용하지만, 두 개 이상의 문자열을 연결할 때도 + 기호를 사용한다.

템플릿 문자열

문자열 백틱으로 묶고 값이 들어가는 부분을 ${} 사이에 표시하는 것

var a = 18;
`집 가고 싶다 ${a}`

'집 가고 싶다 18'이 출력된다.

var numVar = 100;
var strVar = “50”;
numVar + strVar  // “10050” 출력

100과 "50"을 더하니 "10050"이 출력된다.

즉 + 기호는 연결 연산자이다.

var numVar = 100;
var strVar = “50”;
numVar - strVar // 50 출력

100과 "50"을 빼니 숫자 50이 출력된다.

즉 - 기호는 산술 연산자이다.

자바스크립트에서는 숫자형과 문자형 자료를 더하거나 뺄 때

자동으로 결괏값의 자료형을 지정한다

단 그렇기에 원하는 결괏값을 제대로 얻으려면 문자열과 숫자를 연산할 때

어떻게 결괏값이 나오는지 반드시 기억해야 한다.

곱하기와 나누기, 나머지 연산은 문자형 자료를 모두 숫자로 인식

비교 연산자는 두 값을 비교하여 true 또는 false로 결괏값을 내놓는 연산자이다.

== 연산자는 두 수가 같은지 확인하는 연산자

!= 연산자는 두 수가 다른지 확인하는 연산자

== 와 === 연산자는 모두 왼쪽과 오른쪽이 같은지 비교하는 연산자이다.

단 중요한 차이점이 하나 있다.

== 연산자는 문자형 자료와 숫자형 자료가 있을 때, 자동으로 자료형을 변환하여 비교한다

그래서 10 == "10"은 true를 반환한다

하지만 === 연산자는 두 자료형의 변환을 허용하지 않기에

10 === "10"은 false를 반환한다.

논리연산자

or 연산자는 ||로 표시하며, 왼쪽과 오른쪽 중 하나만 참이면 true로 처리한다.

하나라도 맞으면 or연산자의 결괏값은 true이다.

and연산자는 기호 &&로 표시하며 왼쪽과 오른쪽 모두가 참인 경우에만 true로 처리

즉 하나라도 틀리면 and 연산자의 결괏값은 false이다.

not연산자는 기호 !로 표시하며, true나 false를 반대로 뒤집는다.

서로 다른 연산자를 계산하는 순서

단항 연산자 : !, ++, —

산술 연산자 : * / % + -

비교 연산자 : < <= > >= == != ===

논리 연산자 : && ||

할당연산자 : = += -= *= /= %=

단항 -> 산술 -> 비교 -> 논리 -> 할당

각 항목 내에서는 왼쪽에서 오른쪽

ex) 단항 내에서는 ! -> ++ -> -