wa_ter_ve
Javascript 1-2 변수와 데이터 타입 본문
▷ 자바스크립트 코드 작성 가능 위치
● .html 파일 속 <scipt></sctipt> 태그 내
<html>
<head>
<script>
// 자바스크립트 코드
</script>
</head>
<body>
</body>
</html>
● .js 파일 생성 후 연결
<html>
<head>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
● 이벤트 리스너 속성 내
<button onclick="alert('Button clicked!')">Click me</button>
● 자바스크립트 모듈 방식
<html>
<head>
<script type="module">
import { hello } from './module.js';
hello();
</script>
</head>
<body>
</body>
</html>
📌 변수
변수는 var , let , const 키워드를 사용하여 선언하고 할당 연산자를 통해 값을 할당함.
그 후, 식별자인 변수명을 사용해 변수에 저장된 값을 참조함.
Scope(스코프): 변수의 유효 범위.
● 전역 스코프 - 코드 어디서든 참조 가능.
● 지역 스코프 - 함수 자신과 하위 함수에서만 참조 가능.
● 블록 스코프(Block Scope) - let과 const로 선언된 변수. { 코드 블록 } 안에서만 유효함.
● 함수 스코프(Function Scope) - var로 선언된 변수. 해당 함수 내에서만 유효함.
● 렉시컬 스코프(Lexical Scope) - 변수 선언 위치에 따라 유효 범위가 결정됨.
내부->외부(가능), 외부->내부(불가능)
* 모든 변수는 스코프를 가짐.
1. 전역 변수 :
함수 밖 또는 코드 최상단에서 선언된 변수
→ 프로그램 실행 시작부터 종료까지 메모리에 유지됨.
- 어디서든 접근 가능
- 코드 가독성을 저하시키고 유지 보수가 복잡해질 수 있음.
- 자바스크립트 코드는 변수를 덮어쓰기가 가능하기 때문에 변수 충돌이 발생할 가능성 있음.
let global = "전역 변수"; function ex() { console.log(global); }
2. 지역 변수 :
특정 함수 내 선언되어 유효한 변수
- 선언된 함수 내에서만 사용 가능. 바깥에서는 내부에 접근 불가능.
- 변수 충돌 방지 가능, 메모리 효율성 높일 수 있음.
function ex() { let local = "지역 변수"; console.log(local); }
- this를 통해 전역변수 접근 가능.
- let으로 선언된 전역 변수는 this 불가능.
✅ var / let / const 차이점
var : 변수 재선언, 재할당 ✖️
let : 변수 재선언✖️, 재할당⭕
const : 변수 재선언, 재할당 ⭕
* var -> 호이스팅(hoisting)과 관련 있음.
✅ 호이스팅(hoisting)이란?
- 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 Scope의 선두로 옮겨진 것처럼 동작하는 특성.
- 선언만 최상단으로 이동. 초기화는 이동X
- 다른 언어와 차별되는 자바스크립트의 고유한 동작 방식 중 하나.
console.log(name);
var name = "김수인";
console.log(name);undefined
김수인
⬇️⬇️⬇️
var name; // 선언 최상단으로 끌어올려짐 (hoisting)
console.log(name); // undefined (=> 왜? 초기화 이전이기 때문에)
name = "김수인"; // 초기화
console.log(name); // 김수인
- 변수 호이스팅
var: 선언만 호이스팅되고 초기화는 나중에 이루어짐 (undefined)
let, const: 선언만 호이스팅되지만, 초기화 전까지 접근하면 ReferenceError 발생.
- 함수 호이스팅
함수 선언문: 전체가 호이스팅 (함수 선언, 초기화, 할당이 한번에 이루어짐) 되므로 선언 전에 호출 가능.
함수 표현식: 변수 선언만 호이스팅되고, 함수로 초기화되기 전까지 호출할 수 없음.
📌 데이터 타입
🟦 기본형 (Primitive type)
- 변경 불가능한 값 ( = 원시형 )
string
number
boolean
undefined
null
bigint
symbol (ES6)
1. String
let Hello = "안녕";
console.log(typeof Hello);string
Escape sequence
- 화면 제어용, 장치 제어용 문자
- 백슬래시(\) 뒤에 한 문자나 숫자 조합이 오는 문자 조합
\b : 백 스페이스
\t : 탭
\n : 줄 바꿈
\\ : 슬래쉬
\` . \" : 작은 따옴표, 큰 따옴표
\r : 복귀 (캐리지 리턴)
\f : 페이지 열기
\v: 수직 탭
\uXXXX: 16진수 유니코드 표기
\xXX: 16진수 라틴문자 표기
const newline = "줄\n바꿈";
console.log(newline);
const tapkey = "탭\t띄어쓰기";
console.log(tapkey);
const backSlash = "백\\슬래쉬";
console.log(backSlash);줄
바꿈
탭 띄어쓰기
백\슬래쉬
* Template Literal
- ES6에서 도입한 새로운 문자열 표기법.
- 따옴표 문자 대신 백틱(backtick) 문자 `를 사용.
// backtick
const backtick = `백틱`;
console.log(backtick);
// String Interpolation
const today = "오늘";
console.log(today + "의 날씨");
console.log(`${today}의 날씨`);백틱
오늘의 날씨
오늘의 날씨
🔠 string 메소드
indexOf 메소드
lastIndexOf 메소드
search 메소드
slice 메소드
substring 메소드
substr 메소드
replace 메소드
toLowerCase, toUpperCase 메소드
concat 메소드
trim 메소드
charAt, charCodeAt 메소드
split 메소드
match 메소드
2. Number
- 정수와 실수를 포함하는 단일 자료형.
- IEEE 754 표준의 64비트 부동 소수점 형식을 따름.
- 숫자 표현 범위: -2^53 ~ 2^53
- Math 객체와 함께 사용되곤 함.
let pi = 3.14;
console.log(typeof pi);number
◎ string type➡️ number type 변환 함수
- parseInt
- parseFloat
- Number
◎ number type ➡️ stirng type 변환 함수
- toString
- String
🧮 Math 클래스
PI - 원주율
round - 반올림 메소드
pow - 거듭제곱 메소드
sqrt - 제곱근 메소드
abs - 절대값 메소드
floor/ceil - 내림/올림 메소드
sin, cos, tan - 삼각함수 메소드
max, min - 최대, 최소 메소드
random - 난수 메소드
☑️ BigInt
- number 자료형이 안정적으로 나타낼 수 있는 최대치인 2^53 - 1 보다 큰 정수를 표현할 수 있는 내장 객체.
- Math 객체의 메서드와 함께 사용할 수 없고, 연산에서 Number와 혼합하여 사용 불가능.
+, -, *, **, % 연산자 사용 가능
/ 연산자도 사용 가능 (binInt는 소수점 이하 버림)
- 정수 리터럴 뒤에 n을 붙이거나, 함수 BigInt()를 호출해 사용.
typeof 1n === "bigint";
typeof BigInt("1") === "bigint"; true
true
BigInt는 number와 값은 같으나, 타입이 다름.
0n === 0;
0n == 0;false
true
☑️ NaN
- Not a Number 숫자가 아닌 값을 나타낼 때 사용됨.
- 수학 연산이 잘못된 경우, 숫자가 아닌 값과 연산할 경우, 숫자로 변환 불가능한 문자열이 입력된 경우(parseInt, parseFloat) 등에서 NaN 반환.
특징
- 자바스크립트에서 typeof NaN을 하면 "number"가 반환됨.
console.log(typeof NaN);
// number
- NaN은 NaN과 일치하지 않음.
console.log(NaN === NaN);
// false
- isNaN(): 값이 숫자로 변환 가능한지 검사.
- Number.isNaN(): NaN 여부를 더욱 엄격하게 검사.
console.log(isNaN("Hello"));
// true
console.log(isNaN("123"));
// false
console.log(Number.isNaN("Hello"));
// false
console.log(Number.isNaN(NaN));
// true
3. Boolean
- true / false로 표현.
let Calculate = (5 < 10);
console.log(Calculate);
console.log(typeof Calculate);true
boolean
4. undefined
- 값이 변수에 할당되지 않았을 때
- 객체에서 존재하지 않는 속성에 접근할 때
- 함수에서 return 값을 반환하지 않았을 때
- 매개변수 전달이 안 됐을 때
- 배열에서 요소값이 없을 경우 해당 요소를 표시할 때
등
let a;
console.log(a);undefined
5. null
null 타입의 값은 null이 유일.
자바스크립트를 대소문자를 구별 → null ≠ Null ≠ NULL
1. 변수에 값이 없다는 것을 명시할 때 사용.
2. 함수 호출 시 유효한 값을 반환 불가능할 때 null 반환.
+) typeof로 null 연산하면 값이 object로 나옴.
이는 자바스크립트의 설계상의 오류
▶ 따라서, null 타입을 확인할 때는 일치연산자(===) 사용.
let first = null;
console.log(typeof first === null);
console.log(first === null);false
true
6. Symbol (ES6)
- 객체에 속성을 추가할 때 고유한 키를 부여하여 다른 코드와 충돌하지 않도록 할 때 주로 사용됨.
- 대문자로 시작해야 함.
let symbol = Symbol(“Hi”);
let symb0l = Symbol(“Hi”);
Symbol("Hi") === Symbol(“Hi”);false
🟩 참조형 (Reference Type)
- 변경 가능한 값
Object (객체)
Array (배열)
Function (함수)
1. Object (객체)
- 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합
key: 빈 문자열을 포함하는 모든 문자열 또는 symbol 값
value: 모든 값
let dictionary = {
red: "빨강",
orange: "주황",
yellow: "노랑",
};
console.log(dictionary);
console.log(dictionary["red"]);
console.log(dictionary["orange"]);
console.log(dictionary["yellow"]);
console.log(typeof dictionary);{ red: '빨강', orange: '주황', yellow: '노랑' }
빨강
주황
노랑
object
2. Array (배열)
- 대부분의 프로그래밍 언어에서 배열의 요소들은 모두 같은 데이터 타입이어야 하지만,
자바스크립트 배열은 어떤 데이터 타입의 조합이라도 포함 가능.
* Java 배열 – 크기 고정
Javascript 배열 – 크기 자동 증가
◎ 배열 추가
let arr = [];
arr[1] = 0;
arr[3] = 5;
console.log(arr);
console.log(arr.length);
[ <1 empty item>, 0, <1 empty item>, 5 ]
4
◎ 배열 삭제
let arr = ['one', 'two', 'three', 'four'];
delete arr[1];
console.log(arr);
arr.splice(2);
console.log(arr);
[ 'one', <1 empty item>, 'three', 'four' ]
[ 'one', <1 empty item>, 'four' ]
◎ 배열 순회
let a = ["H", "e", "l", "l", "o"];
for (let i = 0; i < a.length; ++i) {
console.log(a[i]);
}H
e
l
l
o
🚂 배열의 메소드
- toString 메소드
- splice 메소드
- slice 메소드
- push, pop 메소드
- unshift, shift 메소드
- concat 메소드
- sort
- reverse
3. Function (함수)
① 함수 선언문
function 함수이름(변수 목록) {
return 반환 값;
}
function Function() {
console.log("함수 선언문");
}
Function()함수 선언문
② 함수 표현식
let Function = function() {
console.log("함수 표현식");
}
Function()함수 표현식
+ 화살표 함수
let arrowFunction = () => {
console.log("화살표 함수");
};
arrowFunction()화살표 함수
'공부 > GDG' 카테고리의 다른 글
| Javascript 2 DOM (5) | 2024.10.07 |
|---|---|
| GDG-WEB 2주차 과제 (0) | 2024.10.01 |
| Javascript 1-4 연산자 (0) | 2024.09.30 |
| Javascript 1-3 제어문 (0) | 2024.09.30 |
| Javascript 1-1 기본 개념 (0) | 2024.09.29 |
