본문 바로가기

자바스프링웹공부(2024)/자바스크립트

2024.07.30. 자바스크립트 변수

반응형

*개요*

- Interpreter : 대화식. 한줄읽고 이해하고  X 반복. ex. javascript, basic. 전체 실행시간이 오래걸린다. 오류전까지는 다 실행을 할 수있다.
- Compiler : 처음부터 끝까지 번역본 옮기고 정상적으로 끝나면 그걸로만 사용한다. 실행속도가 빠르다. 번역하는 시간이 오래걸린다. 오류가 나면 실행되었던 것도 끝내버린다.. ex.JAVA

- <script>태그를 <body>태그 전에 코드 넣는 이유 : 자바스크립트는 요소를 제어하는 경우가 많으므로 되도록이면 이미지나 텍스트 등을 다 표시한 후에 실행하는 것이 좋다.   
- 외부스크립트를 사용하는 이유 : 코드낭비, 눈에 바로 안보이는 한개의 단점빼고 좋음. ex. <script src="파일위치">
- Dialog = Modal = 알림창. 모달창: 창을 끄지않으면 다른 상호작용 못하게 가리는 창. 
- document.write() 에는 html 태그 사용가능 ex. document.write("<h1>자바스크립트 공부</h1>")
*식별자 (Identifier) 작성규칙
- 의미가 있는 단어의 조합사용(권장사항)
- 두번째단어 첫글자 대문자(camel-case)(권장사항)
- 숫자로 시작할 수 없음.
- 공백불가
- 예약어 사용불가( int, double ..)
- 특수문자는 _, $만 사용가능
- 길이제한없음.
- 한글 사용가능하나 사용하지 않음.
- 대소문자구분.
-변수 : 데이터 저장공간. 변할수있는 데이터 저장공간.<->상수 : 항상 같은 상태를 갖는 수 . 한번 저장하면 변경불가.

*특수유형 자료형 
- undefined : 자료형이 지정되지 않았을 때의 상태. 예를 들어 변수 선언만 하고 값을 할당하지 않은 변수.
- null : 값이 유효하지 않을 때의 상태 (null string(" ")과 다름)

 

[ 자바스크립트 변수 ]

- 데이터를 저장하는 공간
- 자바와 달리 데이터타입을 별도로 지정하지 않고 var 또는 let 또는 const 로 선언  (선언 방식은 각각 다른 특징이 부여됨)
- 변수명은 자바 식별자 작성 규칙과 거의 동일한 규칙 적용
- 사용되는 데이터 타입은 문자(= 문자열, string), 숫자(number), 논리(boolean), 특수값 undefined, null 등 사용됨
  => 변수 선언 및 값 할당 시 자동으로 해당 변수의 데이터타입이 결정됨
- 변수 또는 데이터의 데이터타입 확인 방법 : typeof 키워드 사용
  => 기본문법1) typeof 변수명 또는 typeof 데이터
  => 기본문법2) typeof(변수명) 또는 typeof(데이터)

- 자바스크립트에는 큰따옴표와 작은따옴표의 타입차이가 없다,
- 숫자 데이터 저장시 정수, 실수 구분없이 number 타입으로 취급됨.

- var 변수의 호이스팅(=hoisting, 끌어올린다 : 위치에 상관없이 변수를 맨위에 있는 것 처럼 연산함.)

  : 코드를 실행하기 전이지만 마치 선언한 것과 같은 효과가 있는 것.

 

*실습*

const num3; // 상수로 취급되므로 값을 할당하지 않으면 오류가 난다.
			// ex.오류메시지 : 'const' declarations must be initialized.
 
var str; //변수 str 선언.
console.log("str = " + str); // 결과:str = undefined, 선언 후 초기화 하지않아 생긴 오류.

var v2 = null; // 특수값인 null 값도 변수에 저장가능
console.log("v2 = " + v2 +", v2  변수의 데이터 타입." + typeof( v2 )); 
// 결과:v2 = null, v2  변수의 데이터 타입.object (null 값은 object 타입(나중에 기술.)

 

 

  


[ 변수 선언문의 차이점 (var vs let ) ]

1. var 키워드를 사용하여 변수 선언 시 동일한 이름의 변수를 선언하더라도 중복선언이 가능하며,
2. let 키워드를 사용하여 변수 선언 시 동일한 이름의 변수 중복 선언 불가능(자바와 동일한 개념.)

- 기존에 선언된 let 변수와 동일한 이름의 변수를 let 키워드로 다시 선언할 경우 변수명 중복으로 인한 오류 발생.
  => 자바스크립트 파일에서 오류 메세지 : cannot redeclare block-scoped variable let 'num'
  => 개발자 도구에서 오류 메세지 : Identifier 'letNum' has already been declared
       또한 , 이 오류로 인해 위쪽의 정상적인 코드들도 실행되지 못한다.
- 선언한 변수도 기존 변수값을 다른 값으로 변경은 가능한다. 

 

*실습*

let letNum = 10;
// let letNum = "홍길동"; // 중복된 이름 사용불가.
letNum = "홍길동"; // 10 (타입number) -> 홍길동(타입 string)으로 변경됨.
//같은 이름 넣었을 때 뜨는 오류 : Cannot redeclare block-scoped variable 'letNum'.


" 결론!! 변수선언시 var 보다 let을 사용하자!!!!!!! "



3. const 키워드를 사용한 변수는 [상수]로 취급되어 처음 저장된 값 변경이 불가능함.
 -회사이름같은 안바뀌는 것들 상수로 쓰면 됨. 
 - const = constant 의 약자로 상수를 의미.
 - 한번저장된 값을 불변으로, 다른 값으로 변경 자체가 불가능 => 변경시 오류 발생
 - const 키워드로 선언하는 변수는 반드시 초기화도 함꼐 수행되어야함(값변경이 안되니까 만들고 시작해야 함.)

 - const는 let과 마찬가지로 중복선언불가.
 - constNum 변수값 변경도 불가함. (let은 값은 바꿀수는 있었다.) // 크롬오류메시지 : Assignment to constant variable.

 

*실습*

const constNum; //(X)
//이렇게 쓰면 오류발생함. (오류메시지 : 'const' declarations must be initialized.)
const constNum=10; //(O)
//선언과 동시에 초기화 해줘야 함.


 var 가장 유연하지만 가장 오류 발생률 높음.
 변수에 값을 할당 후 값에따라 자료형이 결정되는 방식을 느슨한 자료형 체크라고 함.


반응형