본문 바로가기
Web/JS

Java Script 변수

by 팡지혜 2024. 8. 30.

"use strict"; 는 엄격한 ES6분법을 사용하겠다는 의미이다.

[변수]
변수는 변하는 값을 저장할 수 있는 메모리 공간. 데이터를 담을 수 있는 그릇이라고 할 수 있다.
변수에는 데이터가 오직 한 개만 저장된다. 

만약 새로운 데이터가 들어오면 기존에 있던 데이터는 사라지고 마지막에 들어온 데이터만 남는다.
변수에 담을 수 있는 데이터의 종류로는 문자형(String), 숫자형(Number), 논리형(Boolean),그리고 빈(Null)데이터와 Undefined(값이 할당되지 않음) 데이터가 있다.

[변수 선언]
변수를 사용할 준비를 하는 과정을 변수 선언이라고 한다.
변수를 선언할 때에는 var 키워드를 변수명 앞에 붙여준다.
변수명에는 한글을 사용할 수 없으며, 영문과 숫자 그리고 일부 특수문자( _ , $ )만 포함할 수 있다.
변수명은 의미에 맞게 만드는 것이 좋다. 예를 들어 사용자의 이름을 넣을 변수라면
var userName = "김땡땡"; 이런 식으로 짓는 것이 좋다. 만약 변수명이 단어와 단어의 조합으로 되어있다면
두 번째 단어의 첫 글자는 대문자로 써준다. 이런 코딩 컨벤션을 낙타의 등모양과 닮았다고 하여
'카멜 표기법'이라고 함. 또는 user_name 이런식으로 지어도 된다.  

[기본형]
1. var 변수명 '값'; => 변수에 초기값을 넣어 초기화한 상태
2. var 변수명; => 변수를 만든 상태


      
document.write('데이터')


브라우저에 ('')안에 있는 문자를 표시할 때 사용하는 문법.
document는 html문서이다.

console.log('데이터')

브라우저 개발자 도구에 '콘솔창'이라는 것이 있다. 이 콘솔창에서는 자바스크립트 코드의 진행같은 것을 간단하게 출력해 볼 수 있다. 콘솔창에 데이터 결과를 확인하고 싶을 때 console.log()를 사용한다.

 

 

[변수에 저장할 수 있는 자료형]
자료형(Data type)이란 '데이터의 형태'를 뜻한다.
변수에 담을 수 있는 자료형의 종류로는 문자형(String), 숫자형(Number), 논리형(Boolean), 빈데이터(Null, Undefined)가 있다.

1. 문자형 데이터 (String)

문자형 데이터는 문자나 숫자를 ""큰 따옴표나 ''작은 따옴표로 감싸고 있으면 문자형 데이터이다.
문자형 데이터에 HTML태그를 포함하여 출력하면 태그로 인식한다.
문자형 데이터에 숫자가 들어있으면 이것을 '문자형 숫자'라고 부르며, 연산할 수 없다.

 

[기본형]
var 변수명 = "문자 또는 숫자";



2. 숫자형 데이터 (Number)
  
숫자형 데이터는 단어 의미 그대로 숫자를 뜻한다. 만약 '100'과 같이 큰 따옴표가 숫자를 감싸고 있다면 숫자가 아닌 문자형 데이터이다.
문자형 숫자를 숫자로 변환하고 싶다면 Number('문자형 숫자')를 이용하면 문자를 숫자로 바꿀 수 있다.
또 parsInt('문자형 숫자')도 문자->숫자로 바꿔준다.

[기본형]
var 변수명 = 숫자;
var 변수명 = Number('문자형 숫자');


3. 논리형 데이터 (Boolean)

논리형 데이터에는 true(참) 또는 false(거짓)가 있다.
이 데이터는 주로 두개의 데이터를 비교할 때 사용한다. 그래서 결과값은 무조건 true 아니면 false값이 나온다.
Boolean()메서드에 데이터를 입력하면 논리형 데이터인 true 또는 false를 반환한다. Boolean()메서드에서는 
0, null, undefined, ""(빈 문자)를 제외하고 모든 값이
true로 반환한다.

[기본형]
var 변수명 = true or false;       
var 변수명 = 숫자 > 숫자;
var 변수명 = Boolean('문자 또는 숫자');   

 


4. 빈데이터(null & undefined)

undefined는 변수에 값을 할당하기 이전에 들어있는 기본값.
null은 변수에 저장된 값이 null이라는 뜻이며, 기존의 값을
비우기 위해 사용함.


[기본형]
var 변수명;    => undefined가 할당된 상태.
var 변수명 = null;    => 기존 데이터 비움.


typeof
지정한 데이터 또는 변수에 지정한 데이터의 자료형을 알고 싶을 때 사용한다.
       
[기본형]
typeof 변수명 또는 자료형;


※변수 이름 지을 때 주의사항
1. 변수명의 첫 글자로는 $, _ , 영문자만 올 수 있다.
2. 변수명의 첫 글자 다음으로는 영문자, 숫자, $, _ 만 올 수 있다.
3. 변수명으로는 예약어(Document, String, Number...)를 사용할 수 없다. 예약어란 이미 자바스크립트에서 사용중인 키워드를 말한다.
4. 변수명을 지을 때에는 되도록이면 의미를 부여해서 짓는 것이 좋다.
5. 변수명을 사용할 때에는 대/소문자를 구분해야 한다.

 <script>
       //String
      var str1 = "hello world";
      document.write(str1, "<br/>");

      var num = "1000";
      document.write(num, "<br/>");

      var tag = "<h2>제목입니다.<h2>";
      document.write(tag, "<br/>");

      //Number
      var num1 = 100;
      console.log(num1);
      var num2 = Number("100");
      console.log(num2);

      //Boolean
      var bool = true;
      console.log(bool);
      bool = false;
      console.log(bool);

      var bool2 = 10 > 100;
      console.log(bool2);

      var bool3 = Boolean("");
      console.log(bool3);

      //typeof
      var num3 = 100;
      var num4 = "100";
      console.log(typeof num3);
      console.log(typeof num4);
 </script>

 

'Web > JS' 카테고리의 다른 글

if문, else문  (0) 2024.09.02
연산자 활용 테스트  (0) 2024.09.02
연산자 활용 ( 평균 체중 구하기)  (0) 2024.09.02
연산자  (0) 2024.09.02
JavaScript 기초  (1) 2024.07.24