쌍용강북교육센터 국비 학원 Day 45일차 JavaScript (Variable, 백틱)

 

쌍용 강북 교육센터 국비학원 Day 45일차

 

JavaScript

스크립트 태그는 head태그나 body태그 안에 위치해도 가능하고 CSS와 같이 HTML파일과 분리된 외부경로에 파일 (확장자명.js) 을 불러와서 사용할 수 있다. (head태그에 위치시 window.onload 가 필요하다)

 

JavaScript Output

• innerHTML - HTML 태그속에 결과물을 넣어주는 메소드. HTML 요소에 접근하기 위해 document.getElementById(id)와 같이 사용 (HTML 구문보다 뒤에 <script> 구문이 위치해야 정상 출력 됨)
• innerText - 동작방식은 HTML과 동일한데 HTML은 작성된 코드를 그대로 작동하지만 Text는 Text 그대로 읽어온다. (즉, 태그를 인식하지 못한다)
• document.write() - 기존 HTML 내용을 다 지우고 HTML문서에 새로 출력. (주로 테스트 목적으로 사용)
• window.alert() - 알림 창을 이용하여 데이터를 출력한다. (문자는 따옴표로 묶어야 한다)
• console.log() - 개발자 도구의 콘솔탭에서 결과물을 확인할 수 있다.  (디버깅을 위해 사용)

 

 

var, const, let - Variable (변수 선언 종류)

자바스크립트의 변수 선언은 var로만 가능했으나, 2015년 이후 ES6 (ES2015)부터 let과 const가 추가 되었다.

 

※ ES6 (ECMAScript 6)

-> ES6이란? ECMA라는 정보와 통신 시스템을 위한 국제적 표준화 기구에서 만든 ECMAScript 표준문서의 6번째 개정판 문서에 있는 표준 스펙이다.

 

var, const, let의 차이점 5가지

1. 중복선언 가능 여부

2. 재할당 가능 여부

3. 변수 스코프 유효범위

4. 변수 호이스팅 (Hoisting) 방식

5. 전역객체 프로퍼티 여부

 

 

var

• 중복선언이 가능하다. (단, 초기화 없이 선언만 한 경우 선언문이 무시된다)
• 값의 재할당이 가능하다.
• 함수레벨 스코프이다. (함수 내부에 선언된 변수만 지역변수로 한정하며, 나머지는 모두 전역변수로 간주한다.)
• 변수 호이스팅이 발생한다.
• var로 선언된 변수는 전역객체 (브라우저 환경의 경우 window)의 프로퍼티이다. 

 

const

• 중복선언이 불가능하다. 
• 값의 재할당이 불가능하다.
• 블록레벨 스코프이다. (함수 내부는 물론, if문이나 for문 등의 코드 블럭{ ... } 에서 선언된 변수도 지역변수로 취급한다.)
• 변수 호이스팅이 발생한다. 하지만 다른방식으로 작동한다.
• const 로 선언된 변수는 전역객체 프로퍼티가 아니다. 

 

(값을 객체를 받을 경우 다른 객체로 재할당이 불가능하지만 그 객체의 필드값은 변경이 가능하다)  

 

let

• 중복선언이 불가능하다.
• 값의 재할당이 가능하다.
• 블록레벨 스코프이다. (함수 내부는 물론, if문이나 for문 등의 코드 블럭{ ... } 에서 선언된 변수도 지역변수로 취급한다.)
• 변수 호이스팅이 발생한다. 하지만 다른방식으로 작동한다.
• let 으로 선언된 변수는 전역객체 프로퍼티가 아니다. 

 

※ 호이스팅이란 - 뒤에서 선언된 변수도 앞의 코드에서 참조할 수 있게 된다. 이를 변수 호이스팅이라고 한다.

 

 

 - 결론 - 

1순위: const를 최우선적으로 사용한다.

2순위: let은 변수 값을 재할당할 필요가 있을 때만 사용한다.

3순위: var는 ES6 이후 부터... 특별한 경우를 제외하곤 쓸 필요가 없어 보인다.

 

 

equal

비교연산자에서

' == ' 는 값만 비교하는 것

' === ' 는 데이터타입과 값 모두 비교한다.

 

 

 

백틱 ( ` )

자바스크립트를 사용하면서 문자열 자료형을 자주 쓰게 되는데 문자열을 표현할 때 일반적으로 값을 큰 따옴표 혹은 작은 따옴표를 사용하여 감싸준다.

 

여기에 변수를 문자열에 포함 시키려고 한다면 번거롭게 문자열을 열고 닫은 후 보통 ( + ) 더해주는 형식으로 작성한다.

문자열에 들어갈 텍스트가 많고 사용되는 변수가 많을 경우, 작성하는게 번거롭고 헷갈릴 수 있다. 이럴 때 사용하면 좋은 것이 ( ` ) 백틱이다.

 

키보드의 Tab 위, 1의 왼쪽, ' ~ '(물결표) 에 있는 ' 와 비슷하게 생긴 문자다. 변수나 함수 이름 앞에 달러 기호 '$' 를 붙이고 중괄호 '{ }'로 감싸주면 된다. 이렇게 백틱을 사용하면 문자열과 변수를 적절히 같이 사용할 수 있다.

 

 

변수를 이용하기 위해 중간에 백틱을 이용한 예제

 

 

※ 백틱은 JQuery 에서는 사용할 때 유의해야 한다. JQuery에서 사용하는 ' $ ' 때문에 인식을 하지 못한다.
확장자가 html 인 문서에서는 백틱 사용시 변수는 ${변수명} 으로 사용하면 된다. 그런데 확장자가 jsp 인 문서에서는 백틱 사용시 변수를 ${변수명} 으로 사용하면 request영역에 저장된 값을 불러들이는 ${requestScope.키값} 으로 인식해서 ${변수명}을 request 영역에 저장된 변수를 불러들이는 것으로 사용되어진다.
그래서 확장자가 jsp 인 문서에서는 백틱 사용시 $앞에 반드시 \를 붙여주어야 올바르게 동작한다.

 

 

 

 

---

 

 

 

데이터 타입 (typeof)

 

자바스크립트의 데이터의 기본적인 데이터타입은 자료형이므로 사용할 때 알맞게 형변환을 해야한다.

typeof ( ) 메소드에 값을 대입해 해당 데이터의 데이터 타입을 알 수 있다. 

다음은 1234와 1234.567의 값을 Int, Float, Number 로 형변환을 거친 후 데이터 타입과 10을 더한 값을 알아보는 예제이다. (int는 소수점을 절삭한다)

 

 

 

 

 

 

 

---

출처 - https://curryyou.tistory.com/192