쉐도잉 연습: 10 JavaScript Interview Questions You HAVE TO KNOW - 영상으로 영어 말하기 배우기

레슨 만드는 중...
1
If I was going to give you a JavaScript focused interview, would you be able to answer these 10 questions?
2
Let's talk about it.
3
There has almost never been a more important time to be prepared for your interviews than right now, with layoffs and searching for next jobs.
4
Being able to go in and nail a technical interview is incredibly important.
5
So I found this article on 10 interview questions every JavaScript developer should know in 2024.
6
I have a link to the full article you can go and read from Eric Elliott.
7
But what I'm going to do is just kind of walk through these 10 and talk about them a little bit, and then give you a little bit of my perspective of whether
8
or not these are things you should take super seriously and how deep of knowledge you should have into each one.
9
Now, before we get into this, I do want to share that I'm working on building a template
10
and a mini course on how to do better in your tech interviews.
11
So if you're interested in updates on what I'm working on, sign up for my newsletter at JamesQQick .com and scroll all the way to the bottom.
12
All right, let's start with number one.
13
And this is what is a closure?
14
Now closures are kind of interesting because it's not something that I think about all that often.
15
It's not a term that I use very often.
16
But it is one of those core like tricky parts of JavaScript questions that I feel like you see a lot.
17
So what is a closure?
18
Well, a closure is basically defining a function inside of some parent scope.
19
And that function is going to continue to have access to the things that are defined or inside of its parent scope.
20
So let's see an example here.
21
We have a function called createSecret.
22
It takes a parameter of secret and this function returns an object, which then has two functions, a getter and a setter for that secret.
23
Now, the whole key to closures is that these inner functions that are returned will still have access to this original parameter.
24
from its parent scope, which is the containing function.
25
So if we call create secret, we get back the my secret object, and then we can call its functions like get secret, and it will return that original thing that was that was passed in.
26
Now, again, this is not something...
27
I think about a lot.
28
This is not something that comes up in my code, but there is one key implication here that I think you need to know.
29
And that is that these variables are live references to the outer scoped variable, not a copy.
30
What that means is if you were to then inside of this return function, change that original value, that value is changed associated with that that variable,
31
and it's not a copy of it.
32
So we'll change the original one.
33
So that's something interesting to note.
34
Common use cases here.
35
You'll see this in data privacy, basically encapsulation.
36
so that people can have access to a counter, but not necessarily have direct access to the properties inside of it.
37
So you won't have a direct reference to the count property.
38
You will have a reference to these functions that then have a reference to this.
39
Now, again, this is not something that I've used very often, but it is something that comes up a lot when you're building libraries in JavaScript or something like that.
40
So anyway, this is definitely a core topic for you to know and explain.
41
This is another really good one.
42
This is a pure function.
43
And basically the answer to this is fairly simple.
44
When you call this function and pass in the same parameters, you should get the same results each time.
45
So that is the word there is deterministic.
46
So same input means same output.
47
And it also means no out, outside effects.
48
And that means don't change state anywhere else in the application
49
when you call this function only work with the things that are inside of the function itself.
50
So an example of non -deterministic functions, one would be a random number generator.
51
You call random number generator, it's going to give you a different answer every time.
52
That's kind of the point.
53
And then examples of side effects, modifying an external variable global state, for example.
54
And they also mentioned on here logging to the console.
55
I personally wouldn't consider that to be a side effects.
56
I'm not like changing state anywhere.
57
I'm just logging to the console.
58
That may be up for debate.
59
I don't really know.
60
But there's a couple of different, a couple of different examples in here for side effects.
61
So, Deterministic, same input, same output, and no side effects.
62
If you get into something like Redux, all the reducers there must be pure functions.
63
So if you've done Redux, which I've done very little, then you're probably pretty used to that pattern.
64
Now the next question is, what is function composition?
65
Function composition is something I never think about.
66
It's not a term that I use.
67
I've never defined this for anyone, but it is an interesting concept in JavaScript.
68
based on the next two questions that we'll talk about, because it is relevant to that.
69
But function composition is basically taking multiple functions and putting them together and returning a function that leverages those original functions.
70
So in this case, we have compose, it takes two functions, And then we return a function.
71
that calls the inner function first and then the outer function with the result of the inner function.
72
Now, again, I don't I don't see myself like writing this type of code.
73
almost ever.
74
It's not something I've really done.
75
I don't really expect that to come up much in interviews.
76
but could be relevant to these next couple of questions.
77
So what is functional programming?
78
This is core to what people think about JavaScript being.
79
But I do think there's one important thing that you may not know is JavaScript can be a functional language.
80
It also can be an object -oriented programming language.
81
So it can be used as either one of these, although we mainly associate JavaScript with a functional programming language.
82
So functional programming language basically uses functions as the unit of composition.
83
Again, function composition, that being relevant in the functional programming world.
84
I So they have a few different key aspects here.
85
Immutability, this is a big one in JavaScript.
86
Immutability says don't change the original thing.
87
but assign that basically to a new one.
88
So if you think about array functions, those are typically immutable or arrays are typically immutable,
89
where the array functions don't mutate the actual array itself.
90
Now, that's not the case for every function.
91
So you have to actually pay attention to which functions do mutate the original array and which ones don't.
92
But in general, we look for ones that don't.
93
We also have higher order functions, a function that accepts a function and returns a new function.
94
and then not having a shared mutable state.
95
So going back to the idea of pure functions, you don't have this, broader state that you can go and change.
96
And if we think about in React, this actually comes up when we use the use state hook.
97
You can't just change that state because React won't know about it.
98
React only knows about a change to that state
99
if you call the set state function and give it a brand new state.
100
So instead of updating existing state, you take that state, you use it to create a new state and then you set the new state.
101
Now, this one is probably the most important one on this list, and it's what is a promise?
102
And I would go even deeper.
103
to what is asynchronous programming, how does asynchronous JavaScript work, whatever combination of that you want.
104
And so it's interesting
105
or it's essential to be able to understand a promise from the perspective of the state of a promise pending fulfilled rejected.
106
It's important to know how to handle that from a dot then dot catch, etc. It's important to talk about chaining promises together.
107
And then I would even go into more modern syntax with async await.
108
I only use async await when I work with promises.
109
So this is something I would use all the time.
110
Now, if you want to know like a little hack to get better at understanding how promises work, The hack is to go and build a promise yourself,
111
which I think a lot of people don't actually take the time to do.
112
So if you want to better understand how promises work, go and do this as an exercise.
113
Build it yourself, and then you'll learn more about how you actually work with promises
114
because you understand how they work as a whole.
115
Now this is number six is probably the second most important topic on here and that is what is TypeScript.
116
TypeScript is becoming so so popular.
117
If you look at jobs for React or any other framework you're probably seeing TypeScript be associated with that as well.
118
So my recommendation for people after you have.
119
decent JavaScript knowledge, you've worked with a framework, now go into TypeScript.
120
That's the next layer of something that I think is almost essential in the workforce now.
121
getting into jobs with JavaScript.
122
So you can give kind of the stereotypical definition.
123
It's a superset of JavaScript, blah, blah, blah.
124
Basically, the big thing is it gives you static typing or strong typing for your variables.
125
It also then gives you more support in your IDE from IntelliSense and auto completion documentation,
126
etc. You can also specifically use this word, transpiled, TypeScript is transpiled into JavaScript,
127
which allows it to run in any browser.
128
You could talk about a lot of different things in here.
129
What I would want you to do is talk about how you've used TypeScript and what you thought about it, how it helped you.
130
So make sure you actually have a project that you've used it on.
131
so that you can talk about it intelligently.
132
Now, number seven is kind of, to me, up for debate, which is what is a web component.
133
I've never specifically used web components, I see people talk about them,
134
but they haven't gotten the level of usage that I would expect to make this a common question.
135
Now, the caveat to this is if the company that you're interviewing with uses web components, you should be going and researching what web components are.
136
But if you don't have that specific knowledge, Web components is something I would probably skip over a little bit.
137
I don't think this is as important.
138
I think there's other topics that are more important.
139
So I would probably skip that one.
140
Now if you're doing something in the React ecosystem, this is an absolute essential, which is what is a React hook.
141
So I would give examples of what are some of the ones you've used, useState and useEffect.
142
Those are by far the two most common.
143
I think extra points goes to people that have used additional ones like contacts like ref reducer, et cetera.
144
I think going a little bit deeper there is super important.
145
And I think writing custom hooks and being able to explain those is also really important.
146
And then maybe you could take it one step further
147
and talk about creating a custom hook inside of the react context API, so that you can access this from different components across your application.
148
I think that would be a great example to go a little deeper into.
149
I think One additional thing to know is what are the potential negative implications with use effect?
150
How do you get into infinite loops, for example?
151
Have any example that you can talk about with that I think would be really good as well.
152
Now this next question, how do you create a click counter in React?
153
If you're applying for something with React or you say you have experience with React, This to me seems way too basic.
154
I would expect you to be able to do a lot more, even if it's live coding.
155
than just this piece right here.
156
This is like this, the Hello World component that you see in every framework.
157
I would expect you to be able to go a lot farther and deeper into this.
158
So although this is like, yes, you should be able to do this, I think don't just set the bar that low.
159
You should be able to do a lot more and talk about much.
160
bigger, deeper, impactful components that you've worked on in your applications.
161
Now, the last one here is test driven development.
162
And I do think testing is important.
163
I think that's something that a lot of companies are looking for.
164
I also think test -driven development is some people love it.
165
Some people hate it.
166
I think it's kind of a 50 50 thing, and I don't think I wouldn't expect the majority of companies to be looking for experience in test driven development.
167
But that said, I think you should be able to talk about what it means and what the pros and cons are.
168
So in this case, they talk about the benefits, code coverage, improved API design, fewer bugs, better code quality, etc. The flip side of this,
169
though, is I think the only way you get those benefits is if everyone is fully on board.
170
If you have people writing code that are not doing TDD on your team, you're kind of messing it up for everyone.
171
So culturally, everyone has to be on board for this to work.
172
So we talk about the steps here, write a test first, write the implementation and then make sure that the test passes.
173
It's not that hard.
174
And I don't think you have to, to be able to answer this question.
175
I wouldn't say you have to have hands on experience doing TDD.
176
Just know what it is and what the concept is.
177
I think this is key to all of these questions.
178
If they ask you, why would you use or what are the benefits of blah, blah, blah?
179
I would also have prepared.
180
What are the challenges with this thing?
181
Or what are the downside?
182
Because there's always trade offs. with everything.
183
And I think this is a good call out here to what are the challenges with TDD, specifically the learning curve.
184
It's time consuming because you're writing more tests, et cetera.
185
So I think focusing on both the pros
186
and the cons for any question that you want to be able to answer is super, super important.
187
So anyway, those are 10 questions that you should consider for your next JavaScript developer interview.
188
But the most important thing is, and the number one thing you should do is go and do your research first as to what to expect.
189
before you then come back and look at this list.
190
So if you have any upcoming interviews, make sure you ask what to expect and backtrack and prepare based on that.
191
But that said, how did you feel about this list?
192
What do you think was missing?
193
What are some of the essentials in JavaScript that you should be able to answer in your technical interviews going forward?
194
Let me know in the comments below.
195
If you're interested in getting better at your tech interviews, I am working on a template worksheet and a mini course or ebook I haven't decided.
196
So if you want to follow along check that out at James Q.
197
Quick updates.
198
Check that out at James Q.
199
Quick updates.
200
Check that out.

이 수업에 대해

이번 수업에서는 JavaScript 인터뷰 질문과 관련된 내용을 다룹니다. Learners는 이 강의를 통해 JavaScript의 핵심 개념, 특히 클로저(closure)와 순수 함수(pure function)에 대해 배울 것입니다. 이 주제들은 기술 인터뷰에서 자주 등장하므로, 학습자들은 이를 통해 자신감을 키우고 효과적으로 준비할 수 있습니다. 또한, 영어 발음 교정에 도움을 줄 수 있는 다양한 표현도 익힐 수 있습니다.

주요 어휘 및 구문

  • 클로저 (Closure): 함수가 부모 범위의 변수에 접근할 수 있는 상황.
  • 순수 함수 (Pure Function): 동일한 입력에 대해 항상 동일한 출력을 생성하는 함수.
  • 파라미터 (Parameter): 함수가 입력으로 받는 값.
  • 변수 (Variable): 정보를 저장하는 공간을 나타내는 이름.
  • 데이터 은닉 (Data Privacy): 내부 데이터를 숨기고 외부에서 직접 접근할 수 없도록 하는 과정.
  • 결과 (Output): 함수 호출 후 반환되는 값.
  • 상태 변화 (State Change): 프로그램 실행 중 데이터의 값이 변화하는 것.

연습 팁

이 영상의 속도 및 톤에 맞춰 연습할 때, shadowspeak, shadow speech와 같은 표현을 사용하는 것이 매우 유익합니다. 영상에서 말하는 속도가 빠를 수 있으므로, 처음에는 속도를 조절하여 따라 해 보세요. 클로저순수 함수에 대한 설명을 들으면서 자신의 목소리로 반복해 보세요. 이를 통해 영어 발음 교정에 많은 도움이 됩니다. Shadow speak 기법을 활용하여 발음을 정확히 따라 하는 것도 추천합니다. 학습한 내용을 자신만의 언어로 요약해 보며, 이를 통해 기억에 남는 것이 무엇인지 점검해보세요. 편안하게 따라하며 자신감을 얻는 것이 중요합니다.

쉐도잉이란? 영어 실력을 빠르게 키우는 과학적 방법

쉐도잉(Shadowing)은 원래 전문 통역사 훈련을 위해 개발된 언어 학습 기법으로, 다언어 학자인 Dr. Alexander Arguelles에 의해 대중화된 방법입니다. 핵심 원리는 간단하지만 매우 강력합니다: 원어민의 영어를 들으면서 1~2초의 짧은 지연으로 즉시 소리 내어 따라 말하는 것——마치 '그림자(shadow)'처럼 화자를 따라가는 것입니다. 문법 공부나 수동적인 청취와 달리, 쉐도잉은 뇌와 입 근육이 동시에 실시간으로 영어를 처리하고 재현하도록 훈련합니다. 연구에 따르면 이 방법은 발음 정확도, 억양, 리듬, 연음, 청취력, 말하기 유창성을 크게 향상시킵니다. IELTS 스피킹 준비와 자연스러운 영어 소통을 원하는 분들에게 특히 효과적입니다.