4장, 5장, 6장 정리 #1

clicelee · 2024-10-02T03:59:14Z

리뷰 부탁드립니다 :)

clicelee

굿~ 발표 기대할게요

clicelee · 2024-10-02T04:05:24Z

clicelee/4장/4장.md

+그런데, 자바스크립트에서는 *메모리 셀에 직접 접근할 수 없다*
+자바스크립트 메모리에 관한 내용은 [블로그](https://ingeec.tistory.com/126) 참고
+포인터를 사용할 수 있는 다른 언어와는 다르게, 메모리 주소를 통해 값에 직접 접근할 수 없다
+왜냐하면 값이 저장될 때 메모리의 상황에 따라 어디에 저장되는지 임의로 결정된다


이해가 안 가는데 더 자세한 설명 부탁드려요

Turtle-Hwan

고생하셨습니다!!

약간 보기 불편한 점이 있는 거 같아서 github page로 배포하거나 말씀해주신 gitbook으로 해보면 좋을 거 같아요~

Turtle-Hwan · 2024-10-02T04:41:19Z

clicelee/4장/4장.md

+
+## let과 const의 초기값
+>[!warning] 참고
+>let은 자동으로 초기화 되지 않는다. 따라서 초기값이 undefined가 아니다


console에서 해보니까 let도 undefined로 초기화 되는 거 같은데 아닌가요??

교재 45페이지 [예제 4-10] 에서 해당 개념을 테스트 하는 코드를 보여주고 있는 것 같아요. 저도 궁금해서 직접 코드를 실행시켜 보았습니다.

var

console.log(a); a = 100; var a; console.log(a);

결과값

var로 선언된 변수 a가 호이스팅 되어 맨 처음 console .log 에 의해 'undefined'가 출력됨을 알 수 있고, 이후 100이라는 값으로 할당해주므로 두번째 console.log는 할당된 100이 찍힘을 알 수 있습니다 😄

그 다음으로 let을 테스트 해보았습니다

let

console.log(a); a = 100; let a; console.log(a);

결과값

이런!!! 변수 a가 초기화 되기 전에 접근 하였으므로 ReferenceError 오류가 발생함을 확인할 수 있습니다 😢

(틀린 점이 있다면 언제든 정정해주시면 감사하겠습니다!!!!!)

아하 제가 앞뒤 문맥을 잘못 이해한 것 같기도 해요.
저는 호이스팅이 아니라 let으로 그냥 변수만 선언했을 때 undefined가 나오는 걸 생각했던 거였습니다!

https://youtu.be/zdGfo6I1yrA?si=w3XFKlL0uuQKQeJr

let과 var 키워드로 변수를 선언하고 초기화하는 과정을 Environment Record와 Execution Context와 관련지어 설명하는 영상입니다. var로 선언된 변수는 Execution Context의 Creation Phase에 let으로 선언된 변수와 동일하게 hoisting 되지만 각각 undifined, uninitialized 상태로 존재하고, 둘 다 Execution Phase에 재할당 되는 걸 알 수 있어요 😄

추가적으로 const와 let으로 선언된 변수에 대해 접근할 수 없는 부분을 TDZ(Temporal Dead Zone)이라고 하네요.

관련된 ES 문서도 첨부해요 https://tc39.es/ecma262/#sec-declarations-and-the-variable-statement
아직 스펙 읽는 법을 몰라 어렵네요

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

선언시에 초기값이 명시되지않으면 undefined로 초기화 된다고 합니다!

호이스팅은 되지만 TDZ에서는 레퍼런스 에러, 선언문 이후에는 undefined, 할당 후에는 값으로 정리할 수 있을 것 같네요.

Turtle-Hwan · 2024-10-02T04:55:57Z

clicelee/4장/4장.md

+helloWorld(); // "Hello, World!"
+```
+
+함수 표현식의 경우 호이스팅이 발생하지 않는다.함수 표현식은 변수 호이스팅이 발생하기 때문에 변수는 호이스팅되지만 함수는 그렇지 않다.


조금 헷갈리는게 그럼 함수 표현식으로 선언했을 때,
해당 변수 자체는 호이스팅이 발생하나,
함수가 변수에 할당되는 과정은 값 할당처럼 그 코드에 와서 실행된다는 걸로 이해하면 되겠죠?

넵! 저도 그렇게 이해했어요 😃 확실하지 않아서 이것도 한번 직접 작성해보았습니다!

함수 선언문

sayHello(); function sayHello() { console.log("Hello!"); } sayHello();

결과

Hello! Hello!

함수 선언문의 호이스팅의 경우 해당 선언문 전체가 맨 위로 끌어올려지는 효과와 같아서 Hello가 2번 출력됨을 알 수 있어요!!

함수 표현식

sayHello(); let sayHello = () => console.log("Hello!"); sayHello();

결과

/Users/castle_bell/Desktop/TEST/test.js:1 sayHello(); ^ ReferenceError: Cannot access 'sayHello' before initialization at Object.<anonymous> (/Users/castle_bell/Desktop/TEST/test.js:1:1) at Module._compile (node:internal/modules/cjs/loader:1368:14) at Module._extensions..js (node:internal/modules/cjs/loader:1426:10) at Module.load (node:internal/modules/cjs/loader:1205:32) at Module._load (node:internal/modules/cjs/loader:1021:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:142:12) at node:internal/main/run_main_module:28:49

함수 표현식은 sayHello 라는 let변수에 담기게 되다보니, let은 선언만 호이스팅 되어서 초기화 하지 않은 값을 접근하고 있다는 오류가 발생하는 것을 확인할 수 있었습니다!!!

추가적으로 . . .

그럼 var로 받으면??

sayHello(); var sayHello = () => console.log("Hello!"); sayHello();

결과

/Users/castle_bell/Desktop/TEST/test.js:1 sayHello(); ^ TypeError: sayHello is not a function at Object.<anonymous> (/Users/castle_bell/Desktop/TEST/test.js:1:1) at Module._compile (node:internal/modules/cjs/loader:1368:14) at Module._extensions..js (node:internal/modules/cjs/loader:1426:10) at Module.load (node:internal/modules/cjs/loader:1205:32) at Module._load (node:internal/modules/cjs/loader:1021:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:142:12) at node:internal/main/run_main_module:28:49

undefined로 초기화가 되었지만 함수가 아니기에 'sayHello is not a function'이라는 타입 에러가 발생합니다.

console.log(sayHello) var sayHello = () => console.log("Hello!");

위 결과는 undefined가 출력됩니다!!

저 또한 해당 부분의 워딩이 살짝 헷갈렸는데 적어주신 코멘트로 잘 이해할 수 있었습니다 ☺️

console.log(sayHello) var sayHello = () => console.log("Hello!");

적어주신 댓글 중 이 부분이 undefined로 출력되는 것을 확인하였습니다.
그런데 갑자기 console의 메소드에 의문이 생겼습니다.

~~sayHello가 함수 선언이 아닌 var 변수인 함수의 표현식으로 선언되었기에~~
sayHello가 arrow 함수로 선언되었기에
console.log(sayhello())와 sayhello() 실행에 차이가 있을까?(오류메세지가 혹여나 다르려나..)
라는 궁금증이 생겨서 한 번 실행해봤습니다.

console.log라는 console의 메소드는 함수의 이름을 넣게 되면 객체 자체의 정의를 출력하고,
함수의 실행문을 넣게 되면 함수를 실행한 결과를 출력한다는 것으로 알고 있었습니다.

동일한 결과를 출력할 것이라고 생각했는데 결과도 이와 같았습니다!!...

정말 별 건 아니지만 오류메세지의 이유를 생각하며 공부해본 경험이 없어서 유익했습니다~

junepil · 2024-10-03T07:14:53Z

clicelee/4장/4장.md

+ES5부터 식별자를 만들 때 유니코드 문자를 허용하기 때문에 한글, 일본어 식별자도 사용할 수 있다
+책에서는 한글 식별자를 비추천 했다
+
+한편 토스에서는 한글로 짓는 변수를 짓는 *세종대왕  프로젝트*를 진행한 적이 있다


이게 특정 도메인에서는 한글을 영문으로 변환하는 과정과 그 영문명을 이해하는 과정에서 overhead가 너무 심해서 한글을 쓰는 게 괜찮은 경우도 있더라구요. 제가 일하던 곳에 있는 타 팀에서는 한글로 16자 정도 되는 영문변수명을 고민하느니 그냥 한글로 사용하자는 결론이 나서 사용하는 경우도 봤어요.

https://tosspayments-dev.oopy.io/chapters/frontend/posts/hangul-coding-convention

실제 예시입니다 영어권 사람들은 프로그래밍이 이렇게 느껴질까 싶었습니다 부럽네요 하하

junepil · 2024-10-03T07:16:51Z

clicelee/5장/5장.md

+> 
+
+예를 들어 `65`는 단순한 숫자가 아니라 `숫자 리터럴`이다
+js엔진은 65라는 숫자를 보면, 이를 평가(해석)하고, 값 3을 생성하여 저장한다


65라는 숫자를 보고 3을 생성해 저장한다는 게 무슨 말인지 모르겠어요 😢

junepil · 2024-10-03T08:17:15Z

clicelee/4장/4장.md

+
+## let과 const의 초기값
+>[!warning] 참고
+>let은 자동으로 초기화 되지 않는다. 따라서 초기값이 undefined가 아니다


https://youtu.be/zdGfo6I1yrA?si=w3XFKlL0uuQKQeJr

let과 var 키워드로 변수를 선언하고 초기화하는 과정을 Environment Record와 Execution Context와 관련지어 설명하는 영상입니다. var로 선언된 변수는 Execution Context의 Creation Phase에 let으로 선언된 변수와 동일하게 hoisting 되지만 각각 undifined, uninitialized 상태로 존재하고, 둘 다 Execution Phase에 재할당 되는 걸 알 수 있어요 😄

추가적으로 const와 let으로 선언된 변수에 대해 접근할 수 없는 부분을 TDZ(Temporal Dead Zone)이라고 하네요.

관련된 ES 문서도 첨부해요 https://tc39.es/ecma262/#sec-declarations-and-the-variable-statement
아직 스펙 읽는 법을 몰라 어렵네요

junepil

수고하셨어요~ 👍

MinboyKim

고생하셨습니다! 간단하고 쉬워보이는 내용이지만 중요한 내용들이 있는 챕터들이었던 것 같아요. 차후에 컨텍스트, 함수 등에 대해 학습하고 다시 돌아와봐도 좋을 것 같아요 🐧

MinboyKim · 2024-10-03T18:21:38Z

clicelee/6장/6장.md

+    - 스페이스와 같은 공백 문자도 포함하면 안된다!
+- 자바스크립트의 문자열 : 원시 타입 / 변경 불가능한 값이다. 문자열이 생성되면 그 문자열을 변경할 수 없다
+
+# 6.3 템플릿 리터럴


https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter

저만 이 익스텐션 모르고 있었을까요? 진짜 너무 좋음

zziglet

수고하셨습니다!! 좋은 정리글 감사해요☺️

clicelee/5장/5장.md

zziglet · 2024-10-04T05:44:53Z

clicelee/6장/6장.md

+# 6.7 심벌 타입
+
+- 심벌 : ES6에서 추가된 7번째 타입, 변경 불가능한 원시 타입의 값이다
+- 심벌 값은 다른 값과 중복되지 않은 유일무이한 값이다
+    - 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용
+- 심벌 이외의 원시 값은 리터럴을 통해 생성하지만 심벌은 Symbol 함수를 호출해 생성
+    - 이때 생성되니 심벌값은 외부에 노출되지 않으며, 다른 값과 절대 중복되지 않는 유일무이한 값이다
+
+```jsx
+// 심벌 값 생성
+var key = Symbol('key');
+console.log(typeof key); // symbol
+
+// 객체 생성
+let obj = {};
+
+// 이름이 충돌할 위험이 없는 유일무이한 값인 심벌을 프로퍼티 키로 사용한다. 
+obj[key] = 'value';
+console.log(obj[key]); //value


막상 개발할 때 Symbol 타입을 사용해야겠다고 생각한 적이 거의 없는 것 같아요 정의를 확실하게 알게 되어 어떤 상황에 적용하면 좋을 지 조금 감이 잡혔습니다!

맞아요 저도 이 책을 통해서 처음으로 symbol 타입에 대해 알아보게 되었어요
그런데 const를 이용할때와 비교했을때 차이가 뭘까요?

clicelee added 5 commits October 2, 2024 12:54

add: 4장 내용

14dd13a

add: 5장

03d9a49

create: 6장

2c8b8cb

edit: 4장

a4130ff

error: adjust file type to markdown

7a0593a

clicelee commented Oct 2, 2024

View reviewed changes

Turtle-Hwan approved these changes Oct 2, 2024

View reviewed changes

junepil reviewed Oct 3, 2024

View reviewed changes

clicelee added 2 commits October 4, 2024 00:47

add: 6장

980b050

chore: create .gitignore file

86cd2c9

junepil approved these changes Oct 3, 2024

View reviewed changes

MinboyKim self-requested a review October 3, 2024 17:39

MinboyKim approved these changes Oct 3, 2024

View reviewed changes

zziglet reviewed Oct 4, 2024

View reviewed changes

clicelee added 2 commits October 4, 2024 15:53

edit: typo

78397b5

chore: edit file name

2bc405a

clicelee merged commit a120754 into main Oct 5, 2024

clicelee self-assigned this Nov 7, 2024

clicelee added the documentation label Nov 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

4장, 5장, 6장 정리 #1

4장, 5장, 6장 정리 #1

clicelee commented Oct 2, 2024 •

edited

Loading

clicelee left a comment

clicelee Oct 2, 2024

Turtle-Hwan left a comment

Turtle-Hwan Oct 2, 2024

whddltjdwhd Oct 2, 2024 •

edited

Loading

Turtle-Hwan Oct 2, 2024 •

edited

Loading

junepil Oct 3, 2024

MinboyKim Oct 3, 2024 •

edited

Loading

Turtle-Hwan Oct 2, 2024

whddltjdwhd Oct 2, 2024 •

edited

Loading

zziglet Oct 3, 2024 •

edited

Loading

junepil Oct 3, 2024

MinboyKim Oct 3, 2024 •

edited

Loading

junepil Oct 3, 2024

junepil Oct 3, 2024

junepil left a comment

MinboyKim left a comment

MinboyKim Oct 3, 2024

zziglet left a comment

zziglet Oct 4, 2024

clicelee Oct 4, 2024

4장, 5장, 6장 정리 #1

4장, 5장, 6장 정리 #1

Conversation

clicelee commented Oct 2, 2024 • edited Loading

clicelee left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Turtle-Hwan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

whddltjdwhd Oct 2, 2024 • edited Loading

Choose a reason for hiding this comment

var

결과값

let

결과값

Turtle-Hwan Oct 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MinboyKim Oct 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

whddltjdwhd Oct 2, 2024 • edited Loading

Choose a reason for hiding this comment

함수 선언문

결과

함수 표현식

결과

추가적으로 . . .

결과

zziglet Oct 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MinboyKim Oct 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

junepil left a comment

Choose a reason for hiding this comment

MinboyKim left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zziglet left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

clicelee commented Oct 2, 2024 •

edited

Loading

whddltjdwhd Oct 2, 2024 •

edited

Loading

Turtle-Hwan Oct 2, 2024 •

edited

Loading

MinboyKim Oct 3, 2024 •

edited

Loading

whddltjdwhd Oct 2, 2024 •

edited

Loading

zziglet Oct 3, 2024 •

edited

Loading

MinboyKim Oct 3, 2024 •

edited

Loading