JS - 변수
변수
JavaScript에서 변수는 데이터를 저장하고 관리하기 위한 기본적인 요소이다.
변수에 저장할 수 있는 종류는 여라가지 자료형으로 구분되며 JavaScript에서는 변수를 선언할 때 'var' 이라는 키워드(예약어)를 사용한다.
var 변수명 = 값;
변수 선언 규칙
1. 변수의 이름은 문자로 시작해야 한다.
변수의 이름은 문자, 밑줄( '_' ), 혹은 달러기호 ( '$' )로 시작해야 하며 숫자로는 시작할 수 없다.
2. 변수의 이름은 대소문자를 구분한다.
'count'와 'Count'는 다른 변수이다.
3. 예약어를 변수로 사용할 수 없다.
JavaScript의 예약어(ex: 'if', 'for', 'function', 'var'....)는 변수로 사용할 수 없다.
ex) [ var if = "예약어금지"; ]는 유효하지 않는다.
4. 변수의 이름에 공백, 특수 문자(ex: '!', '@', '#'...)를 사용할 수 없습니다.
('_', '$')은 예외입니다.
위 선언 규칙으로 예를 들어보겠다.
| 변수명 | 설명 | 사용여부 |
| 10TEN | 숫자로 시작된 변수 | 불가 |
| #orange | 특수문자로 시작된 변수 | 불가 |
| my name | 문자 사이에 공백 사용 | 불가 |
| if | 예약어 사용 | 불가 |
| 변수 | 한글 변수 | 사용 가능 |
| _start_end | 사용 가능한 특수문자 | 사용 가능 |
변수의 형태
| 형태 | 분류 |
| 변수 선언 | var 변수명; |
| 초기화 / 값 할당 | 변수명 = 값; |
| 변수 선언 + 초기화 | var 변수명 = 값; |
| 사용 이유 | 1. 특정 값을 나중에 쓰기 위해 변수에 담아서 사용 2. 코드가 너무 길어 가독성이 떨어질 때 변수에 담아서 사용 |
사용 예시
오늘 사과 한 개의 가격이 500원이라고 생각했을 때 왼쪽이 1개부터 5개 까지 환산된 상태다.
하지만 내일 사과 한 개의 가격이 700원으로 오른다면 왼쪽의 코드를 오른쪽 처럼 모든 숫자를 변경해야 한다.
 |
 |
번거로운 작업을 해결하기 위해 사과의 가격을 변수로 담아보겠다.
<script>
var apple = "500";
console.log(1*apple);
console.log(2*apple);
console.log(3*apple);
console.log(4*apple);
console.log(5*apple);
</script>
이제 내일 사과 한 개의 가격이 700원으로 올라도 변수에 선언해놓은 수치면 변경하면 된다.
변수에 값 할당
한 줄에 여러 개의 변수 선언과 초기 값 할당이 가능하다.
var name = "홍길동", age = 67, job = "student";
var name = "홍길동";
var age = 67;
var job = "student";
자료형
자료형은 프로그래밍에서 변수나 상수가 가질 수 있는 데이터의 유형을 정의하는 개념이다.
JavaScript는 동적 언어이기 때문에 변수에 저장된 데이터에 따라 여러가지 자료형으로 바뀔 수 있다.
즉, 하나의 변수에 여러 자료형의 데이터 값을 저장할 수 있다는 뜻이다.
var A = "Hongildong";
A = 50;
위 예시를 보면 첫번째 줄에서 변수 A의 자료형은 문자열형이다.
그러나 둘째 줄에서 변수 A에 50이라는 값이 저장되면서 변수A는 숫자형으로 바뀌게 되었다.
자료형은 크게 두 가지로 나눌 수 있는데 "원시 자료형" 과 "참조 자료형" 이 있다.
원시 자료형
JavaScript에서 가장 기본적인 데이터 타입을 의미하며, 객체와 달리 변경 불가능한 특성을 가진다.
원시 자료형의 값은 직접 저장되며, 이 값은 복사되어 사용된다.
숫자형(Number)
숫자의 형태로 이루어진 자료형이며, 모든 숫자 데이터를 표현하는 데 사용된다.
'333'과 같은 정수형이나 '333.333' 같은 실수형으로 구분되며 드물게 8진법, 10진법, 16진법 같은 것들도 존재한다.
정수형
정수형은 말 그래도 정수를 뜻하는 자료형이다. 양의 정수, 음의 정수, 0이 해당된다.
실수형
실수형은 소숫점 이하가 존재하는 숫자들이다.
사칙연산
' +, -, *, / '을 이용해 계산을 할 수 있다.
var a = 10;
var b = 4;
document.write(a / b + "<br>");
document.write(a + b + "<br>");
document.write(a - b + "<br>");
document.write(a * b + "<br>");
다음은 숫자형을 사용한 예시이다.
<script>
var num01 = 123; //정수
var num02 = 123.45; //실수
var num03 = 123e2; //지수의 표현 123x100
var num04 = 123e-3; //지수의 표현 123x0.001
var num05 = 0xaf; //16진수 ~> 출력된 결과물은 10진수
var num06 = 0o20; //8진수 ~> 출력된 결과물은 10진수
var num07 = '123'; //문자열
document.write("num01 = " + num01 + ", " + "num02 = " + num02 + "<br>");
document.write("num03 = " + num03 + ", " + "num04 = " + num04 + "<br>");
document.write("num05 = " + num05 + ", " + "num06 = " + num06 + "<br>");
document.write("num07 = " + num07);
</script>
문자열형(String)
JavaScript의 문자열형은 연속된 문자들로 구성되며, 텍스트 데이터를 나타내는 데 사용된다.
이를 사용하면 문자, 단어, 문장 등을 표현하고 조작할 수 있다.
문자열에 변수를 할당할 때는 'abc' 또는 "abc"와 같이 따옴표를 사용해 표현한다.
다음은 문자열형을 사용한 예시이다.
<script>
var str01 = "I am JavaScript....";
var str02 = 'I am JavaScript....';
var str03 = String("i am JavaScript....")
var str04 = new String("I am JavaScript....")
document.write(str01 + ':');
document.write(typeof str01 + "<br>");
document.write(str02 + ':');
document.write(typeof str02 + "<br>");
document.write(str03 + ':');
document.write(typeof str03 + "<br>");
document.write(str04 + ':')
document.write(typeof str04 + "<br>")
</script>
특수문자
| 이스케이프 문자 | 분류 |
| \n | 개행문자. 커서를 다음 줄로 이동 |
| \t | 커스를 탭 키만큼 이동 |
| \b | 커서를 앞으로 한칸 이동 |
| \f | 커서를 다음 페이지로 이동 |
| \r | 커서를 그 줄 처음으로 이동 |
| \\ | \문자 표시 |
| \' | '문자 표시 |
| \" | "문자 표시 |
다음은 이스케이프 문자를 사용한 예시이다.
<script>
var str01 = "first line \n second line \n";
var str02 = 'first statement \t second statement \n';
var str03 = "first statement \b second statement \n";
var str04 = "c\\javascript";
console.log(str01 + '\n' + str02);
console.log(str02);
console.log(str03);
console.log(str04);
</script>
부울형(Boolean)
참(true), 거짓(false) 값을 가지며 두 값중 하나만 기억한다. 일반적으로 부울형은 비교 연산 결과 값을 기억한다. 주로 조건문에서 실행 조건을 실행하기 위해 사용한다.
다음은 부울형의 예시이다.
<script>
var boolean01 = true;
var boolean02 = false;
var boolean03 = 12;
var boolean04 = 0;
var boolean05 = NaN;
var boolean06 = "abc";
var boolean07 = "";
var boolean08 = null;
var boolean09 ;
document.write(boolean01 + "" + boolean02 + "<br>");
document.write(!!boolean03 + "" + !!boolean04 + "<br>");
document.write(!!boolean05 + "" + !!boolean06 + "<br>");
document.write(!!boolean07 + "" + !!boolean08 + "<br>");
document.write(!!boolean09);
//!!는 이중 부정 연산자로, 사용하지 않으면 변수에 들어간 값이 출력되므로
true/false 값을 명확하게 확인하기 위해 사용함.
</script>
1) 숫자 : 0이나 NaN이면 'false' 그 외엔 'true'
2) 문자 : 빈 문자면 'false' 그 외엔 'true'
3) 기타 : null과 undefined는 'false'
null과 undefined형
null
'존재하지 않음' 또는 '값이 없음'을 나타내는 값이다.
변수에 명시적으로 값이 없음을 표현하거나, 나중에 값을 할당할 변수를 초기화할 때 사용된다.
undefined
변수는 선언되었으나 어더한 값도 할당되지 않은 변수, 데이터가 있는지 여부를 모름 (현재는 없음)
***
1+null에서 null은 '0' 값으로 변환된다
1+undefined는 연산 불가능이라 NaN(숫자가 아님)으로 변환된다.
문자열 + null / undefined 는 문자 그대로 반영되어 결합된다.
***
참조 자료형
JavaScript에서 원시 자료형과 다르게 변경 가능한 특성을 가지며, 데이터의 주소를 참조하는 방식으로 동작한다.
데이터가 메모리에 객체 형태로 저장된다.
객체형
다양한 데이터를 키-값 쌍으로 저장하거나 복잡합 데이터 구조를 생성할 수 있는 자료형이다.
각 개체는 고유한 특성 값을 가지며, 고유한 행동을 한다. (변수와 메서드)
아래는 객체형의 설명 예시이다.
<script>
//객체 변수 선언과 초기화 방법1
var myCar01 = {model: "BMW", color: "gray", speed: 150};
document.write(myCar01.model + "<br>");
document.write(myCar01.color + "<br>");
document.write(myCar01.speed + "<br>");
//객체 변수 선언과 초기화 방법2
var myCar02 = new Object();
myCar02['model'] = "benz";
myCar02['color'] = "blue";
myCar02['speed'] = "100";
document.write(myCar02.model + "<br>");
document.write(myCar02.color + "<br>");
document.write(myCar02.speed + "<br>");
</script>
배열
연관된 데이터를 하나로 모아서 관리하기 쉽게 하는 자료형이다.
배열은 대괄화 [] 안에 콤마 (',')로 구분된 값의 리스트로 구성된다. 인덱스는 '0'부터 시작된다.
배열의 필요성
데이터를 담기 위해서는 변수와 변수명이 필요한데 관련된 내용의 데이터들이 100개 이상이라면 변수 선언과 초기화 및 접근에서 너무 힘들다. 이때 배열을 사용하면 관련 문제들이 사라진다.
1. 리터럴로 배열 생성
배열에 들어가는 값들을 배열 선언과 함꼐 할당한다. 대괄호[] 안에 리터럴값을 제공하고 콤마(,)로 구분한다.
<script>
var fruits=["apple", "banana", "orange", "pear"];
document.write(fruits[0] + "<br>");
document.write(fruits[1] + "<br>");
document.write(fruits[3] + "<br>");
document.write(fruits[2] + "<br>");
</script>
2. Array 객체를 이용하여 배열 생성
리터럴 배열과 다르게 Array 객체는 실제 데이터 값이 없는 상태의 배열을 생성하고, 필요에 따라 값을 채워나가는 방식이다.
<script>
var friends = new Array();
//var 배열이름 = 새로운 객체 생성을 하겠다 의미하는 키워드 + 객체가 배열임을 의미
friends[1] = "홍길동";
friends[2] = "조대식";
friends[4] = "장원익";
document.write(friends[0] + "<br>");
document.write(friends[1] + "<br>");
document.write(friends[2] + "<br>");
document.write(friends[3] + "<br>");
document.write(friends[4] + "<br>");
document.write(friends[5] + "<br>");
</script>
3. 리터럴과 Array() 혼합방식
배열을 선언할 때에 2가지 방법을 혼합하여 하나의 문장으로 정의하여 선언할 수 있다.
var fruits = new Array("apple", "banana", "orange", "pear");
배열의 특징
1. 하나의 배열에 여러 종류의 자료형을 가진 데이터를 저장할 수 있다.
2. 배열을 선언할 때 배열의 크기를 정의하지 않는다.
- 배열의 크기보다 큰 값을 할당하면 배열 크기가 자동으로 확대되어 그 값이 할당된다.
3. 인덱스 대신 키(Key)를 이용하여 값을 할당할 수 있다.
- 키를 사용하면 배열의 크기를 명확히 지정할 수 없으나 키 값에 의미를 부여할 수 있어 필요에 따라서는 배열 요소의 접근성이 매우 유용하다.
4. 배열의 크기
- 배열의 크기는 인덱스로 지정하여 값이 할당되어 저장된 곳 까지다.
<script>
var friends = new Array(3);
friends[0] = "홍길동";
friends[1] = "장원익";
friends[2] = "이도현";
document.write("여기까지가 지정된 배열 크기만큼 데이터를 할당한 결과이다." + "<br>");
friends[3] = "조대식";
document.write(friends[3] + "<br>");
document.write(friends.length);
friends['friend'] = "김철수";
document.write(friends.length)
</script>
형 변환
데이터 타입을 강제 변환 시키는 것을 형 변환이라고 한다.
자바스크립트는 저장된 자료에 따라 자료형이 자동으로 변경된다. 그러나 입력 창을 통해 입력된 임의의 숫자는 문자로 인식되기 때문에 단순히 덧셈을 할 경우에는 의도치 않은 결과를 가져올 수 있다.
이 때, 두 수를 덧셈할 경우 강제 변환을 시켜야한다.
Boolean(), String(), Number() 함수를 사용한다.
<script>
document.write(123 + 234 + "<br>");
document.write(123 + "234" + "<br>");
document.write(false + 123 + "<br>");
document.write(123 + String(234) + "<br>");
document.write(123 + Number(234) + "<br>");
document.write(Boolean(1) + "<br>");
document.write(Boolean(0));
</script>
입출력문
데이터 입출력 방식
| 데이터 출력 방식 | 설명 |
| innerHTML속성 | 문서객체에 HTML 문자열을 속성값으로 삽입하는 방식 선택한 요소의 자식에 삽입한다. (덮어쓰기) |
| document.write() | document(문서영역=body)에 HTML로 작성하는 방식 |
| window.alert() | 창의 경고창으로 띄우는 방식 |
| console.log() | 콘솔 브라우저에 표시하는 방식 |
| confirm() | 사용자에게 확인 대화 상자를 표시 (확인/취소 버튼 있음) 확인 : true 반환, 취소 : false 반환 |
| 데이터 입력 방식 | 설명 |
| prompt() | 사용자에게 입력을 요청하는 대화 상자를 표시하는 방식 prompt('질문텍스트', '예시텍스트'); 입력된 데이터는 문자열로 인식함 |
| 요소의 value로 입력하기 | document.querySelector("css선택자")로 요소 선택 후 value 속성에 값 입력 document.querySelector("#demo").velue = "입력 값"; |