2. 변수

Index

Index 2. 변수 2.1 변수란?2.2 변수의 자료형 2.3 자료형에 대해 조금 더 알아봅시다

2. 변수

2.1 변수란?

변수는 ‘변할 수 있는 수’, ’변할 수 있는 정보’라는 뜻입니다.

프로그램을 만드는 데 필요한 숫자나 문자와 같은 데이터를 보관할 공간이 필요한데, 물건을 잠시 보관하는 상자 같은 역할을 하는 것이 변수입니다.

변수는 선언하고 할당하고 사용할 수 있습니다. 또한, 변수는 ‘변할 수 있는 수’이므로 지정된 값을 계속 바꿀 수 있습니다.


<!DOCTYPE html>
<html>
<head>
	<title>변수</title>
</head>
<body>
	<script>
	var 나변수 = 10;
	</script>
</body>
</html>

변수명을 정할 때

문자와 숫자, 기호 $와 _(언더바)만 사용 가능합니다.

첫 글자는 숫자가 될 수 없습니다.

대소문자 구별이 안됩니다.

예약어가 쓰일 수 없습니다.


var a;
var my_name;

자바스크립트에서 변수를 선언할 때에는 앞에 var을 써줍니다. 변수의 타입과 var 외 다른 키워드는 뒤에서 더 자세하게 알아보도록 하겠습니다.


a = 1;
my_name ="lee";

변수를 할당하는 방법은 다음과 같습니다.


console.log(a);
console.log(my_name)

변수에 저장된 값을 프로그램을 통해서 확인할 수 있습니다. 구글 chrome을 통해서 콘솔창에 찍히는 값을 확인해 보도록 하겠습니다.

2.2 변수의 자료형


var 변수하나 = 20;
var 변수둘 = 10;

document.write(변수하나 + 변수둘, '<br>');
document.write(변수하나 * 변수둘, '<br>');
document.write(변수하나 / 변수둘, '<br>');
document.write(변수둘**2, '<br>');  // a**2 = a*a

우리가 인터넷으로 물건을 주문하면 주문한 물건의 크기에 걸맞는 택배상자에 담아서 오게 됩니다.

이와 같이 변수도 그 크기에 맞는 형식을 가지고 있습니다. 아래 간단하게 몇가지만 요약해 보았어요. 모든 자료형이 다 정리되어 있는 것은 아닙니다.

변수의 자료형은 다양한 데이터를 용도에 맞게 쓰기 위해서 입니다. 보통 언어에서는 변수의 자료형과 함께 변수를 선언하지만 자바스크립트는 자료형을 함께 쓸 필요는 없습니다.


//ES6
const 이름 = '이호준';
const 소속 = '바울랩 대표입니다.';

let 주소 = '서울';
주소 = '제주';

document.write(이름, '<br>');
document.write(소속, '<br>');
document.write(주소, '<br>');

document.write(소속[0], '<br>');
document.write(소속[1], '<br>');
document.write(소속[2], '<br>');

여기서 문자열 자료형에 대해 좀 더 알아보고 가도록 하겠습니다. 문자열은 작은따옴표('예시')나 큰따옴표("예시")로 둘러싼 것을 말합니다.

문자열은 순서가 있습니다. 순서가 있는 자료형을 시퀀스형 자료형이라고 합니다. 순서는 0부터 시작하며 띄어쓰기도 문자로 취급합니다. 이 순서를 index라고 부르며 위와 같이 index로 호출하는 것을 indexing이라고 합니다.

2.3 자료형에 대해 조금 더 알아봅시다

변수의 자료형에 대하여 좀 더 폭넓게 알아보도록 하겠습니다. 여기서 몇가지 메서드를 사용하는데, 메서드 종류를 다 암기하실 필요는 없습니다. 자연스럽게 많이 사용하시는 것은 암기가 되실거에요!


//숫자형 (number)
var num = 10;

document.write(num, '<br>');  // 10
document.write(num/3, '<br>');  // 3.3333..
document.write(parseInt(num/3), '<br>');  // 3

/* 숫자형의 사칙연산 */
document.write("더하기 : ", 2 + 2.5, '<br>');  // 4.5
document.write("빼기 : ", 5 - 7, '<br>');  // -2
document.write("곱하기 : ", 3 * 2, '<br>');  // 6
document.write("나누기 : ", 2/2, '<br>'); // 1

/*특수 숫자 값*/
document.write("무한대 : ", 1/0,'<br>'); // Infinity
document.write( "숫자가 아님" / 2 ); 
// NaN, 문자열을 숫자로 나누면 오류가 발생합니다.


//문자열 (string)
var day = 7;

document.write("오늘은 " + day + "일 입니다.", '<br>');
document.write('오늘은 ' + day + '일 입니다.', '<br>');
document.write(`오늘은 ${day}일 입니다.<br>`);
// 오늘은 7일 입니다.


//논리형 (boolean)
var logic1 = true;
var logic2 = false;
var logic3 = 30 > 20;
var logic4 = 30 < 20;

document.write(logic1, '<br>');  //true
document.write(logic2, '<br>');  //false
document.write(logic3, '<br>');  // true
document.write(logic4, '<br>');  // false


//null
var a = ''; 
var b = null;

document.write(a, '<br>');  // 
document.write(b, '<br>');  // null

//undefined
var c;
document.write(c, '<br>')  // undefined


//객체 (object)
var person = {
  name: '이호준',
  age: '비밀',
  married: true
}

person.소속 = '바울랩';

document.write(person.name, person['name'], '<br>');
document.write(person.age, person['age'], '<br>');
document.write(person.소속, person['소속'], '<br>');


//배열 (array)
var 배열 = ['사과', '수박', '복숭아', '딸기', '바나나'];

document.write(배열[0], '<br>');
document.write(배열[1], '<br>');
document.write(배열[2], '<br>');
document.write(배열[3], '<br>');
document.write(배열[4], '<br>');


//배열 내장함수
var 배열하나 = ['사과', '수박', '복숭아', '딸기', '바나나'];
var 배열둘 = ['메론', '체리', '한라봉'];

document.write(배열하나, '<br>');
배열하나.pop();
document.write(배열하나, '<br>');
배열하나.push('감귤');
document.write(배열하나, '<br>');

document.write(배열하나.toString(), '<br>');
document.write(배열하나.join('*'), '<br>');
document.write(배열하나.shift(), '<br>');
document.write(배열하나.slice(0, 2), '<br>');
document.write(배열하나.concat(배열둘), '<br>');
document.write(배열하나.reverse(), '<br>');
document.write(배열하나.sort(), '<br>');