이번에 다룰 내용은 '자바스크립트 변수 값 저장 및 사용'에 대해서 다루어보고자 합니다. 저번 포스팅에서는 변수의 개념과 종류에 대해서 알아보았으며, 이번 포스팅에서는 변수의 저장과 변경, 그리고 변수를 사용하는 방법에 대해서 알아보도록 하겠습니다.
1. 변수 값의 저장
변수에 저장하는 값은 '데이터'를 저장할 수 있지만, '변수' 또한 저장이 가능합니다. 그렇다면, 어떻게 사용하는지 어떻게 읽어야 하는지 먼저 알아보도록 하겠습니다.
var a = 1;
var b = a;
다음과 같이 a와 b 2개의 변수가 있습니다. 다음의 경우에는 '데이터'와 '변수'를 저장하고 있습니다. a에는 '1'이라는 데이터가 대입되었지만, b의 경우에는 'a'가 대입되었습니다. a에는 '1'이 대입되었고, b에는 'a'가 대입된 것 같지만, 결론적으로 '변수 a의 값'이 복사되어 a의 값인 '1'이 b에 저장됩니다.
2. 변수 값의 변경
이미 저장되어 있는 변수에 대해서 변경은 생각보다 간단합니다. 'var'는 데이터 형으로 선언 및 형 강제 변환에 사용되는데 값을 변경하기 위해서는 데이터 형을 표기하지 않아도 변경이 가능합니다.
var a = 1;
a = 2;
a = 3;
a를 먼저 선언하면서 '1'로 초기화 한 다음에, '2'로 초기화 하고 '3'으로 초기화 하면, 결국 a의 최종 값은 '3'이 저장되게 됩니다.
3. 변수 값의 사용
변수 값을 사용하는 것은 중요합니다. 다음의 예시를 확인하여 변수를 사용하는 것과 사용하지 않는것의 차이를 확인해보도록 하겠습니다.
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
document.write("테스트중입니다.");
document.write("테스트중입니다.");
document.write("테스트중입니다.");
</script>
</head>
</html>
다음과 같이 실행을 위한 코드를 사용하였습니다. 집적 입력하시거나 파일을 다운로드 후 실행하도록 하겠습니다. 위의 경우에는 "테스트중입니다."라는 출력 문장을 3번 작성하여 3번 출력하였습니다. "document.write"에 대해서는 나중에 다루도록 하겠습니다.
"테스트중입니다.테스트중입니다.테스트중입니다." 3번의 결과를 출력하였습니다.
그렇다면 아래의 경우에는 어떤 차이를 보일까요?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var tx = "테스트중입니다.";
document.write(tx);
document.write(tx);
document.write(tx);
</script>
</head>
</html>
다음의 경우는 어떨까요? 우선 출력하는 "document.write(tx)"; 문장에서 "가 사라졌습니다. 텍스트를 출력할 경우에는 ""로 감싸줘야 하며, 변수를 출력할 경우에는 ""를 생략합니니다. 지금의 경우에는 변수를 선언함으로써 1줄 더 늘어났으며 변수를 출력합니다.
결과는 같습니다. 직접 출력하는 문장과 같이 결과는 같으며 변수를 사용하여도 무방합니다.
그렇다면, 전자의 방법을 사용할까요? 후자의 방법을 사용할까요?
어느 방법을 사용하셔도 무방하지만 되도록이면 후자의 방법을 사용하도록 합시다.
만약 코드가 천줄이 넘고 "테스트중입니다."를 바꿨다가 다른 값으로 변경될 수 있다고 가정합니다.
그렇다면 일일이 찾아서 바꾸어야 하며, 언제 바뀔지도 모르고 바꿔야 할 지 모르는 상태에 빠집니다.
변수를 설정한다면 변수 값만 바꾸면 한번에 바뀌게 됩니다.
4. 변수 값 확인
앞에서 다루었듯이 변수 값을 확인하는 방법에 대해서 배워보도록 하겠습니다. 변수 값을 확인하는 방법에는 앞에서 알아본 화면에 출력하는 "document.write"가 있으며, 알림창으로 표시해주는 "alert"가 있습니다.
document.write
앞에서 다루었던 "document.write"입니다. 아래의 파일을 다운로드 하거나 코드를 입력합니다.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var tx = "테스트중입니다.";
document.write(tx);
</script>
</head>
</html>
문서에 작성하듯, 내용을 화면에 출력합니다. 브라우저 화면에 출력할 수 있는 기능으로 주로 문법 테스트와 초보자용으로 많이 사용하곤 합니다.
출력되는 문장은 다음과 같습니다.
alert
새로운 것이 등장하였습니다. 특정 정보를 메시지 창으로 알려주기 위하여 사용합니다. 보통 로그인시 "환영합니다"라는 창이나 "패스워드를 잘못입력하였습니다."와 같은 용도로 사용하여 값을 확인하기 위하여 사용합니다.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var tx = "테스트중입니다.";
alert(tx);
</script>
</head>
</html>
전자의 방법에 비해 조금 더 간결해졌습니다.
"테스트중입니다."라는 알림창으로 변수의 내용을 확인가능하며, 홈페이지 작성 시 잘못된 부분 및 변수를 찾기 위해서 유용하게 사용할 수 있습니다.
console.log()
개발 시 문법적으로 전혀 문제가 없지만 어떤 경우에는 정상적이지만, 어떤 경우에는 동작이 제대로 안될 경우가 있습니다. 이 경우에는 논리적인 오류라고 부르며, 찾는 작업을 디버깅이라 합니다.
구글 크롬, 및 사파리에서 사용이 가능하며, 익스플로러에서도 지원이 가능합니다. "F12"를 눌러서 "콘솔"로 이동하거나 "디버거"로 이동하여 출력값을 확인 가능합니다.
'Information > JavaScript' 카테고리의 다른 글
| 자바스크립트 배열 변수의 정의와 사용 초급편 (0) | 2018.05.27 |
|---|---|
| 자바스크립트 주석의 정의와 사용 방법 (0) | 2018.05.23 |
| 자바 스크팁트 변수의 개념부터 종류까지 (0) | 2018.05.19 |
| 서버 구동 프로그램 XAMPP Apache MariaDB PHP 다운로드 및 설치 (0) | 2018.05.10 |
| 자바스크립트 개발에 앞서서 개발툴 선택하기 (0) | 2018.05.03 |