Skip to content

Commit 21fc72a

Browse files
lazy-dinosaurlazy-dinosaur
committed
update post
1 parent f1bbd64 commit 21fc72a

12 files changed

+246
-17
lines changed

‎content/posts/자원/JavaScript/Javascript-var,let,const의 주요 차이점은 무엇인가.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
tags:
3+
- resource
4+
- javascript
5+
createdAt: 2025-04-17 14:40:27
6+
modifiedAt: 2025-04-17 15:07:54
7+
publish: 자원/JavaScript
8+
related: ""
9+
series: ""
10+
---
11+
12+
# Javascript-var,let,const의 주요 차이점은 무엇인가
13+
14+
`var`,`let`,`const`는 전부 변수 선언 키워드이지만 중요한 차이점이 있다.
15+
16+
## 주요 차이 (스코프,재선언,재할당)
17+
18+
`let`과 `const`는 `var`의 단점(함수 스코프, 재선언 가능 등)을 보완하기 위해 ES6에서 도입되었다. 블록 스코프와 재선언/재할당 규칙은 코드를 더 예측 가능하고 안전하게 만들어주기 때문에, 현대 자바스크립트 개발에서는 `var`대신 `let`과 `const`사용이 강력히 권장된다. `const`를 기본으로 사용하고, 재할당이 필요한 경우에만 `let`을 사용하는것이 좋다.
19+
20+
### 스코프(Scope)
21+
22+
- `var`
23+
함수 스코프(Function Scope)를 갖는다. 함수 내에서 선언된 `var` 변수는 함수 전체에서 유효하며, 함수 외부에서는 접긍할 수 없다. 블록(`{}`)스코프를 가지지 않아 `if` 문이나 `for`문 블록 내에서 선언해도 해당 블록 외부에서 접근이 가능하다.
24+
25+
- `let`,`const`
26+
블록 스코프(Block Scope)를 가진다. 변수가 선언된 블록(`{}`),문(statement), 또는 표현식 내에서만 유효하다. 이는 변수의 유효 범위를 더 좁게 제한하여 의도치 않은 값 변경이나 충돌을 방지한다.
27+
28+
### 재선언(Redeclaration)
29+
30+
- `var`
31+
같은 스코프 내에서 동일한 이름으로 변수를 다시 성넝해도 에러가 발생하지 않는다. 이는 실수로 변수를 덮어쓰는 문제를 일으킬 수 있다.
32+
33+
- `let`,`const`
34+
같은 스코프 내에서 동일한 이름으로 변수를 다시 선언하면 `SyntaxError`가 발생한다.
35+
36+
### 재할당(Reassignment)
37+
38+
- `var`,`let`
39+
선언 후에 다른 갓으로 재할당 하는 것이 가능하다.
40+
- `const`
41+
선언시 반드시 값으로 초기화해야 하며, 한번 할당된 후에는 다른 겂으로 재할당할 수 없다(상수). 단, `const`로 선언된 객체나 배열의 경우, 객체 자체를 재할당할 수는 없지만 그 내부의 속성이나 요소는 변경할 수 있다(객체/배열 자체가 불변이 되는것은 아님).
42+
43+
## 비교표
44+
45+
| 기능(Feature) | var | let | const |
46+
| ---------------------------- | ------------------------ | ------------------------ | ------------------------ |
47+
| 스코프(Scope) | 함수 스코프(Function) | 블록 스코프(Block) | 블록 스코프(Block) |
48+
| 호이스팅(Hoisting) | 선언 + `undefined`초기화 | 선언만(초기화X) | 선언만(초기화X) |
49+
| 재선언 (Redeclaration) | 가능(O) | 불가능(X,같은 스코프 내) | 불가능(X,같은 스코프 내) |
50+
| 재할당(Reassignment) | 가능(O) | 가능(O) | 불가능(X) |
51+
| 시간적 사각지대(TDZ) | 없음(X) | 있음(O) | 있음(O) |
52+
| 선언 전 접근 (Access before) | `undefined` | `ReferenceError` | `ReferenceError` |
53+
54+
> [!info]
55+
>
56+
> `let`과`const`가 TDZ를 가지는 것은 선언 전에 변수를 사용하는 실수를 방지하는 데 도움을 준다.
57+
> `var`에서 `let`과 `const`로의 전환은 단순히 새로운 키워드를 사용하는 것을 넘어, 자바스크립트 언어가 더 안전하고 예측 가능한 코드를 작성하도록 발전해 왔음을 보여준다. `var`은 함수 레벨 스코프와 `undefined`로 초키화되는 호이스팅 특성 때문에, 특히 반복문이나 조건문 내에서 변수를 사용할 땡 셰아치 못한 버그를 유라하는 경우가 많았다. 예를 들어, `for` 루프에서 이러한 문제를 해결하기 위해 블록 스코프와 TDZ를 도입하여, 변수의 유효 범위를 명확히 하고 선언 전에 접근하는 것을 막아 코드의 안정성을 높였다.
58+
>
59+
> - [[Javascript-호이스팅(Hoisting)이란 무엇인가]]

‎content/posts/자원/JavaScript/Javascript-변수의 선언,초기화,할당의 차이점은 무엇인가.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
tags:
3+
- resource
4+
- javascript
5+
createdAt: 2025-04-17 13:25:40
6+
modifiedAt: 2025-04-17 15:07:30
7+
publish: 자원/JavaScript
8+
related: ""
9+
series: ""
10+
---
11+
12+
# Javascript-변수의 선언,초기화,할당의 차이점은 무엇인가
13+
14+
선언, 초기화, 할당 세 단계를 구분하는 것은 호이스팅과 시간적 사각지대(TDZ)같은 개념을 이해하는 데 기초가 된다. 변수가 어떻게 생성되고 언제 접근 가능한지를 정확히 아는것은 코드의 동작을 예측하고 오류를 피하는데에 중요하다.
15+
16+
1. 선언(Declaration)
17+
변수 이름을 자바스크립트 엔진에 등록하는 단계이다. 이 단계에서 해당 스코프는 참조할 식별자를 알게 된다. 예를 들어 `let myVar;`은 `myVar`이라는 변수를 선언한다.
18+
19+
2. 초기화(Initialization)
20+
선언된 변수를 위해 메모리 공간을 확보하고, 기본값으로 `undefined`를 할당하는 단계이다. `let`과 `const`는 선언 단계와 초기화 단계가 분리되어 있지만, `var`은 선언과 동시에 `undefined`로 초기화된다. 이 때문에 [[Javascript-호이스팅(Hoisting)이란 무엇인가|호이스팅 작동시에 문제]]가 생긴다
21+
22+
3. 할당(Assignment)
23+
`=`연산자를 사용하여 변수에 실제 값을 저장하는 단계이다. `undefined`로 초기화된 변수에 구체적인 값을 넣어주는 과정이다. 예를 들어 `myVar = 10;`은 `myVar`변수에 10이라는 값을 할당한다.

‎content/posts/자원/JavaScript/Javascript-호이스팅(Hoisting)이란 무엇인가.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
tags:
3+
- resource
4+
- javascript
5+
createdAt: 2025-04-17 14:08:12
6+
modifiedAt: 2025-04-17 15:07:47
7+
publish: 자원/JavaScript
8+
related: ""
9+
series: ""
10+
---
11+
12+
# Javascript-호이스팅(Hoisting)이란 무엇인가
13+
14+
호이스팅은 자바스크립트 엔진이 코드를 실행하기 전에 변수, 함수, 클래스의 **선언** 부분을 해당 스코프의 최상단으로 끌어올리는 것처럼 동작하는 현상을 말한다.
15+
16+
엔진이 코드를 해석할 때 선언부를 먼저 처리하기 때문에 마치 끌어올려진 것처럼 보인다.
17+
18+
## `var`,`let`,`const`의 호이스팅의 차이
19+
20+
- `var`
21+
변수 선언(`var myVar;`)이 스코프 최상단으로 끌어올려지고, 동시에 `undefined`로 **초기화**된다. 따라서 선언문 이전에 변수에 접근해도 에러가 발생하지 않고 `undefined` 값을 가진다.
22+
23+
```js
24+
//`var` 의 경우 선언 전에 호출하게 되면 `undefined`로 에러가 나지 않는다.
25+
26+
console.log(myVar); //undefined (var은 호이스팅되고 undefined로 초기화된다)
27+
var myVar = 5;
28+
```
29+
30+
- `let`,`const`
31+
변수 선언이 스코프 최상단으로 끌어올려지지만, **초기화 되지는 않는다.** 선언문 이전에 해당 변수에 접근하려고 하면 초기화되기 전까지 접근할 수 없다는 `referenceError`가 발생한다. 이 구간을 **시간적 사각지대(Temporal Dead One, TDZ)**라고 한다.
32+
33+
```js
34+
//`let`과 `const`의 경우 선언 전에 호출하게 되면 `ReferenceError`가 발생한다.
35+
36+
console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization (TDZ)
37+
let myLet = 5;
38+
```
39+
40+
- 함수 선언식
41+
함수 선언식(`function myFunction(){}`)은 함수 전체가 호이스팅되어 선언 전에 호출할 수 있다. 함수 표현식(`function myFunction(){}`)은 변수 호이스팅 규칙(여기서는 `const`)을 따른다.
42+
43+
```js
44+
//함수 선언식은 선언 전에 호출을 해도 정상적으로 작동 한다. 선언은 전체 호이스팅 되기 때문이다.
45+
46+
myFunction(); // "Hello" (함수 선언식은 호이스팅됨)
47+
function myFunction() {
48+
console.log("Hello");
49+
}
50+
```
51+
52+
> [!tip]
53+
>
54+
> - [[Javascript-var,let,const의 주요 차이점은 무엇인가]]
55+
56+
호이스팅은 특히`var`을 사용할 때 코드의 실행 순서와 변수 값 예측을 어렵게 만들 수 있다.`let`과 `const`의 도입 및 TDZ는 이러한 혼란을 줄이고 더 예측 가능한 코드를 작성하는 데 도움을 준다.
57+
58+
## 관련 정보
59+
60+
- [[Javascript-변수의 선언,초기화,할당의 차이점은 무엇인가]]

‎content/posts/자원/JavaScript/Javascript.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
tags:
3+
- resource
4+
- web
5+
- javascript
6+
createdAt: 2025-04-12 09:09:33
7+
modifiedAt: 2025-04-17 15:08:15
8+
publish: 자원/JavaScript
9+
related: ""
10+
series: ""
11+
---
12+
13+
# Javascript
14+
15+
웹사이트에서 [[HTML]]과 [[CSS]]가 각각 내용의 구조를 정하고 그 내용이 어떤 모습으로 표현되어야 하는지 브라우져에게 설명하는 언어라면 Javascript 는 웹사이트와 사용자가 상호작용을 할 수 있도록 하는 언어이다.
16+
17+
## 관련 정보
18+
19+
- [[Javascript-변수의 선언,초기화,할당의 차이점은 무엇인가]]
20+
- [[Javascript-호이스팅(Hoisting)이란 무엇인가]]
21+
- [[Javascript-데이터 타입과 불변성]]

‎content/posts/자원/웹개발/Javascript가 웹사이트를 어떻게 조작할 수 있는가-DOM과 CSSOM의 개념.md

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ tags:
44
- web
55
- javascript
66
createdAt: 2025-04-14 09:46:13
7-
modifiedAt: 2025-04-16 11:15:36
7+
modifiedAt: 2025-04-16 19:08:41
88
publish: 자원/웹개발
99
related: ""
1010
series: ""
@@ -54,19 +54,21 @@ DOM 은 여러가지의 object를 포함한다. `window`,`document`,`element`,`n
5454

5555
대표적인 인터페이스는 다음과 같다.
5656

57-
- document.getElementById(id)
58-
- document.getElementsByTagName(name)
59-
- document.createElement(name)
60-
- parentNode.appendChild(node)
61-
- element.innerHTML
62-
- element.style.left
63-
- element.setAttribute
64-
- element.getAttribute
65-
- element.addEventListener
66-
- window.content
67-
- window.onload
68-
- window.dump
69-
- window.scrollTo
57+
> [!example]
58+
>
59+
> - `document.getElementById(id)`
60+
> - `document.getElementsByTagName(name)`
61+
> - `document.createElement(name)`
62+
> - `parentNode.appendChild(node)`
63+
> - `element.innerHTML`
64+
> - `element.style.left`
65+
> - `element.setAttribute`
66+
> - `element.getAttribute`
67+
> - `element.addEventListener`
68+
> - `window.content`
69+
> - `window.onload`
70+
> - `window.dump`
71+
> - `window.scrollTo`
7072
7173
## 예시
7274

‎public/link-map.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
{
2+
"0.inbox/Javascript-변수의 선언,초기화,할당의 차이점은 무엇인가.md": "자원/JavaScript/Javascript-변수의 선언,초기화,할당의 차이점은 무엇인가",
3+
"0.inbox/Javascript-호이스팅(Hoisting)이란 무엇인가.md": "자원/JavaScript/Javascript-호이스팅(Hoisting)이란 무엇인가",
4+
"0.inbox/Javascript-var,let,const의 주요 차이점은 무엇인가.md": "자원/JavaScript/Javascript-var,let,const의 주요 차이점은 무엇인가",
25
"3.resource/SWEA강의/SWEA 강의 정리노트.md": "자원/SWEA 강의 정리노트/SWEA 강의 정리노트",
6+
"3.resource/Javascript/Javascript.md": "자원/JavaScript/Javascript",
37
"3.resource/Web/동적 사이트 vs 정적사이트.md": "자원/웹개발/동적 사이트 vs 정적사이트",
48
"3.resource/Web/HTTP(Hypertext Transfer Protocol).md": "자원/웹개발/HTTP(Hypertext Transfer Protocol)",
59
"3.resource/Web/웹사이트는 어떻게 보여지는가-브라우저의 렌더링.md": "자원/웹개발/웹사이트는 어떻게 보여지는가-브라우저의 렌더링",

‎public/meta-data.json

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,37 @@
11
[
2+
{
3+
"urlPath": "자원/JavaScript/Javascript-변수의 선언,초기화,할당의 차이점은 무엇인가",
4+
"title": "Javascript-변수의 선언,초기화,할당의 차이점은 무엇인가",
5+
"summary": "",
6+
"image": "",
7+
"tags": ["resource", "javascript"],
8+
"series": "",
9+
"createdAt": "2025-04-17 13:25:40",
10+
"modifiedAt": "2025-04-17 15:07:30",
11+
"publish": "자원/JavaScript"
12+
},
13+
{
14+
"urlPath": "자원/JavaScript/Javascript-호이스팅(Hoisting)이란 무엇인가",
15+
"title": "Javascript-호이스팅(Hoisting)이란 무엇인가",
16+
"summary": "",
17+
"image": "",
18+
"tags": ["resource", "javascript"],
19+
"series": "",
20+
"createdAt": "2025-04-17 14:08:12",
21+
"modifiedAt": "2025-04-17 15:07:47",
22+
"publish": "자원/JavaScript"
23+
},
24+
{
25+
"urlPath": "자원/JavaScript/Javascript-var,let,const의 주요 차이점은 무엇인가",
26+
"title": "Javascript-var,let,const의 주요 차이점은 무엇인가",
27+
"summary": "",
28+
"image": "",
29+
"tags": ["resource", "javascript"],
30+
"series": "",
31+
"createdAt": "2025-04-17 14:40:27",
32+
"modifiedAt": "2025-04-17 15:07:54",
33+
"publish": "자원/JavaScript"
34+
},
235
{
336
"urlPath": "자원/SWEA 강의 정리노트/SWEA 강의 정리노트",
437
"title": "SWEA 강의 정리노트",
@@ -10,6 +43,17 @@
1043
"modifiedAt": "2025-03-20 16:17:34",
1144
"publish": "자원/SWEA 강의 정리노트"
1245
},
46+
{
47+
"urlPath": "자원/JavaScript/Javascript",
48+
"title": "Javascript",
49+
"summary": "",
50+
"image": "",
51+
"tags": ["resource", "web", "javascript"],
52+
"series": "",
53+
"createdAt": "2025-04-12 09:09:33",
54+
"modifiedAt": "2025-04-17 15:08:15",
55+
"publish": "자원/JavaScript"
56+
},
1357
{
1458
"urlPath": "자원/웹개발/동적 사이트 vs 정적사이트",
1559
"title": "동적 사이트 vs 정적사이트",
@@ -73,7 +117,7 @@
73117
"tags": ["resource", "web", "javascript"],
74118
"series": "",
75119
"createdAt": "2025-04-14 09:46:13",
76-
"modifiedAt": "2025-04-16 11:15:36",
120+
"modifiedAt": "2025-04-16 19:08:41",
77121
"publish": "자원/웹개발"
78122
},
79123
{

0 commit comments

Comments
 (0)