[코딩만화] Scope가 뭔가요? (feat: let, const, var의 차이)

#자바스크립트 #전역변수 #호이스팅
시골지와 서울쥐 이야기를 통해 풀어보는 scope.
코드의 스코프가 메모리와 어떤 연관이 있는지,
추가로 자바스크립트의 옛 잔재인 var에는
어떤 특성과 유의점이 있는지도 영상으로 알아본 뒤
영상에 다 담아내지 못했던 부분을 아래의 추가설명으로
좀 더 살펴보겠습니다.
보충설명 링크: github.com/yal...
= = =
🏠 얄코사이트: www.yalco.kr
🛒 개발자스티커 구매: smartstore.nav...
🎥 가장 쉬운 Git 튜토리얼: • [고정댓글필독] 가장 쉬운 Git 강좌 ...
🎥 포인터 쉽게 알아보기: • 포인터가 뭐고 왜 쓰는건가요?
🎥 객체지향에 대해 알아보기: • [구버전, 고정댓글 필독!!] 객체지향 ...
🎥 객체지향 디자인 패턴: • 객체지향 디자인패턴 1
🎥 함수형 프로그래밍이란?: • 함수형 프로그래밍이 뭔가요?
🎥 쿠키 vs 세션 vs 캐시: • 쿠키, 세션, 캐시가 뭔가요?
🎥 프로세스와 스레드: • 프로세스는 뭐고 스레드는 뭔가요?
🎥 비동기 프로그래밍: • [코딩만화] 비동기 프로그래밍이 뭔가요?
🎥 REST API 알아보기: • [구버전 - 고정댓글 필독] REST A...
🎥 GraphQL 알아보기: • [고정댓글 필독] GraphQL이 뭔가요?
🎵 엔딩송 : 권민호, 김한영 - Let's Dance
🎼 자료출처 : gongu.copyrigh...
🎼 Music promoted by DayDreamSound : • Video

[@yalco-coding]

아래는 var의 함수 스코프에 대한 보충설명입니다! let vs. var의 차이를 이해하는데 중요한 내용이니 참고해주세요. www.yalco.kr/27_scope/

[@sha1373]

하나 질문 드려도 될까요? 보충설명을 읽어 봤는데, for 문 안에서 setTimeOut 함수가 실행되는 부분이 헷갈려서요. 하단에 설명해주신 내용인데요. '***'1초 간격'으로 0, 1, 2... 이렇게 나오는 게 아니에요. for문은 한 번에 '쫘라락' 돌고 그 순간으로부터 1초를 재는거니까 함수 호출 뒤 1초 후에 한꺼번에 '쫘라락' 나오는거죠.*** 저는 이제까지 for 문을 한 번씩 돌때마다 안에 내용이 실행되고, i 가 증가하고 다시 내용이 실행되고.. 이런 식인줄 알고 있었는데, 제가 잘못 알고 있었던 건가요? 아니면 setTimeOut 함수와 뭔가 관련이 있는 건가요?

[@LacrimosaDiesIlla_1791]

이렇게 쉽게 설명하시다니.. 자주 안 올라오는게 아쉽군요

[@yalco-coding]

ㅠㅜ 얼마간은 바쁘지만 이후 더 자주 올릴 수 있도록 할게요! 감사합니다!!!

[@사이다콜라-e2p]

스토리텔링 무엇ㅋㅋㅋㅋㅋㅋ

[@너만빼고]

알 수 없는 알고리즘이 저를 여기로 이끌었으나.. 영상을 보고 필연이라고 느낍니다. 구독합니다. 좋은 영상 감사해요~!

[@yalco-coding]

감사합니다!!!

[@팀착맨]

아... let == rat 을 통한 명쾌한 설명!!ㅋㅋㅋㅋㅋㅋㅋ

[@yalco-coding]

ㅎㅎ 감사합니다!!

[@매미-p9h]

가끔 개그코드에 적응이 덜돼서 흠칫놀라지만..! 어려운 공학적 개념을 누구나 알수있도록 전달하려고 하는 행위와 노력이 정말 좋다못해 감동스럽네요.. 크게 흥하세요 화이팅!

[@yalco-coding]

ㅠ 아재개그 힘드실텐데 좋게 말씀해주셔서 감사합니다!!

[@oana1955]

감탄하면서 봤습니다.. 천재신 것 가타요

[@latchulatu]

와.. 엄청나네요.. 초,중,고등학생들 대상으로 코딩교육사업하시면 대박나실듯해요. 어려운부분을 쉽게 예를들고 스토리를 만들어서 설명하고 관련영상을 제작하시는데에 탁월한 재능이 있으신것 같습니다. 출판사와 교육부에서 이런분을 모셔야 할텐데... 영상 정말 잘봤습니다.

[@yalco-coding]

ㅠㅠ 감사합니다!!

[@유지니아]

진짜 애매하게만 아는것들을 확실하게 알게되는게 너무 좋네요. 뭔가 최소한의 기초를 알고 가니까 나머지도 더 나아가는데 용기가 생기네요. 요새 더 나아가는데 있어서 너무 고민이 많아서 자꾸 찾아보게 되는데 다른곳은 너무 어려웠었거든요. 너무 도움이 되서 광고도 안 건너뛰어요!

[@yalco-coding]

오오 ㅠㅠ 감사합니다!!!

[@jeongseongchae]

유익하고 재미까지!! 감사해요 ㅎ

[@yalco-coding]

감사합니다!!

[@Noah-ek4dm]

꼭 필요한 정보였는데 와 진짜 감사합니다 ㅠㅠ

[@yalco-coding]

감사합니다!

[@임채윤-m8x]

const가 상수로 쓰인다는 것만 알았는데 let과 var에 이런 차이가 있다는 건 처음 알았네요. 앞으로 백엔드 쪽은 꼭 let을 사용하려고 할게요!! 좋은 강의 감사합니다ㅎㅎ

[@Kiki-zc3mh]

너무웃겨요 ㅋㅋㅋㅋㅋ 잘봤습니다! 개념도 명확해지고 진짜 최고👍

[@yalco-coding]

감사합니다!!

[@lgh91]

자바스크립트 실행 컨텍스트에 대한 설명도 해주시면 좋겠어요 ㅎㅎ

[@쉽게알려주는남자]

코딩은 기본인데, 이를 쉽게설명하기 위한 인문학적 소양까지 갖추신 강의라 그런지 참 이해하기 쉽네요

[@ldrn8296]

정말 감사드려요! 프로그래밍을 배우긴 했는데 머리속에 정확히 정리 되지 않았던 내용들이 깔끔하게 정리되어 좋아요 ㅠㅠ!! 자주자주 올려주세요!! *라이브러리, api, 프레임 워크 의 차이점도 알려주시면 감사하겠습니당~

[@jisuw2747]

저도 var, let, const의 정의를 깊게 이해를 못하고 있었는데 이 영상 덕분에 이해하는데 훨씬 수월해지네요 감사합니다 ㅎㅎ 그리고 호이스팅도 그렇고 브로마이드 등.... 모르고 있었던 부분도 덕분에 알고 갑니다~~

[@yalco-coding]

감사합니다!

[@sbl6362]

이 댓글을 발견하셨다면 아래 내용을 보고, 얄팍사전님이 정리해신 내용을 요약하고, 추가로 정리해봐요! :3 (호이스팅) == 호이스팅의 의미 자체는 코드에 선언된 변수 및 함수를 코드의 상단으로 끌어올려, 해당 변수 및 함수 유효범위의 최상단에 선언하는 것으로 정의되고 있어요. 자바스크립트에서 소스 코드를 실행하는 과정은 생성 단계, 실행 단계로 구분할 수 있어요. 생성 단계 : 코드를 순차적으로 실행하기 전, 실행 컨텍스트를 생성하면서 여러 식별자들을 스캔하며 준비하는 단계 실행 단계 : 스캔 후, 선언문 외의 나머지 코드를 순차적으로 실행하는 단계 == JavaScript Parser(엔진)은 코드를 실행하기 전에 함수 안을 훑으면서, 실행 가능한 코드를 형상화하고 구분하는 과정을 거쳐요. 이것은 실행 컨텍스트를 위한 과정이에요 이 실행 컨텍스트를 위한 과정에서 발생하는 것이 호이스팅이에요. 즉, 위에서 언급한 생성 단계에서 스코프 안에 존재하는 선언된 식별자들에 대한 정보를 기억하기 위해, 아래쪽에 존재하는 내용 중 필요한 변수와 함수의 선언을 스코프 범위의 최상단으로 내부적으로 끌어올려 처리하는 것이 바로 호이스팅이라고 볼 수 있어요. 스코프 상단에 선언부들이 내부적으로 끌어올려지는 것이기 때문에, 자바스크립트의 모든 선언에는 호이스팅이 일어난다고 볼 수 있어요. var 변수 선언과 함수 선언문은 호이스팅이 정상적으로 동작하는 것으로 보이지만, let, const, class를 이용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작해요. 이것들을 이제 천천히 살펴보도록 해요. == var 키워드로 선언된 변수를 호이스팅하는 경우, JavaScript Parser(엔진)은 선언과 함께 undefined로 변수를 초기화해, 메모리에 저장해요. 변수는 3단계에 걸쳐 생성되는데, var 키워드로 생성된 변수는 선언과 초기화 단계가 함께 일어나요. 즉, 스코프에 변수를 등록(선언 단계)하고 메모리에 변수를 위한 공간을 확보한 후, undefined로 초기화하는 과정이 함께 일어난다는 뜻이에요. 따라서 선언문 이전에 해당 변수에 접근하더라도, 스코프에 호이스팅된 변수가 존재하기 때문에 에러가 발생하지 않아요. 초기화과정에서 저장한 undefined를 반환하기 때문이에요. 이후 변수 할당문에 도달하면 해당 변수에는 비로소 값이 할당되요. 아래는 변수 생성단계에 대한 내용이에요. 읽어보고 넘어가도록 해요. 선언 단계 - 변수를 실행 컨텍스트에 등록해, JavaScript Parser(엔진)에 변수의 존재를 알리는 단계 - 이 변수 객체는 스코프가 참조하는 대상이 되요. 초기화 단계 - 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보하는 단계 - 이 단계에서 변수는 undefined로 초기화되요. 할당 단계 - undefined로 초기화된 변수에 실제 값을 할당하는 단계 == let, const 키워드로 선언된 변수들도 var 키워드로 선언된 변수처럼 JavaScript Parser에 의해, 선언문이 해당 스코프의 최상단으로 끌어올려지기 때문에 호이스팅이 일어난다고 볼 수 있어요. 즉, 선언이 코드 실행 이전에, 메모리에 저장되는 과정은 맞다는 의미에요. 하지만, var 키워드로 선언된 변수와는 다르게, let, const 키워드로 선언된 변수들은 호이스팅이 발생하지 않는 것처럼 동작해요. 왜냐하면 초기화되지 않은 상태로 선언 자체만 메모리에 저장되기 때문이에요. let, const로 선언된 변수의 경우, var로 선언된 변수와는 다르게 선언 단계와 초기화 단계가 분리되어 실행되요. JavaScript Parser(엔진)가 식별자를 기록하긴 하지만 값을 초기화하지 않기 때문에 선언문 이전에 식별자 값을 참조하려 하면 Reference Error가 발생하는 것이에요. 이렇게 let, const으로 선언되는 변수의 경우, 스코프의 최상단 지점으로 끌어올려진 선언부 지점이 아니라, 변수를 실질적으로 선언하는 라인을 실행하기 이전에는 식별자를 참조할 수 없다는 특징이 있어요. 이 참조 불가능한 구역을 일시적 사각지대(TDZ : Temporal Dead Zone)라고 해요. == 함수를 표현하는 방법 중, 변수에 함수를 담아 함수를 선언하는 방식이 있어요. 이를 함수 표현식이라고 해요. 함수를 변수에 담고있기에, 변수 호이스팅과 똑같이 동작해요. var 키워드로 선언한 경우에 선언문 이전에 함수를 실행하려 하면, undefined가 저장되어 있기 때문에, 이 데이터 타입은 호출될 수 없어요. 따라서 Type Error가 발생해요. let, const 키워드로 선언한 경우에 선언문 이전에 함수를 실행하려 하면, 초기화 단계를 거치지 않았기 때문에, Reference Error가 발생해요. 함수 표현식과 달리, function 키워드로 함수를 선언하는 함수 선언문은 동작방식과 그 결과가 조금 달라요. 함수 선언문 방식으로 함수를 선언하는 경우에는, 호이스팅이 JavaScript Parser(엔진)가 함수 선언과 동시에, 완성된 함수객체를 생성해 환경 레코드에 기록하는 방식으로 이루어져요. 즉, 함수의 선언 자체가 코드의 최상단으로 끌어올려진다는 뜻이에요. 이러한 함수 선언문 방식은 선언과 동시에 함수가 생성된다는 특징을 가지기 때문에 에러없이 실행되요.

[@이소민-j8h]

✏ 4:46 var~변수 6:00 hoi~sting 8:00 var~변수들은 함수 스코프를 가짐

[@Nietzsche___]

제가 왠만하면 댓글 잘 안다는데 너무 git똥차서 댓글 남기고 갑니다 scope 설명이 어마어마하네요 진짜 어디 강사로 가셔야할거같은데 영상 너무 잘 보고 있습니다..!!!! scope 하셨으니까 closure도 한번 다뤄주시면 너무 좋을거같습니다~!

[@yalco-coding]

감사합니다!! 어려운 개념이고 쓰임도 때마다 다르지만 클로져도 준비해볼게요!!

[@sha1373]

가끔씩 나오는 아재 개그 재밌어요ㅋㅋㅋㅋ 설명도 명쾌하고! 감사합니다.

[@yalco-coding]

ㅎㅎㅎ 감사합니다!!

[@c_8285]

와 이번건 역대급이네요 ㅋㅋㅋㅋ 진짜 고생 많으셨어요... 애니메이션으로 만들다니...

[@yalco-coding]

감사합니다!!

[@이지섭-h4v]

와ㅋㅋㅋㅋㅋ 한학기 강의 듣는거보다 이해가 훨씬 잘 되네요 감사합니다!!

[@yalco-coding]

감사합니다!!!

[@apotatos2251]

처자식이 있는 상수라 붙박이다.. 깊이 공감하고 갑니다

[@jocoding]

재미있는 설명과 상세한 보충설명까지 너무 잘봤습니다!ㅎㅎ

[@yalco-coding]

조코딩님 재밌게 봐주셔서 감사합니다!!

[@wpkg8414]

심각하게 재밌어요.. ^^

[@w00hyun]

예비군 다녀오셨나욬ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

[@w00hyun]

너무 레전드인 영상이라 노딱이 붙을거같은기분

[@yalco-coding]

헉 ㅠ 감사합니다 ㅎㅎ

[@climaXchelsea]

설명이 진짜 탁월하시네여... 좋은 영상 감사합니다!!

[@yalco-coding]

감사합니다!!

[@hia8404]

재밌어서 절대 안잊을것같아요 ㅋㅋㅋ 이번에도 쉬운 설명 감사합니다 XD

[@yalco-coding]

감사합니다!!

[@minsukoo1538]

0:33 피떡듣고 뿜어버림

[@nikomin25]

3:34 고양이없다고양이없다

[@osj7979]

와... 정말 대단합니다.. 설명도 간결하고 스토리도 참신합니다. 유머코드까지.. 최고!!

[@yalco-coding]

감사합니다!!!

[@eunwoo5237]

너무 잘만드셨네요!! 0.75배속으로 들었더니 이해가더 잘돼요 ㅎㅎㅎ 어떻게 이렇게 기발하게 잘 설명하시죠

[@yalco-coding]

ㅠㅜ 감사합니다!!!

[@blue_black]

1:08 ㅋㅋㅋㅋㅋ

[@릴롱궤]

트림... 직접 녹음하신건가요? ㄷㄷㄷ

[@yalco-coding]

그건 유튜브에서 사운드이펙트 검색했어요 ㅎㅎ

[@김기훈-s1q]

정말 어려운 내용들을 이해가 쏙쏙~ 가게 쉽게 설명해 주시는 것 같습니다. 컴퓨터계의 설민석이십니다.

[@닝겐노고미]

박수를 양손으로 치는걸로는 모자랄거 같아서 발로도 치고 있습니다

[@햄시기-u2v]

쌩떽쥐가 너무 웃갸욬ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

[@progress0407]

와.. 진짜 얄코님은.. 천재신 것 같아요... 정말 천재란 말밖에 못하겠습니다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

[@yalco-coding]

ㅠ 감사합니다!!

[@미선오-k5w]

😂

[@JunpilByeon]

혹시 영상 내용을 제 개인 블로그에 정리를 해둬도 될까요!

[@yalco-coding]

물론입니다 😀

[@user-xc5tq4nm4k]

얄코님 클로저도 알려주실 수 있으신가요!

[@yalco-coding]

준비해보도록 할게요! 감사합니다!!

[@dsoek4073]

아니 ㅋㅋㅋㅋㅋㅋㅋ연기가 전공이세요?ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ아니면 다중인격?ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ영상 볼때마다 연기를 너무 잘하셔서 영상이 더 감칠맛나고 재미있네요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

[@chaewonseo8391]

너무너무 재밌어요 ㅠㅠㅠ광고 많이 넣어주세요!!! 너무 감사합니다♡

[@yalco-coding]

감사합니다!!

[@yerihahn4679]

ㅠㅠ 고맙습니다. 영상으로 이해가 좀 됬어요...

[@yalco-coding]

감사합니다!!

[@small_cow]

와 진짜 보면서 감탄햇습니다 ,이건 거의 아동들이 보면서 교육해도될정도로 재밋는데요

[@yalco-coding]

감사합니다!!

[@myungjinbae2685]

리얼 git똥차시네요 ㅋㅋ

[@yalco-coding]

감사합니다!!

[@민찬-s5w]

오예스 사브레 다이제 초코.. 항상 좋은 영상 감사하다는 말이죠!

[@ryokuman1916]

내가 이걸 중, 고등학생때 봤었더라면.. 대학 공부가 참 재미있었을텐데 왜 몰랐을까요

[@정유진-d3y8y]

너무 재밌어서 웃으며 봤어요ㅎㅎ😂

[@yalco-coding]

재미있게 봐주셔서 감사합니다!

[@성이름-d3x1t]

막연히 추상적 개념으로 외우기만 하다가 이렇게 시각화. 이 정도로 설명하시려면 정말 이해가 제대로 되어 있어야 가능할 듯 싶네요. 너무 강의 잘 듣고 있습니다~!!

[@moonshy5603]

너님 천재세요? ㅋㅋㅋ 약 먹었나봐 ㅋㅋㅋ

[@이춘우-b8c]

혹시 청개천에서 온 생떽쥐 등장할때 음악의 이름이 어떻게되나요?

[@yalco-coding]

kzbin.info/www/bejne/ZqSkn2OHZZmJi6c 프랑스영화 아멜리에 OST입니다 ㅎㅎ

[@jennerlee8191]

이해가 쏙쏙 되네요 ㅎㅎ잘보고 갑니다!

[@yalco-coding]

감사합니다!!

[@kangzzing]

얄코는 치트키라고 생각합니다...

[@yalco-coding]

감사합니다!!

[@알비노]

아 마지막 빠리바게트에 피씩했네ㅋㅋㅋㅋ

[@Big_mouse00]

돈 더줘야하는거 아니야??? 진짜 하고 싶게 만들었네 구름 써봐야지

[@김정원-s5r]

역시 대단

[@yalco-coding]

감사합니다!

[@서울_9반_김노아]

재밌어욬ㅋㅋㅋㅋㅋㅋㅋㅋ

[@yalco-coding]

감사합니다!

[@힝구-i8h]

효과음들 너무 취저입니다.. 동화마냥 재밌네요

[@yeonkor3032]

솔직히 애니매이션 재능이 뛰어나십니디

[@yalco-coding]

감사합니다!!

[@thearguer5492]

간츠 아시는구나!

[@yalco-coding]

재밌게 봤어요 ㅎㅎ

[@MrKimNeo]

에디터에 어떤 폰트를 사용중이시나요?

[@yalco-coding]

VS코드 맥버전인데 딱히 폰트를 바꾸진 않았어요 🙂

[@MrKimNeo]

@@yalco-coding 답변감사합니다. 애플쪽이 확실히 폰트나 디자인쪽으로는 상당히 우수하네요. 맥 기본코딩폰트 찾아보니 monaco 아니면 menlo라고 그러는데 menlo에 가까운것 같아보입니다.

[@최재욱-t6w]

ㅋㅋㅋㅋㅋ

[@Happy-D365]

오 진짜 궁금했던건데 쉬운 설명 감사합니다

[@미누-r3t]

와 너무 정리가 잘 됐어요 감사합니다 최고

[@woosonho]

부..부끄럽...

[@yalco-coding]

헛 ㅋㅋㅋㅋ

[@xD-gf4gi]

자세한 설명 너무 감사합니다! git 영상 보다가 채널 정주행 했네요 ㅋㅋ 혹시 시간 되시면 nginx나 apache 같은 웹서버 소프트웨어가 무슨 역할을 하는지 설명 부탁드려도 될까요? 어떤 일을 하는지 검색해봐도 잘 모르겠네요 ㅠㅠ

[@yalco-coding]

그 영상들도 기획중에 있어요! 당장은 아니지만 머지않아 보여드릴 수 있도록 하겠습니다!!

[@꿀빨꿀빨]

너무 잘봤습니다~

[@notnull-qe7er]

why not change the world?

[@yalco-coding]

오오 반가워요, 동문님!! ㅎㅎ

[@정동준-b7i]

간츠ㅠㅋㅋ

[@icis80]

아 .. 전역변수가 그 뜻이구나

[@kimmin36944]

간츠같은...

[@KimKim-sm2ru]

체고체고!!!

[@evil-ebifry]

v~ar

[@정원사망자]

어우 ㅋㅋ 미간 안힘드세요??

[@yalco-coding]

그러게요 ㅎㅎ 영상찍을때 저도 모르게 저러네요

[@ninana8400]

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

[@pat1ss1er]

이래서 오래된 학원이나 웹디자인기능사같은데선 var만 가르친거군요.. Const let 잘보고 갑니다 함수도 const로 선언하는게 좋나요? 아시는분 댓글 감사합니다

[@yalco-coding]

네, 변경할 일이 있느냐에 따라 let 아니면 const를 씁니다. 이 채널의 최신 영상인 자바스크립트 강좌에서 자세히 배우실 수 있어요 🙂

[@pat1ss1er]

@@yalco-coding 감사합니다 구독 넣구감니당^^♡