• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Basic] JS - Variable (JS변수) ★★★★★

목차
  1. JS 변수 정의
  2. JS 변수 종류 ★
  3. JS 변수명은 자료 성격에 맞게 짓기
  4. JS 변수명 작성 규칙 (식별자) ★
  5. JS 할당연산자
  6. JS 자료형 (= 데이터타입) ★
  7. JS 변수 선언 방법 ( var / let / const ) ★★★
  8. 한번에 여러 변수 동시 선언 가능
  9. = 기호  vs.  += 기호
  10. 데이터가 안 담긴 변수 실행 시, undefined 찍힘
  11. 기존 변수와 동일 변수 선언 시, 기존값 유지
  12. 산수 수식도 JS 변수에 할당 가능
  13. 문자열도 JS 변수에 할당 가능
  14. 문자와 숫자가 함께 JS 변수에 담기면 모두 문자로 인식
  15. PHP값을 JS변수에 담기 ★
  16. JS 변수 관련 주소 모음

 

JS 변수 정의 

 

변수는 데이터 값을 담아두는 역할함. (즉, 데이터 값을 변수에 할당)
엄밀히 말하자면, 데이터를 담아두는 저장소 가리키는 지시자 역할함.
따라서, 변수엔 다양한 Date type (데이터 타입/종류)이 올 수 있음.

 


[예제]

 

<p id="homzzang"></p>


<script>

var x = 3;  // 변수 x 선언 후 3 할당. (자동으로 숫자형 됨.)

var y = 4;  // 변수 y 선언 후 4 할당. (자동으로 숫자형 됨.)

document.getElementById("homzzang").innerHTML = x + y; // 7

</script>

 


PS1.

  • JS는 동적언어라 변수 타입 지정 불필요. 
  • 저장 데이터에 따라 변수 타입 자동 결정.

PS2. 

선언된 변수 사용법 3가지.

 

var hz = "홈짱닷컴 Homzzang.com";


document.write(hz); // 홈짱닷컴 Homzzang.com

document.write("<br>");


document.write(this['hz']); // 홈짱닷컴 Homzzang.com

document.write("<br>");


document.write(window['hz']); // 홈짱닷컴 Homzzang.com

 

비타주리 님 (210806) https://sir.kr/qa/425217 

 

JS 변수 종류 ★ 

 

[지역변수 vs 전역변수]


  • 변수 효력 범위 기준.
  • https://homzzang.com/b/js-16
  • 변수 선언 방식에 따라 변수 유효 범위가 결정됨. 아래 6번 참고. 

 

 


[매개변수 vs 독립변수]

 



[고정변수 vs 동적변수(=가변변수=유동변수)]

 


 

JS 변수명은 자료 성격에 맞게 짓기

 

변수는 간단히 x,y처럼 한 글자로 표기 가능하나,

아래처럼 데이터 값 성격에 맞는 단어 사용 권장.

 



<p id="homzzang"></p>

<script>
var num1 = 3; 
var num2 = 4;  
var sum = num1 + num2; 
document.getElementById("homzzang").innerHTML = "총합: " + sum;
</script>

결과 보기

 

JS 변수명 작성 규칙 (식별자) ★

 

1. 
JS 변수는 고유한 이름을 가져야 함. 

이런 고유한 이름을 식별자 (identifiers)라고 함.



2. 
식별자는 앞서 설명한 것처럼, x나 y 한 글자로 표기할 수도 있고, 
num1 num2 sum 처럼 단어로 표기할 수 있음.


[식별자 만드는 법] 

 
① 
문자, 숫자, _(밑줄), $(달러 기호) 등을 이용 가능

② 
첫 글자에 숫자가 오면 안 됨. 
즉, 문자, _(밑줄), $(달러 기호) 중 하나로 시작해야 함.

③ 
식별자는 대소문자 구분함.
즉, homzzang과 Homzzang은 다른 변수로 인식함.

④ 
JS 키워드(예: var) 같은 JS 내장 예약어는 변수로 사용 불가.  
※ 참고: 키워드는 대소문자 구분 X

⑤ 
공백은 허용 X

 

 

JS 할당연산자

 

JS에서 = (등호)는 같다는 뜻이 아니라, 데이터 값을 저장하는 의미임, (즉. 데이터 값을 할당) ※ 할당연산자 중 하나임 

(예)  
x = 3 ; //  변수 x가 임시로 3 담아두는 역할.

 

 


cf.

JS에서 같다는 의미는 ==로 표시. 즉, 등호 2개 사용. 

(예) x == 3 ; // 변수 x는 3과 같다.

 

 

JS 자료형 (= 데이터타입) ★

 

1. 
JS 변수는 숫자나 문자를 담을 수 있음. 문자는 공백을 둔 문자열도 올 수 있음. 
(예) x = "homzzang com"

2. 
숫자는 따옴표 안 붙임.
문자는 따옴표 붙임. 즉, 큰따옴표나 작은따옴표로 묶어줘야 함. 
예를 들어, 처음과 끝이 같은 종류여야 함. 큰따옴표로 시작하면 큰따옴표로 닫아줘야 함.

3. 
숫자에 따옴표를 붙이게 되면, JS는 그것을 숫자가 아닌 문자로 인식하게 됨.

 


[예제1] - 숫자로 인식 (∵ 따옴표 존재 X)

 

<p id="homzzang"></p>

<script>
var x = 3;
var y = 4;
var sum = x + y; // 7
document.getElementById("homzzang").innerHTML = sum; // 7 
</script>

 

결과보기


[예제2] - 문자로 인식 (∵ 따옴표 존재 O)

 

<p id="homzzang"></p>

<script>
var x = 3;
var y = 4;
var sum = "x + y"; // x + y
document.getElementById("homzzang").innerHTML = sum; // x + y
</script>

 

결과보기

 

JS 변수 선언 방법 ( var / let / const ) ★★★

1. 

JS에선 「변수를 생성」하는 걸, 「변수를 선언한다」고 표현함. 

 


2. 

변수 선언은 var, let, const 키워드 사용하며, 대소문자 구분 X.

 

[var]

  1. 함수 밖 선언 시, 함수 안팎에서 유효.
  2. 함수 안 선언 시, 함수 안에서만 유효. (즉, 함수 단위. {} 블럭 무시.)
  3. 호이스팅 가능.
  4. 최근엔 코드 엄격성 강화 추세라, 주로 (변수는 let, 상수는const) 사용.

 

[let]

  1. 변수 선언.
  2. 선언 후 재할당 가능.
  3. 해당 변수가 선언된 {} 블럭 안에서만 유효.
  4. 호이스팅 불가.
  5. JS 최신 버전에서 주로 이용. (단, IE11 이상 부분 지원)

 

 

[const]

  1. 상수 선언. (반드시, 선언과 동시에 값 할당 필요)
  2. 전역. 선언 후 변경 불가 (= 재할당 불가). 
  3. 호이스팅 불가. 
  4. JS 최신 버전에서 주로 이용. (단, IE11 이상 부분 지원)

 


3.

  • 변수 선언 후 나중에 데이터 값 할당 가능. 
  • 변수 선언과 동시에 데이터 값 할당 가능.


① 

변수 먼저 선언 후, 데이터값 할당
VAR x ;  // 변수 x를 먼저 선언
x = 7 ;  // 선언된 변수 x에 7을 할당


② 

변수 선언과 동시에 데이터값 할당
VAR x = 7 ; // 변수 x를 선언하고, x에 7을 할당

 


4.  

JS엔 출력 함수가 별도로 없기 대문에 HTML 문서의 아이디(예: homzzang) 이용해 그곳에 출력시킴.

 

<p id="homzzang"></p>

<script>
var siteName = "홈짱닷컴 (homzzang.com)"; 
document.getElementById("homzzang").innerHTML = siteName; 
</script>

 


5. 

변수는 되도록이면 JS 코드 처음 부분에 모두 선언하도록 함.

 


6.
JS변수 vs. jQuery변수 차이점
https://homzzang.com/b/jquery-285

 

 

한번에 여러 변수 동시 선언 가능

① 맨 처음에 var로 선언해주고, 변수들 사이사이엔 ,(콤마)로 구분해 옆으로 계속 나열함.

 
<span id="SITE"></span> (<span id="URL"></span>)
<p id="MONEY"></p>

<script>
var site = "홈짱닷컴", url = "homzzang.com", money = 0; // var 하나로 여러 변수 선언
document.getElementById("SITE").innerHTML = site;
document.getElementById("URL").innerHTML = url;
document.getElementById("MONEY").innerHTML = "수강료: " + money + "원";  
</script>

 


② 아래처럼 ,(콤마)를 기준으로 변수들을 줄바꿈을 해서 표현 가능.

 

<span id="SITE"></span> (<span id="URL"></span>)
<p id="MONEY"></p>

<script>
var site = "홈짱닷컴", 
url = "homzzang.com", 
money = 0;
 // var 하나로 여러 변수 선언.  ,(콤마)로 구분해 줄바꿈.
document.getElementById("SITE").innerHTML = site;
document.getElementById("URL").innerHTML = url;
document.getElementById("MONEY").innerHTML = "수강료: " + money + "원"; 
</script>

 

결과보기

 

= 기호  vs.  += 기호

1. = 기호를 사용해 아래처럼 한 요소에 모든 변수를 출력시킬 경우, 맨 마지막 것만 출력됨.

 
<span id="SITE"></span>

<script>
var site = "홈짱닷컴", url = "homzzang.com", money = 0; 
document.getElementById("SITE").innerHTML = site; // 출력 X
document.getElementById("SITE").innerHTML = url; // 출력 X
document.getElementById("SITE").innerHTML = "수강료: " + money + "원";  // 출력 O
</script>

 

결과보기


2. += 기호 사용하면, 한 요소에 모든 변수를 출력 가능.

 

<span id="SITE"></span>


<script>

var site = "홈짱닷컴", url = " homzzang.com ", money = 0; 

document.getElementById("SITE").innerHTML = site; // 출력 O

document.getElementById("SITE").innerHTML += url; // 출력 O

document.getElementById("SITE").innerHTML += "수강료: " + money + "원";  // 출력 O

</script>

 

결과보기

 

데이터가 안 담긴 변수 실행 시, undefined 찍힘

 

변수는 데이터 저장소 지칭 역할만 하므로, 

데이터 값이 할당 안 된 채 JS 실행 시 undefined 찍힘.

즉, 변수는 정의되었으나 값이 아직 할당 안 된 상태 의미.

 


[예제]

 

<p id="homzzang"></p>

<script>
var site; 
document.getElementById("homzzang").innerHTML = site;  // 결과값: undefined
</script>


결과보기

 

기존 변수와 동일 변수 선언 시, 기존값 유지

 

데이터 담긴 변수를 다시 선언해도, 이미 할당된 데이터는 유지됨.



[예제]

 

<p id="homzzang"></p>

<script>
var siteName = "홈짱닷컴"; 
var siteName; // 기존 데이터 유지됨.
document.getElementById("homzzang").innerHTML = siteName; // 홈짱닷컴
</script>

 

결과보기

 

산수 수식도 JS 변수에 할당 가능

 

JS 변수엔 산수 수식도 데이터 값으로 할당 가능. 

단, 이 경우 따옴표가 들어가면 안 됨. 

 


[예제]

 

<p id="homzzang"></p>

<script>
var x = 3 + 4 + 5; 
document.getElementById("homzzang").innerHTML = x; // 12
</script>

 

결과보기

 

문자열도 JS 변수에 할당 가능

 

JS 변수엔 문자열도 데이터 값으로 할당 가능. 

띄어쓰기에 필요한 공백 역시 따옴표로 묶어줌.

 


[예제]

 

<p id="homzzang"></p>

<script>
var x = "홈짱닷컴" + " " + "homzzang.com" ;
document.getElementById("homzzang").innerHTML = x;
</script>

 

결과보기

 

문자와 숫자가 함께 JS 변수에 담기면 모두 문자로 인식

 

JS 변수에 문자와 숫자가 동시 할당 시,  JS는 숫자 역시 문자로 인식.

그 결과, 연산이 안 이루어지고, 단순히 붙여쓰기 됨.

 


[예제1] 

  • 문자 뒤 숫자는 문자로 간주. (∴ 34)
  • 문자로 간주된 숫자 뒤 숫자는 문자로 간주. (∴ 345)

 

<p id="homzzang"></p>


<script>

var x = "3" + 4 + 5;

document.getElementById("homzzang").innerHTML = x; // 345

</script>

 

결과보기 (결과값: 345)


[예제2]

  • 숫자 뒤 숫자는 숫자로 간주. ∴ 먼저 덧셈 연산. (∴ 7)
  • 숫자 뒤 문자는 그냥 연결. (∴ 75)

 

<p id="homzzang"></p>


<script>

var x = 3 + 4 + "5";

document.getElementById("homzzang").innerHTML = x; // 75

</script>

 

결과보기

 

PHP값을 JS변수에 담기 ★

[방법1] - 직접 넣기

 

<script>

var mb_id = "<?php echo $mb_id;?>";

</script>

 


[방법2] - jQuery val() 메서드 이용

 

<form>

    <input type="hidden" name="mb_id" id="mb_id" value="<?php echo $mb_id?>">

</form>


<script>

var mb_id = $("#mb_id").val();

</script>

 

 

JS 변수 관련 주소 모음

 

엘리 님 (var, let, const 차이) 강의

https://youtu.be/OCCpGh4ujb8

 

엘리 님 JS 1. 변수 | primitive 타입과 object의 차이점 

https://youtu.be/__Zz17_5FRU

 

mdn 변수 선언 강의

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations

 

mdn var 강의

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var (영어)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/var (한국어)

 

mdn let 강의

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let (영어)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let (한국어)

 

mdn const 강의

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const (영어)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const (한국어)

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012