💡 자바스크립트란?
자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다
자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다
클래스가 존재하지 않는 프로토타입 기반의 객체지향 언어이다( Edition 6에서는 Class개념 지원됨)
💡 자바스크립트 선언
<script src="hello.js" type ="text/javascript"></script>src속성은 외부의 자바스크립트 파일을 HTML문서에 포함할 때 사용하며 생략 가능함
또한 자바스크립트는 HTML파일 내부의 <head>와 <body>태그 안에 위치할 수 있다
웹 브라우저가 HTML문서를 순차적으로 해석(parsing)하므로 스크립트 위치에 따라 로드와 실행 시점이 달라진다
- <head> 안 위치: 브라우저의 각종 입출력 발생 이전에 초기화되므로 브라우저가 먼저 점검함
- <body>안 위치: 브라우저가 HTML부터 해석하여 화면에 그리기 때문에 사용자가 빠르다고 느낄 수 있음
💡 자바스크립트 변수(variable)
- 자바스크립트는 동적타입 언어이기에 변수의 타입 지정없이 값이 할당되는 과정에서 자동으로 변수의 타입 결정
- 원시타입: 숫자, 문자열, boolean, null, undefined(5가지) 이외는 모두 객체 타입
- 자바스크립트는 숫자를 정수와 실수로 나누어 구분하지 않음 (모든 숫자를 8byte의 실수 형태로 처리 )
- 자바스크립트는 언더플로우,오버플로우, 0으로 나누는 연산에 대해 예외를 발생시키지 않음
- 숫자와 관련된 특별한 상수가 존재한다
Infinity: 무한대를 나타내는 상수, 어떠한 수를 0으로 나누거나Infinity를 어떠한 수로 사칙연산한 결과
NaN(Not a Number) :계산식의 결과가 숫자가 아님을 나타냄
💡 자바스크립트 변수 호이스팅(variable Hoisting)
- var키워드를 사용한 변수는 중복해서 선언 가능
var n= 123;
console.log(n); // 123
var n= 456
console.log(n) ;// 456
💡 let키워드와 const키워드( + var: 전역 스코프)
출처: https://iancoding.tistory.com/131
let은 데이터 값 변경이 가능한 변수이며, const는 데이터 값의 수정이 불가능한 상수이다.
둘 다 데이터 값에 이름을 지정하여 사용하고 싶고 데이터 값을 반복해서 사용하기 위해서 사용한다.
// 변수 초기화는 변수 let만 가능하며 상수 const는 불가능하다
let value; // (O) 가능
const value; // (X) 불가
// 변수 name에 '이안'을 대입
let name = '이안';
name = '이안92'; // 다른 값 대입이 가능
// 상수 name에 '이안'을 대입
const name = '이안';
name = '이안92'; // 값 변경 불가능 => 코드 에러 발생숫자 타입 변수 간에 계산이 가능하며, 문자열 타입 변수 간 결합이 가능하다.
// 콤마(,)로 구분하면 한꺼번에 변수와 상수 선언 가능
let a = 1, b = 2;
const a = 1, b = 2;
// 숫자 계산, 문자열 결합은 둘다 가능
let number1 = 100;
let number2 = 200;
let sum = number1 + number2;
console.log(sum); // 결과 : 300
// console.log는 브라우저의 개발자 도구 콘솔에 결과를 보여주는 역할을 한다
let name = '이안';
let birth = '92';
let nickname = name + birth;
console.log(nickname); // 결과 : '이안92'
// 변수 let과 마찬가지로 상수 const도 위와 동일하다
const number1 = 100;
const number2 = 200;
const sum = number1 + number2;
console.log(sum); // 결과 : 300
const name = '이안';
const birth = '92';
const nickname = name + birth;
console.log(nickname); // 결과 : '이안92'but, 상수로 선언된 배열과 객체 내부의 값은 변경이 가능하다.
const array = ['피카츄', '라이츄', '파이리'];
array[2] = '꼬부기';
// 결과 array = ['피카츄', '라이츄', '꼬부기'];
const object = { nickname: '이안', age: 20 };
object.age = 30;
// 슬프지만 객체 내부의 age값이 30으로 변경된다값 변경이 필요한 데이터에만 let을 쓰고, 이외에는 const를 주로 이용하는 추세인데
const를 적극 이용함으로써 변경이 필요한 데이터와 그렇지 않은 데이터의 구분이 쉬워져 가독성이 높아지는 메리트를 얻게된다.
'Web > Front' 카테고리의 다른 글
| [JS] localStorage 사용법 (읽기, 쓰기, 삭제, 키목록 등) (0) | 2022.09.19 |
|---|---|
| [JS]자바스크립트로 CSS속성 변경하기 (0) | 2022.09.19 |
| [BootStrap v5.0] 그리드 시스템 (0) | 2022.09.18 |
| [CSS] display속성 (0) | 2022.09.18 |
| [CSS] Position 속성 (0) | 2022.09.17 |
