Skip to content

Commit d5f24e8

Browse files
lazy-dinosaurlazy-dinosaur
committed
update post
1 parent d044da6 commit d5f24e8

15 files changed

+171
-59
lines changed

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ tags:
44
- web
55
- javascript
66
createdAt: 2025-04-12 09:09:33
7-
modifiedAt: 2025-04-17 15:08:15
7+
modifiedAt: 2025-04-18 14:59:35
88
publish: 자원/JavaScript
99
related: ""
1010
series: ""
@@ -16,6 +16,7 @@ series: ""
1616

1717
## 관련 정보
1818

19-
- [[Javascript-변수의 선언,초기화,할당의 차이점은 무엇인가]]
20-
- [[Javascript-호이스팅(Hoisting)이란 무엇인가]]
21-
- [[Javascript-데이터 타입과 불변성]]
19+
- [[변수의 선언,초기화,할당의 차이점은 무엇인가]]
20+
- [[호이스팅(Hoisting)이란 무엇인가]]
21+
- [[데이터 타입과 불변성]]
22+
- [[null,undefined,undeclared 의 차이점은]]

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

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ tags:
33
- resource
44
- javascript
55
createdAt: 2025-04-17 14:40:27
6-
modifiedAt: 2025-04-17 15:07:54
6+
modifiedAt: 2025-04-18 15:01:31
77
publish: 자원/JavaScript
88
related: ""
99
series: ""
1010
---
1111

12-
# Javascript-var,let,const의 주요 차이점은 무엇인가
12+
# var,let,const의 주요 차이점은 무엇인가
1313

1414
`var`,`let`,`const`는 전부 변수 선언 키워드이지만 중요한 차이점이 있다.
1515

@@ -20,25 +20,29 @@ series: ""
2020
### 스코프(Scope)
2121

2222
- `var`
23-
함수 스코프(Function Scope)를 갖는다. 함수 내에서 선언된 `var` 변수는 함수 전체에서 유효하며, 함수 외부에서는 접긍할 수 없다. 블록(`{}`)스코프를 가지지 않아 `if` 문이나 `for`문 블록 내에서 선언해도 해당 블록 외부에서 접근이 가능하다.
23+
**함수 스코프(Function Scope)**를 갖는다. 함수 내에서 선언된 `var` 변수는 함수 전체에서 유효하며, 함수 외부에서는 접근할 수 없다. 블록(`{}`)스코프를 가지지 않아 **`if` 문이나 `for`문 블록 내에서 선언해도 해당 블록 외부에서 접근이 가능하다.**
2424

2525
- `let`,`const`
26-
블록 스코프(Block Scope)를 가진다. 변수가 선언된 블록(`{}`),문(statement), 또는 표현식 내에서만 유효하다. 이는 변수의 유효 범위를 더 좁게 제한하여 의도치 않은 값 변경이나 충돌을 방지한다.
26+
**블록 스코프(Block Scope)**를 가진다. 변수가 선언된 블록(`{}`),문(statement), 또는 표현식 내에서만 유효하다. 이는 **변수의 유효 범위를 더 좁게 제한하여 의도치 않은 값 변경이나 충돌을 방지한다.**
27+
28+
> [!tip] 스코프 더 자세히 알아 보기
29+
>
30+
> - [[Javascript-스코프와 스코프 체인]]
2731
2832
### 재선언(Redeclaration)
2933

3034
- `var`
31-
같은 스코프 내에서 동일한 이름으로 변수를 다시 성넝해도 에러가 발생하지 않는다. 이는 실수로 변수를 덮어쓰는 문제를 일으킬 수 있다.
35+
같은 스코프 내에서 **동일한 이름으로 변수를 다시 생성해도 에러가 발생하지 않는다.** 이는 실수로 변수를 덮어쓰는 문제를 일으킬 수 있다.
3236

3337
- `let`,`const`
34-
같은 스코프 내에서 동일한 이름으로 변수를 다시 선언하면 `SyntaxError`가 발생한다.
38+
같은 스코프 내에서 동일한 이름으로 변수를 **다시 선언하면 `SyntaxError`가 발생한다.**
3539

3640
### 재할당(Reassignment)
3741

3842
- `var`,`let`
39-
선언 후에 다른 갓으로 재할당 하는 것이 가능하다.
43+
선언 후에 다른 값으로 **재할당 하는 것이 가능**하다.
4044
- `const`
41-
선언시 반드시 값으로 초기화해야 하며, 한번 할당된 후에는 다른 겂으로 재할당할 수 없다(상수). 단, `const`로 선언된 객체나 배열의 경우, 객체 자체를 재할당할 수는 없지만 그 내부의 속성이나 요소는 변경할 수 있다(객체/배열 자체가 불변이 되는것은 아님).
45+
선언시 반드시 값으로 초기화해야 하며, 한번 할당된 후에는 **다른 값으로 재할당할 수 없다(상수).** 단, `const`로 선언된 객체나 배열의 경우, 객체 자체를 재할당할 수는 없지만 그 내부의 속성이나 요소는 변경할 수 있다(객체/배열 자체가 불변이 되는것은 아님).
4246

4347
## 비교표
4448

@@ -56,4 +60,4 @@ series: ""
5660
> `let`과`const`가 TDZ를 가지는 것은 선언 전에 변수를 사용하는 실수를 방지하는 데 도움을 준다.
5761
> `var`에서 `let`과 `const`로의 전환은 단순히 새로운 키워드를 사용하는 것을 넘어, 자바스크립트 언어가 더 안전하고 예측 가능한 코드를 작성하도록 발전해 왔음을 보여준다. `var`은 함수 레벨 스코프와 `undefined`로 초키화되는 호이스팅 특성 때문에, 특히 반복문이나 조건문 내에서 변수를 사용할 땡 셰아치 못한 버그를 유라하는 경우가 많았다. 예를 들어, `for` 루프에서 이러한 문제를 해결하기 위해 블록 스코프와 TDZ를 도입하여, 변수의 유효 범위를 명확히 하고 선언 전에 접근하는 것을 막아 코드의 안정성을 높였다.
5862
>
59-
> - [[Javascript-호이스팅(Hoisting)이란 무엇인가]]
63+
> - [[호이스팅(Hoisting)이란 무엇인가]]

‎content/posts/자원/JavaScript/데이터 타입과 불변성.md

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
tags:
3+
- resource
4+
- javascript
5+
createdAt: 2025-04-17 16:02:18
6+
modifiedAt: 2025-04-18 15:00:11
7+
publish: 자원/JavaScript
8+
related: ""
9+
series: ""
10+
---
11+
12+
# 데이터 타입과 불변성
13+
14+
Javascript의 데이터 타입은 크게 두 가지로 나눌 수 있다.
15+
16+
## Javascript의 데이터 타입
17+
18+
1. 원시타입(Primitive types)
19+
20+
고정된 크기의 메모리에 저장되며, 값 자체가 변수에 직접 할당된다. 원시 타입은 불변한다(immutable)
21+
22+
- `string`: 문자열
23+
- `number`: 숫자(정수 및 부동소수점 수 포함)
24+
- `boolean`: `true` 또는 `false`
25+
- `null`: 값이 없음을 의도적으로 나타내는 값
26+
- `undefined`: 값이 할당되지 않은 상태
27+
- `symbol`: ES6에서 추가된, 고유하고 변경 불가능한 식별자를 만들 때 사용
28+
- `bigint`: `number`타입이 표현할 수 있는 한계를 넘어서는 매우 큰 정수를 다룰 때 사용
29+
30+
2. 객체타입(Object types)
31+
32+
크기가 가변적일 수 있으며, 변수에는 값 자체가 아닌 값이 저장된 메모리 주소(참조)가 할당된다. 객체 타입은 **가변(mutable)하다.** 종류는 다음과 같다.
33+
34+
- `Object`: 키-값 쌍의 컬렉션(가장 기본적인 형태)
35+
- `Array`: 순서가 있는 값의 목록
36+
- `Function`: 호출 가능한 코드 블록(함수도 객체임)
37+
- `Date`,`RegExp`,`Map`,`Set`등의 내장 객체들
38+
39+
## 원시 타입과 객체 타입의 주요 차이점
40+
41+
원시 타입과 객체 타입은 값 저장 방식, 불변성, 복사 방식 세 가지 주요 측면에서 근본적인 차이를 보인다.
42+
43+
이 차이점들을 이해하는 것은 함수에 인자를 전달할 때, 변수를 복사할 때, 객체의 상태를 관리할 때 발생할 수 있는 예기치 않은 동작(side effects)을 방지하는 데 매우 중요하디. 특히 객체의 가변성과 참조 전달 방식은 주의 깊게 다루어 져야 한다.
44+
45+
1. 값 저장 방식(Value vs Reference)
46+
47+
- 원시 타입
48+
변수에 실제 값(value) 자체가 저장된다.
49+
50+
- 객체 타입
51+
변수에는 객체가 실제 저장된 메모리 공간을 가리키는 참조(reference) 값이 저장된다.
52+
53+
2. 불변성(Immutability vs Mutability)
54+
55+
- 원시타입
56+
**불변(immutable)** 하다. 한번 생성된 원시 갓은 변경할 수 없다. 예를 들어, 문자열의 일부를 변경하려 해도 새로운 문자열이 생성될뿐, 원본 문자열은 변하지 않는다. 변수에 다른 값을 재할당하는 것은 가능하지만, 이는 새로운 값을 가리키도록 하는 것이지 기존 값 자체를 바꾸는 것이 아니다.
57+
58+
- 객체타입
59+
**가변(mutable)** 하다. 객체를 생성한 후에도 그 내부의 속성이나 요소를 추가, 수정, 삭제할 수 있다.
60+
61+
```js
62+
// let 의 경우 재할당이 가능 하기 때문에 아무런 오류 없이 실행 되지만
63+
// const 의 경우 재하당이 불가능 하기 때문에 TypeError: Assignment to constant variable. 가 발생한다.
64+
const a = 10;
65+
a += 1;
66+
console.log(a);
67+
```
68+
69+
3. 복사 방식(Pass by Balue vs Pass by Reference)
70+
71+
- 원시타입
72+
변수를 다른 변수에 할당하면 **값에 의한 복사(pass by value)** 가 일어난다. 원본 변수의 실제 값이 복사되어 새로운 변수에 저장되므로, 두 변수는 완전히 독립적이다. 한쪽을 변경해도 다른 쪽에 영향을 주지 않는다.
73+
74+
- 객체타입
75+
변수를 다른 변수에 할당하면 **참조에 의한 전달(pass by reference)** 이 일어난다. 원본 변수의 참조 값(메모리 주소)이 복사되어 새로운 변수에 저장된다. 따라서 두 변수는 동일한 객체를 가리키게 된다 한쪾 변수를 통해 객체의 내용을 변경하면 다른 변수에도 그 변경 사항이 반영된다.
76+
77+
```js
78+
// Pass by Value (Primitive)
79+
let a = 10;
80+
let b = a; // a 의 값이 b에 복사됨
81+
b = 20;
82+
console.log(a); //10(값만 복사 하는것이기 때문에 a는 영향이 없음)
83+
console.log(b); //20
84+
85+
// Pass by Reference (Object)
86+
let obj1 = { value: 10 };
87+
let obj2 = obj1; //obj1의 참조(주소)가 obj2에 복사됨 (같은 객체를 가리킴)
88+
obj2.value = 20;
89+
console.log(obj1.value); // 20(obj2를 통해 변경했지만 obj1에도 반영됨)
90+
console.log(obj2.value); // 20
91+
```

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,21 @@ tags:
33
- resource
44
- javascript
55
createdAt: 2025-04-17 13:25:40
6-
modifiedAt: 2025-04-17 15:07:30
6+
modifiedAt: 2025-04-18 15:01:06
77
publish: 자원/JavaScript
88
related: ""
99
series: ""
1010
---
1111

12-
# Javascript-변수의 선언,초기화,할당의 차이점은 무엇인가
12+
# 변수의 선언,초기화,할당의 차이점은 무엇인가
1313

1414
선언, 초기화, 할당 세 단계를 구분하는 것은 호이스팅과 시간적 사각지대(TDZ)같은 개념을 이해하는 데 기초가 된다. 변수가 어떻게 생성되고 언제 접근 가능한지를 정확히 아는것은 코드의 동작을 예측하고 오류를 피하는데에 중요하다.
1515

1616
1. 선언(Declaration)
1717
변수 이름을 자바스크립트 엔진에 등록하는 단계이다. 이 단계에서 해당 스코프는 참조할 식별자를 알게 된다. 예를 들어 `let myVar;`은 `myVar`이라는 변수를 선언한다.
1818

1919
2. 초기화(Initialization)
20-
선언된 변수를 위해 메모리 공간을 확보하고, 기본값으로 `undefined`를 할당하는 단계이다. `let`과 `const`는 선언 단계와 초기화 단계가 분리되어 있지만, `var`은 선언과 동시에 `undefined`로 초기화된다. 이 때문에 [[Javascript-호이스팅(Hoisting)이란 무엇인가|호이스팅 작동시에 문제]]가 생긴다
20+
선언된 변수를 위해 메모리 공간을 확보하고, 기본값으로 `undefined`를 할당하는 단계이다. `let`과 `const`는 선언 단계와 초기화 단계가 분리되어 있지만, `var`은 선언과 동시에 `undefined`로 초기화된다. 이 때문에 [[호이스팅(Hoisting)이란 무엇인가|호이스팅 작동시에 문제]]가 생긴다
2121

2222
3. 할당(Assignment)
2323
`=`연산자를 사용하여 변수에 실제 값을 저장하는 단계이다. `undefined`로 초기화된 변수에 구체적인 값을 넣어주는 과정이다. 예를 들어 `myVar = 10;`은 `myVar`변수에 10이라는 값을 할당한다.

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ tags:
33
- resource
44
- javascript
55
createdAt: 2025-04-17 14:08:12
6-
modifiedAt: 2025-04-17 15:07:47
6+
modifiedAt: 2025-04-18 14:58:20
77
publish: 자원/JavaScript
88
related: ""
99
series: ""
1010
---
1111

12-
# Javascript-호이스팅(Hoisting)이란 무엇인가
12+
# 호이스팅(Hoisting)이란 무엇인가
1313

1414
호이스팅은 자바스크립트 엔진이 코드를 실행하기 전에 변수, 함수, 클래스의 **선언** 부분을 해당 스코프의 최상단으로 끌어올리는 것처럼 동작하는 현상을 말한다.
1515

@@ -51,10 +51,10 @@ series: ""
5151

5252
> [!tip]
5353
>
54-
> - [[Javascript-var,let,const의 주요 차이점은 무엇인가]]
54+
> - [[var,let,const의 주요 차이점은 무엇인가]]
5555
5656
호이스팅은 특히`var`을 사용할 때 코드의 실행 순서와 변수 값 예측을 어렵게 만들 수 있다.`let`과 `const`의 도입 및 TDZ는 이러한 혼란을 줄이고 더 예측 가능한 코드를 작성하는 데 도움을 준다.
5757

5858
## 관련 정보
5959

60-
- [[Javascript-변수의 선언,초기화,할당의 차이점은 무엇인가]]
60+
- [[변수의 선언,초기화,할당의 차이점은 무엇인가]]

‎public/link-map.json

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
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의 주요 차이점은 무엇인가",
52
"3.resource/SWEA강의/SWEA 강의 정리노트.md": "자원/SWEA 강의 정리노트/SWEA 강의 정리노트",
3+
"3.resource/Javascript/변수의 선언,초기화,할당의 차이점은 무엇인가.md": "자원/JavaScript/변수의 선언,초기화,할당의 차이점은 무엇인가",
4+
"3.resource/Javascript/호이스팅(Hoisting)이란 무엇인가.md": "자원/JavaScript/호이스팅(Hoisting)이란 무엇인가",
65
"3.resource/Javascript/Javascript.md": "자원/JavaScript/Javascript",
6+
"3.resource/Javascript/var,let,const의 주요 차이점은 무엇인가.md": "자원/JavaScript/var,let,const의 주요 차이점은 무엇인가",
7+
"3.resource/Javascript/데이터 타입과 불변성.md": "자원/JavaScript/데이터 타입과 불변성",
78
"3.resource/Web/동적 사이트 vs 정적사이트.md": "자원/웹개발/동적 사이트 vs 정적사이트",
89
"3.resource/Web/HTTP(Hypertext Transfer Protocol).md": "자원/웹개발/HTTP(Hypertext Transfer Protocol)",
910
"3.resource/Web/웹사이트는 어떻게 보여지는가-브라우저의 렌더링.md": "자원/웹개발/웹사이트는 어떻게 보여지는가-브라우저의 렌더링",

‎public/meta-data.json

Lines changed: 33 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,68 @@
11
[
22
{
3-
"urlPath": "자원/JavaScript/Javascript-변수의 선언,초기화,할당의 차이점은 무엇인가",
4-
"title": "Javascript-변수의 선언,초기화,할당의 차이점은 무엇인가",
3+
"urlPath": "자원/SWEA 강의 정리노트/SWEA 강의 정리노트",
4+
"title": "SWEA 강의 정리노트",
5+
"summary": "",
6+
"image": "",
7+
"tags": ["study", "algorithm"],
8+
"series": "",
9+
"createdAt": "2025-03-19 12:20:41",
10+
"modifiedAt": "2025-03-20 16:17:34",
11+
"publish": "자원/SWEA 강의 정리노트"
12+
},
13+
{
14+
"urlPath": "자원/JavaScript/변수의 선언,초기화,할당의 차이점은 무엇인가",
15+
"title": "변수의 선언,초기화,할당의 차이점은 무엇인가",
516
"summary": "",
617
"image": "",
718
"tags": ["resource", "javascript"],
819
"series": "",
920
"createdAt": "2025-04-17 13:25:40",
10-
"modifiedAt": "2025-04-17 15:07:30",
21+
"modifiedAt": "2025-04-18 15:01:06",
1122
"publish": "자원/JavaScript"
1223
},
1324
{
14-
"urlPath": "자원/JavaScript/Javascript-호이스팅(Hoisting)이란 무엇인가",
15-
"title": "Javascript-호이스팅(Hoisting)이란 무엇인가",
25+
"urlPath": "자원/JavaScript/호이스팅(Hoisting)이란 무엇인가",
26+
"title": "호이스팅(Hoisting)이란 무엇인가",
1627
"summary": "",
1728
"image": "",
1829
"tags": ["resource", "javascript"],
1930
"series": "",
2031
"createdAt": "2025-04-17 14:08:12",
21-
"modifiedAt": "2025-04-17 15:07:47",
32+
"modifiedAt": "2025-04-18 14:58:20",
2233
"publish": "자원/JavaScript"
2334
},
2435
{
25-
"urlPath": "자원/JavaScript/Javascript-var,let,const의 주요 차이점은 무엇인가",
26-
"title": "Javascript-var,let,const의 주요 차이점은 무엇인가",
36+
"urlPath": "자원/JavaScript/Javascript",
37+
"title": "Javascript",
2738
"summary": "",
2839
"image": "",
29-
"tags": ["resource", "javascript"],
40+
"tags": ["resource", "web", "javascript"],
3041
"series": "",
31-
"createdAt": "2025-04-17 14:40:27",
32-
"modifiedAt": "2025-04-17 15:07:54",
42+
"createdAt": "2025-04-12 09:09:33",
43+
"modifiedAt": "2025-04-18 14:59:35",
3344
"publish": "자원/JavaScript"
3445
},
3546
{
36-
"urlPath": "자원/SWEA 강의 정리노트/SWEA 강의 정리노트",
37-
"title": "SWEA 강의 정리노트",
47+
"urlPath": "자원/JavaScript/var,let,const의 주요 차이점은 무엇인가",
48+
"title": "var,let,const의 주요 차이점은 무엇인가",
3849
"summary": "",
3950
"image": "",
40-
"tags": ["study", "algorithm"],
51+
"tags": ["resource", "javascript"],
4152
"series": "",
42-
"createdAt": "2025-03-19 12:20:41",
43-
"modifiedAt": "2025-03-20 16:17:34",
44-
"publish": "자원/SWEA 강의 정리노트"
53+
"createdAt": "2025-04-17 14:40:27",
54+
"modifiedAt": "2025-04-18 15:01:31",
55+
"publish": "자원/JavaScript"
4556
},
4657
{
47-
"urlPath": "자원/JavaScript/Javascript",
48-
"title": "Javascript",
58+
"urlPath": "자원/JavaScript/데이터 타입과 불변성",
59+
"title": "데이터 타입과 불변성",
4960
"summary": "",
5061
"image": "",
51-
"tags": ["resource", "web", "javascript"],
62+
"tags": ["resource", "javascript"],
5263
"series": "",
53-
"createdAt": "2025-04-12 09:09:33",
54-
"modifiedAt": "2025-04-17 15:08:15",
64+
"createdAt": "2025-04-17 16:02:18",
65+
"modifiedAt": "2025-04-18 15:00:11",
5566
"publish": "자원/JavaScript"
5667
},
5768
{

0 commit comments

Comments
 (0)