💡 학습 목표
|
1. 자료형에 대한 이해
자료형이란 - 컴퓨터가 처리하는 자료에 형태
| 💡 자바스크립트 자료형의 특징 느슨한 자료형 체크(weak datatype check) 자바스크립트는 미리 변수의 자료형을 지정하지 않음 변수를 지정하고 원하는 값을 할당만 하면 됨 |
숫자형
- 정수 - 소수점이 없는 숫자 , 표현 방법에 따라 8진수, 10진수, 16진수
- 실수 - 소수점이 있는 숫자, (! 자바스크립트에서는 정밀한 실수 계산을 못 함)
| 💡 부동소수점 방식으로 숫자를 표현하는 이진법의 한계 때문에 발생하는 문제입니다. 부동소수점 방식은 소수점 위치가 고정되어 있지 않고, 이진법으로 숫자를 표현하기 때문에 무한 소수의 경우 근사값으로 표현되어 오차가 발생할 수 있습니다. 무한 소수(infinite decimal)란, 소수점 이하의 자리수가 무한히 반복되는 소수를 말합니다. 예를 들어, 1/3을 소수로 나타내면 0.3333...과 같이 소수점 이하가 무한히 반복됩니다. 이러한 소수는 유한한 자리수로 정확히 표현할 수 없기 때문에, 근사값으로 표현하거나, 무한 반복되는 자리수를 생략하여 유한한 자리수로 표현해야 합니다. |
2. 연산자에 대해 알아 보자
산술 연산자
비교 연산자
두 값을 비교하여 true나 false로 결괏값을 내놓는 연산자
| ==, != | 두 개의 값이 같은지, 같지 않은지 확인 |
| <, <= | 왼쪽 값이 오른쪽 값보다 작은지 혹은 작거나 같은지 확인 |
| >, >= | 왼쪽 값이 오른쪽 값보다 큰지 혹은 크거나 같은지 확인 |
| ===, !== | 두 개의 값이 자료형까지 완벽하게 같은지, 같지 않은지 확인 |
논리 연산자
true와 false를 피연산자로 연산자, 부울 연산자, 또는 불리언 연산자라고도 함
| OR 연산자 | || | 두 개의 값 중 하나만 ture이면 결과값이 true |
| AND 연산자 | && | 두 개의 값 모두 ture여자 결과값이 ture |
| NOT 연산자 | ! | ture와 false 값을 반대로 |
연산자 우선 순위
형변환
- 숫자형과 문자형을 더하면 숫자를 문자열로 인식함
- 곱하기나 나누기, 나머지 연산에서는 문자형 자료를 모두 숫자로 자동 인식함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>index1.html</h2>
<div>
<p><span>자바스크립트 형변환에 대해서 살펴 보자</span></p>
</div>
<script>
const num = 5;
const str = "10";
const result = num + str;
console.log(result); // 5 + "10" -> 덧셈 연산일 때 = 문자로 인식이 된다. 결과는 "510" 입니다
console.log("--------------------------");
const num1 = 10;
const str1 = '2';
const multiplyResult = num1 * str1; // 곱셈 연산이라 문자열 타입을 숫자형으로 변환하여 곱셈
console.log(multiplyResult);
console.log("--------------------------");
const divideResult = num1 / str1; // 나눗셈 연산이라 문자열 타입을 숫자형으로 변환하여 나눗셈
console.log(divideResult);
console.log("--------------------------");
const moResult = num1 % str1; // 나머지 연산이라 문자열 타입을 숫자형으로 변환하여 나머지 연산 처리
console.log(moResult);
</script>
</body>
</html>
3. var 키워드와 호이스팅에 대한 이해
var 키워드와 호이스팅
자바스크립트에서 호이스팅(Hoisting)이란, 변수와 함수의 선언이 그들의 스코프의 최상단으로 끌어올려지는 (hoisted) 특성을 의미합니다. 다시 말해, 변수와 함수를 선언하면 자바스크립트 엔진은 메모리에 변수와 함수를 저장하기 전에 코드 내에서 선언된 위치와 상관없이 선언을 최상단으로 끌어올립니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>index2.html 파일 입니다</h2>
<script>
// ES 5 에서 var 키워드를 많이 사용했다 (호이스팅 동작을 하는 녀석)
var n1 = 10;
var n2;
var n3 = null;
// var 키워드를 사용하면 호이스팅(Hoisting) 동작이 발생한다.
// 1. 변수 호이스팅
// 2. 함수 호이스팅
// 1 - 변수 호이스팅
var hValue = 10; // 변수에 이름만 해당 스코프의 맨 위로 끌어 올려집니다.
console.log("==========================================")
sayHello(); // 함수 선언문은 해당 스코프의 맨 위로 올라 갑니다.
// 2 - 함수 호이스팅
function sayHello() {
console.log("안녕 스트립트야 ~ ");
}
console.log("------------------------------>>>")
console.log(sayHi);
// sayHi(); // 함수 표현식은 호이스팅 되지 않습니다.
// 3. 주의 !!!
// 함수 표현식은 호이스팅되지 않습니다.
// 자바 스크립트는 함수를 변수에 담을 수 있다.
var sayHi = function() {
console.log("sayHi ~~~~~~~~~~~~ ");
}
console.log("<<<------------------------------>>>")
console.log(sayHi());
</script>
</body>
</html>
4. ES6 와 let, const 키워드
ES6는 "ECMAScript 2015"라고도 불리며, JavaScript 언어의 표준 명세를 업데이트한 버전입니다. ES6는 JavaScript를 더욱 강력하고 표현력 있게 만들어 주는 다양한 기능과 문법을 도입했습니다. 이 중에서도 let 키워드는 ES6에서 중요한 변화 중 하나입니다.
ES6의 주요 특징
let과 const
ES6에서 var 이외에 변수 선언 키워드로 let과 const가 도입되었습니다. let은 블록 스코프를 가지며, const는 상수 값을 선언하는 데 사용됩니다.
화살표 함수 (Arrow Functions)
간결한 함수 선언을 위한 화살표 함수 문법이 추가되었습니다.
클래스 (Classes)
객체 지향 프로그래밍을 지원하기 위한 클래스 문법이 도입되었습니다.
모듈 (Modules)
모듈 시스템이 도입되어 코드를 모듈로 나누고 재사용할 수 있습니다.
디스트럭처링 (Destructuring)
객체나 배열에서 원하는 값만 추출하여 변수에 할당할 수 있는 구조 분해 문법이 추가되었습니다.
템플릿 리터럴 (Template Literals)
문자열 템플릿을 사용하여 변수를 문자열에 쉽게 삽입할 수 있습니다.
Promise
비동기 작업을 처리하기 위한 Promise 객체가 추가되었습니다.
심벌 (Symbols)
고유하고 변경 불가능한 값을 생성하는 심벌(Symbols)이 도입되었습니다.
let 에 주요 특징
블록 스코프 - let으로 선언한 변수는 블록 내에서만 유효합니다.
재선언 불가 - 동일한 스코프 내에서 변수를 중복 선언할 수 없습니다.
호이스팅 - let으로 선언한 변수도 호이스팅(hoisting)이 발생하지만 초기화 전까지는 TDZ(Temporal Dead Zone)에 있어서 접근할 수 없습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>index3.html 파일 </h2>
<script>
function example() {
if(true) {
let x = 10;
console.log(x);
}
console.log('---------------');
console.log(x);
}
example();
</script>
</body>
</html>'JavaScript > JS 개념' 카테고리의 다른 글
| JS - 점검 5(Browser Object Model) (0) | 2024.08.01 |
|---|---|
| JS - 점검 4(Document Object Model) (0) | 2024.08.01 |
| JS - 점검 3(함수에 이해와 활용) (0) | 2024.08.01 |
| JS - 점검 2(객체와배열) (0) | 2024.08.01 |
| JS - 사전 기반 지식 (1) | 2024.07.31 |
