📖
Javascript
  • 자바스크립트 시작하기
  • 자바스크립트 기초 문법
  • 변수
  • 배열
  • 객체
  • 연산자
  • 조건문
    • if 문
    • if ~ else 문
    • 다중 if문
    • 중첩 if문
    • switch 문
    • 삼항 연산자
  • 반복문
    • while 문
    • do while 문
    • for 문
    • 중첩 for 문
    • break 문
    • continue 문
  • 함수
    • 선언적 함수
    • 익명 함수
    • 매개변수가 있는 함수
    • Arguments 함수
    • 리턴값이 있는 함수
    • 재귀 함수
    • 콜백 함수
    • 내부 함수(스코프)
    • 객체 생성자 함수
    • 프로토타입 함수
    • 화살표 함수
    • 클래스
    • Promise
    • 함수 정리
    • 템플릿 리터럴
  • 내장객체
    • String 객체
      • split()
      • join()
    • Number 객체
    • Date 객체
    • Array 객체
    • Math 객체
    • 정규표현 객체
  • 브라우저 객체
    • Window 객체
    • Navigator 객체
    • Screen 객체
    • History 객체
    • Location 객체
  • 문서객체
  • 이벤트
Powered by GitBook
On this page
  • 변수 선언
  • 변수명
  • 변수의 종류
  • 문자형
  • 숫자형
  • typeof
  • 형변환

Was this helpful?

변수

변수(Variables)는 변하는 데이터 (값)을 저장할 수 있는 메모리 공간입니다.

변수 선언

var 변수명 = 값;
<script>
    var box = "변수";
    var box2 = "변수는 변하는 데이터 값을 저장할 수 있는 메모리 공간입니다."
    
    document.write(box);
    document.write(box2);
</script>
        
//변수
//변수는 변하는 데이터 값을 저장할 수 있는 메모리 공간입니다.
<script>
    var box = 10; //숫자
    document.write(box);
    
    var text ="변수"; //문자
    document.write(text);
    
    var box2 = "10"; //문자
    document.write(box2);
</script>
<script>
    var x = 100;
    document.write(x);
    x = 200;
    document.write(x);
    
    //변수는 변하는 데이터 값
</script>
// 변수는 순서대로 분석하기 때문에 var x = 100; 다음 바로 x = 200;로 적으면 200만 출력됩니다.

변수명

키워드: 자바스크립트에서 정해진 단어 식별자: 사용자가 임의로 만들어서 사용하는 단어

식별자를 만드는 규칙

  • 사용자가 사용할 수 있는 문자 : 알파벳 (a - z, A - Z), 숫자(0-9), 특수기호('_', '$')

  • 첫 글자에는 숫자를 사용할 수 없습니다.

  • 공백을 사용할 수 없습니다. 밑줄('_')은 사용 가능합니다.

  • 특수기호도 사용할 수 없습니다. 달러('$')는 사용 가능합니다.

  • 키워드를 사용할 수 없습니다.

  • 변수명을 사용할 때에는 대문자, 소문자를 구분해야 합니다.

단어를 조합할 때 규칙

  • 언더스코어 노테이션 : box_text와 같이 중간에 '_'를 사용합니다.

  • 캐멀 노테이션 : boxText와 같이 두번째 단어의 첫 글자를 대문자로 사용합니다.

  • 파스칼 노테이션: BoxText와 같이 모든 단어의 첫 글자를 대문자로 사용합니다.

변수의 종류

지역변수: 특정범위 안에서만 사용하는 변수 전역변수: 모든 범위 안에서 사용하는 변수 매개변수: 함수 외부에서 함수 내부로 전달하기 위한 변수 멤버변수: 클래스 내부에서 만들어지며 주로 객체에서 사용하는 변수

//변수 선언
let x = 1000; //전역변수
let y = 2000; //전역변수
let z = 700;  //전역변수

//함수 선언
function fun1() {
    let x = 1000; //지역변수
    let y = 2000; //지역변수
     z = 7000;    //전역변수 700에서 7000으로 변경
    
    document.write("함수 안 <br>");
    document.write(x, "<br>");
    document.write(y, "<br>");
    document.write(z, "<br>");
}
fun1();

document.write("함수 밖<br>");
document.write(x, "<br>");
document.write(y, "<br>");
document.write(z, "<br>");

//함수 안
//1000
//2000
//7000
//함수 밖
//1000
//2000
//7000

문자형

문자형(String) 데이터는 다음과 같이 문자나 숫자를 큰 따옴표(" ")또는 작은 따옴표(' ')로 감싸고 있습니다.또한 문자형 데이터에 HTML. 태그를 포함하여 출력하면 태그로 인식합니다.

기본형: var 변수 = "사용할 문자나 숫자"

<script>
     var s = "javascript";
     var num = "100";
     var tag="<h1>String</h1>";
     
     document.write(s);
     document.write(num);
     document.write(tag);
</script>

//javascript100
//String

숫자형

숫자형(Number) 데이터는 단어 의미 그대로 숫자를 의미합니다. 만약 "100"과 같이 큰따옴표가 숫자를 감싸고 있다면 숫자가 아닌 문자형 데이터입니다. 이 경우에는 Number("100")를 이용하면 문자형 데이터를 숫자형 데이터로 바꿀 수 있습니다.

기본형: var 변수 = 숫자; 또는 Number("문자형 숫자")

<script>
    var s = 100;
    var t = Number("500"); //문자 500 -> 숫자 500변경
    
    document.write(s);
    document.write(t);
</script>

//100500

typeof

typeof는 지정한 데이터 또는 변수에 저장된 자료형을 알고 싶을 때 사용합니다.

기본형: typeof 변수 또는 데이터;

<script>
    //변수명 box 변수에 값은 숫자 100을 넣어서 출력해보세요!
    
    var box = 100;
    document.write(box);
    document.write("<br />");
    
    document.write(typeof box);
    document.write("<br /><br />");
    
    var box2 = "100";
    document.write(box2);
    document.write("<br />");
    
    document.write(typeof box2);
</script>

//100
//number

//100
//string

형변환

 let a = 100;    
 let b = "100";  

 document.write(typeof a, "<br>"); //number
 document.write(typeof b, "<br>"); //string
 
 //형변환(string -> number);
 let c = Number(b);
 document.write(typeof c, "<br>");
 //number

 //형변환(number -> string);
 let d = a = "" + a ;
 document.write(typeof d, "<br>");
 //string

 //형변환(number -> string);
 let e = String(c);
 document.write(typeof e, "<br>");
 //string (c numer를 string으로 다시 변환)
Previous자바스크립트 기초 문법Next배열

Last updated 4 years ago

Was this helpful?