주니어 개발자가 자주 하는 javascript 실수 5가지

1. javascript in 연산자 질문

javascript에서 1 in [0, 2] 는 왜 true 인가요? 평소에 파이썬으로 코딩테스트를 보다가 다른 언어도 한번 해볼겸 javascript로 코딩테스트를 연습중입니다. 파이썬에서는 1 in [0, 2] 인 경우 false를 return 하는데.. javascript에서는 true를 반환 하더라구요. 항상 써오던 연산자가 다르게 동작하다니..ㅜㅜ javascript in 연산자에 대해 좀 더 알기 쉽게 설명해주실 수 있나요?

답변

python에서 in 연산자는 in 뒤에 string이 와도 되고 list, tuple, dict등 이 올 수 있고 dict를 제외하고 해당 값이 있는지 반환해 줍니다. dict의 경우에는 해당 키가 있는지를 반환해 주고요! javascript에서는 in 뒤에 객체만 올 수 있고 앞의 값은 해당객체의 속성의 이름이나 배열의 인덱스가 올 수 있습니다. 앞의 속성이나 인덱스가 뒤의 객체에 존재하면 true 없으면 false를 반환합니다. 위의 예시인 1 in [0, 2] 인 경우, 배열 [0, 2]에 인덱스 1이 존재하므로 true를 반환하게 됩니다. ([0, 2][1]의 값은 2로 존재함) 추가로 1 in [1] 인 경우는 false가 나오게 됩니다. ([1][1]의 값은 undefined) 아래 링크의 문서를 참고해보세요! https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/in

2. 자바스크립트 this에 대해서

Javascript 공부를 하던 중에 궁금한 것이 생겨서 질문 남깁니다. 아래의 코드에서 일반 function으로 정의했을때는 this가 window로 설정되고 Arrow function으로 정의했을때는 undefined로 나오는 이유가 뭔가요? const x = 10; setTimeout(function test() { console.log(this); // Window 객체 console.log(x); // 10 }, 1000); setTimeout(() => { console.log(this); // undefined console.log(x); // 10 }, 1000);

답변

일반 함수(함수 선언문, 함수 표현식)로 호출했을 때의 this와 화살표 함수로 호출했을 때 this가 가리키는 객체가 다르기 때문입니다. 일반 함수로 함수를 호출했을 때 this는 전역 객체를 가리킵니다. 하지만 화살표 함수로 함수를 호출했을 때엔 호출된 자신의 함수의 상위 스코프의 this를 참조합니다. 현재 setTimeout 콜백함수로 선언된 화살표 함수는 전역 스코프에 선언되어있습니다. 전역이 최상단이기 때문에 전역의 상위 스코프는 존재하지 않습니다. 그렇기 때문에 undefined를 반환하는 것입니다. 누군가를 이해할 수 있도록 명쾌한 답변을 드리고 싶으나 제 실력의 한계인것같습니다ㅠㅠ 스코프에 대한 내용을 이해하시면 금방 이해하실 수있을거에요!

3. javascript hoisting이란?

안녕하세요. javascript 질문도 몇개 올라오는 것 같아서 저도 질문 남깁니다! 공부를 하다가 javascript hoisting을 쉽게 설명하면 "함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것" (https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html) 이라고 많이 하는데, 이게 무슨 뜻인지 또 어떻게 가능한 것인지 궁금합니다.

답변

이 부분은 실행 컨텍스트를 이해했을 때 더 정확한 개념적 이해가 가능합니다. 코드를 실행했을 때, 자바스크립트 엔진은 코드를 “평가”하는 과정을 거치는데요, 이때 실행 컨텍스트가 생성이 됩니다. 실행 컨텍스트는 “레코드”라는 공간에 먼저 선언된 변수와 함수 선언문들이 있는지 확인을 하고 있다면 먼저 정보들을 가져옵니다. var 키워드로 선언된 변수들은 선언과 동시에 암묵적으로 undefined로 할당이 됩니다. 이후 코드를 “실행’하는 과정에서 순차적으로 코드를 실행하면서 값이 할당됩니다. 예를 들어 var a = 1이라는 코드가 있다면 var a는 먼저 레코드에 등록이 되어있는 상태이고 1이라는 값은 실행하는 과정에서 코드가 한 줄씩 실행될 때 할당되는거죠. 그래서 코드를 실행할 때 함수를 선언하고 값을 할당하는 코드 전에 console.log(a)를 출력했을 때 undefined를 반환하는 것입니다. 이것을 변수 호이스팅이라고 하는 것입니다. 우아한테크코스 크루분들이 진행하시는 테크토크 영상인데요 실행 컨텍스트 내용 영상을 보시면 더 확실하게 이해가 가실거에요! :) https://www.youtube.com/watch?v=EWfujNzSUmw&t=791s

4. Promise.all 에 실행 순서를 보장할 수 있는 방법이 있나요?

안녕하세요! Javascript Promise.all에서 실행 순서를 보장할 수 있는 방법이 있는지 궁금합니다! 추가적으로 Promise.all에서 돌아가는 함수들의 실행 시간을 설정할 수 있는지도 궁금합니다~

답변

안녕하세요! Promise.all의 함수 호출 실행 순서를 말씀하시는 것인가요? 그렇다면 보장되는 것으로 알고 있습니다. 이유는 Promise.all (https://tc39.es/ecma262/#sec-promise.all-resolve-element-functions)을 실행시키는 PerformPromiseAll (https://tc39.es/ecma262/#sec-performpromiseall)을 보시면 단순히 반복문을 돌면서 각 함수를 실행시키기 때문입니다. 결과 값도 Promise.all에 제공한 배열의 순서대로 반환해줍니다. 하지만, 어떤 비동기 함수가 먼저 처리 (resolve)될지는 알 수 없습니다. 실행 시간을 설정해야한다면 Promise.race와 setTimeout으로 구현할 수 있는 것 같습니다. https://advancedweb.hu/how-to-add-timeout-to-a-promise-in-javascript/ 이 블로그에 상세히 나와있어요 :)

5. javascript에서 함수 또는 undefined인 경우 함수를 실행하는 방법

javascript를 사용하면서 타입을 크게 신경 쓰지 않고 사용하고 있습니다. a라는 값이 조건에 따라 함수가 될 수도 있고 undefined가 될 수도 있습니다. a() 이렇게 실행하면 undefined인 경우에는 Uncaught TypeError: a is not a function 이 발생합니다. 이 문제는 어떻게 해결하면 좋을까요? 제가 생각한 방법은 if (a) { a() } 이렇게 실행하는 방법입니다. 혹시 더 좋은 방법이 있다면 알려주세요!

답변

함수나 undefind인 경우에 함수 실행하는 방법을 찾고 계시네요. 저는 두가지 방법이 떠오릅니다. 1. a에 undefined를 넣지 않고 비어있는 함수를 넣으면 어떨까요? undefined 대신에 () => null을 넣으면 실행되어도 아무일도 일어나지 않으니까요 2. Optional chaining을 사용하는 겁니다. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) a?.() 이렇게 실행하면 undefind인 경우에는 따로 실행하지 않고 넘어갑니다. 저는 개인적으로 2번방법을 더 선호합니다!