[Frontend] 20250625 JavaScript 1일차

san-sae·2025년 6월 25일

[HTML, CSS, JS] TIL

목록 보기

2/3

JavaScript 코드 삽입

<body>
    안녕하세요!
    <script src="./script.js"></script>
</body>

자바스크립트 코드는 <script> 안에 직접 코드를 작성하거나, <script>의 속성으로 src를 사용하여 적용할 수 있음

console

// 데이터 타입별 로그 출력
console.log("Hello World!");
console.log(123);
console.log(true);
var greeting = "안녕하세요.";
console.log(greeting);
console.log({ a: "a", b: "b" });

// table()
console.table({ a: "a", b: "b" });

// warn(), error()
console.warn("Warning");
console.error("Error!");

// time(), timeEnd(); 인수로 같은 값을 넣어야 함
console.time("Hello!");
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.timeEnd("Hello!");

console 객체: 브라우저의 디버깅 콘솔에 접근할 수 있는 메서드
- 아무 전역 객체에서나 접근 가능
console 객체 가진 메서드
- log(), table()
- warn(), error()
- time(), timeEnd(): 두 함수의 인수로는 같은 값을 써야 함

변수 선언

	var	let	const
중복 선언	O	X	X
재할당	O	O	X
scope	function-level	block-level	block-level
hoisting	O (초기화 없이 `undefined`)	O (Temporal Dead Zone 존재)	O (Temporal Dead Zone 존재)

자바스크립트에서 변수 선언시, var, let, const 사용함

var

var greeting = "hello";
console.log(greeting);

var greeting = "hi";
console.log(greeting); 

greeting = "how are you?";
console.log(greeting);

중복 선언시, 마지막에 할당된 값이 변수에 저장
중복 선언과 재할당으로 인해 자율성은 생기나, 추후 어떤 부분에서 값이 변경되는지 파악하기 어려질 수도 있음

let

let greeting = "hello";
console.log(greeting);

/* 중복 선언할 경우, 에러 발생
    let greeting = "hi";
*/

greeting = "how are you?";
console.log(greeting);

중복 선언은 가능하나, 재할당 불가

const

const greeting = "hello";
console.log(greeting);

/* 중복 선언할 경우, 에러 발생
    const greeting = "hi";
*/

/* 재할당할 경우, 에러 발생
    greeting = "how are you?";
*/

중복 선언과 재할당 모두 불가

const로 선언해도 배열과 객체의 값을 변경하는 것은 가능

const arraryList = [1, 2, 3];
arraryList.push(4);
console.log(arraryList);

const objectList = {a: 'a', b: 'b'};
objectList.c = "c";
console.log(objectList);

scope

var: function-level-scope:

변수가 선언된 함수 내에서만 유효

블록 안에서 선언해도 함수 전체에 유효

function func1() {
    if(true) {
        var s1 = 'a';
        console.log(s1); // a
    }

    console.log(s1); // a
}

func1();
console.log(s1); // Uncaught ReferenceError

let / const: block-level-scope

변수가 선언된 블록 내에서만 유효

블록: if문, for문, {}, 함수 등

function func2() {
    if(true) {
        let s2 = 'b';
        console.log(s2);
    }

    console.log(s2);
}

func2();
console.log(s2);

Hoisting

자바스크립트에서 Hoisting란? 코드가 실행되기 전 변수 및 함수 선언이 로컬 범위(유효 범위)의 맨 위로 끌어올려지는 현상
- var 선언문 호이스팅
  - 변수 선언 단계와 변수 할당 단계가 분할되어 실행
  - 선언 부분은 코드 실행 전 현재 범위의 맨 위로 호이스팅됨(초기 값은 undefined 할당) $\rightarrow$ 초기화 전 변수 사용 가능
  - 할당부분은 추후 자바스크립트 인터프리터가 읽으면서 실행됨
```
console.log(h); // undefined
var h = "hosting test - var";        
```
- function 선언문 호이스팅
  - 함수 선언문도 함수 선언 전 호출하면 출력됨
```
func3(); // hosting test - 함수

function func3() {
    console.log("hosting test - 함수");
}
```
- let / const 선언문 호이스팅
  - 호이스팅은 되나, 변수에 값을 할당하기 전까지 초기에 어떤 값도 할당되지 않음
  - 위로 호이스팅(선언)되고 할당되기 전 그 사이를 TDZ(Temporal Dead Zone)라고 하며, TDZ에서 변수를 사용하게 되면 오류 발생
```
console.log(h2); // Uncaught ReferenceError: Cannot access 'h2' before initialization
let h2 = "hoisting test - let / const";
```

san-sae

[Frontend] 20250625 JavaScript 1일차

[HTML, CSS, JS] TIL

JavaScript 코드 삽입

console

변수 선언

var

let

const

scope

Hoisting

0개의 댓글