who wants to be a javascriptaire
1.0.0
프론트 엔드/웹 코딩 인터뷰를위한 JavaScript를 배우는 재미있는 방법. 모든 질문은 텍스트로 여기에 답변되며 YouTube 채널에 비디오가 있습니다. 클릭하십시오
우리의 소셜 플랫폼에서 자유롭게 연락하십시오! ?
불화 || Instagram || 트위터 || Tiktok || 블로그 || 페이스 북
지원하다
이 프로젝트를 시작하여 다른 사람들과 공유하여 귀하의 지원을 보여주십시오. 향후 프로젝트 및 튜토리얼에 대한 업데이트를 위해 나를 팔로우하십시오!
언어 기본 - 배열 - 날짜 및 시간 - 객체 지향 JavaScript- 모듈 - 기타
console . log ( new Date ( 2023 , 1 , 31 ) )Tue Jan 31 2024Tue Jan 31 2023Fri Mar 03 2023ErrorJavaScript에서는 날짜 개체를 사용하여 날짜를 구성하는 반면 달은 0 기준입니다. 이는 0이 1 월이고 1은 2 월입니다.
따라서이 경우 우리는 JavaScript에 존재하지 않는 2023 년 2 월 31 일의 날짜를 설정하도록 요청합니다.
그러나 오류를 던지는 대신 JavaScript는 다음 달에 3 월에 넘쳐납니다.
그리고 2023 년 2 월 이후 28 일이 지났을 때,이 코드는 3 일까지 넘쳐나게됩니다. 결과는 2023 년 3 월 3 일입니다.
var username = 'kirandash'
var username = 'bgwebagency'
console . log ( username )bgwebagencykirandashReferenceErrorSyntaxError var 키워드를 사용하여 동일한 변수를 여러 번 선언 할 수 있습니다. 그리고 변수는 결국 지정된 값을 유지합니다.
그러나 let 또는 const 사용하여 동일한 변수를 여러 번 선언 할 수 없습니다.
const user = {
username : 'kirandash' ,
updateUsername : newName => {
this . username = newName
} ,
}
user . updateUsername ( 'bgwebagency' )
console . log ( user . username )bgwebagencyReferenceErrorkirandashundefined updateUsername 기능이 제대로 작동하지 않으며 user 의 username 업데이트하지 않기 때문입니다.
사용자 object 의 updateUsername 함수는 화살표 함수이며 user 객체에 바인딩되지 않습니다.
따라서 UpdateUserName 기능 내부 this 키워드는 user 객체를 참조하는 것이 아니라 전역 범위를 나타냅니다.
이 문제를 해결하려면 화살표 기능을 일반 기능으로 변경해야합니다.
const len1 = 'kiran' . length
const len2 = '?' . length
console . log ( len1 , len2 )5, 25, 15, undefined5, SyntaxErrorJavaScript에서 문자열 길이 속성은 우리가 기대하는 문자 수가 아닌 바이트 수를 반환합니다.
이모티콘은 2 바이트로 인코딩되는 유니 코드 문자입니다. 그러므로이 질문의 대답은 2입니다.
kiran 의 문자열 길이는 문자열에서 각 문자가 1 바이트이기 때문에 5 반환합니다.
console . log ( undefined == null , undefined === null )true, truetrue, falsefalse, falsefalse, true먼저 평등 한 동등한 연산자와 엄격한 동등한 연산자의 차이점을 설명하겠습니다.
동등한 연산자는 두 값이 모두 같는지 확인합니다. 엄격한 동일한 연산자는 값과 유형이 모두 같는지 확인합니다.
따라서이 코드에서는 undefined 것과 null 이 비어있는 것과 동일한 값을 가지므로 첫 번째 명령문 undefined == null true 반환합니다.
그러나 두 번째 진술은 undefined === null false 반환합니다. typeof undefined undefined 반면 typeof null object 입니다.
null 기본적으로 기본 데이터 유형 인 경우 typeof null 이 object 인지 궁금합니다. 이것은 기본적으로 처음부터 JavaScript의 실수입니다.
이제 당신을위한 또 하나의 팁 : undefined 대신 가변 사용 null 에 대한 빈 값을 설정하려는 경우. 변수에 할당 된 값이 없는지 확인하는 데 주로 undefined 주로 사용되므로.
function getFruits ( x , ... multi , y ) {
console . log ( x , y , multi ) ;
}
getFruits ( "?" , "?" , "?" , "?" , "?" )? ? ["?", "?", "?"]SyntaxErrorREST 연산자는 ES6 기능의 일부로 추가되었습니다.
함수에 전달 된 모든 인수를 가져 와서 배열에 넣습니다.
여러 인수가 함수로 전달되면 REST 연산자가 끝에 있어야합니다. 그렇기 때문에이 코드 스 니펫이 오류가 발생합니다.
이 문제를 해결하려면 REST 연산자를 끝까지 옮기면 작동해야합니다.
let x = Number . NEGATIVE_INFINITY
let y = Number . POSITIVE_INFINITY
let z = x + y
console . log ( z )0undefinedNaNTypeErrorNegative_Infinity 및 긍정적 인 _infinity는 javaScript에서 숫자 객체의 속성이며, 이는 부정적인 무한대와 양성 무한대의 수학적 개념을 나타냅니다.
number.negative_infinity 및 number.positive_infinity를 추가하면 결과는 nan입니다.
긍정적 인 무한 값을 음의 무한 값에 추가한다고해서 의미있는 수치 값이 발생하지는 않습니다.
따라서이 경우 Z는 NAN이됩니다.
JavaScript가 숫자 사이에 추가 작업을 수행 할 수 있으므로 코드는 TypeError를 던지지 않습니다.
console . log ( 'BG Web Agency' === NaN , isNaN ( 'BG Web Agency' ) )true, truefalse, truetrue, falsefalse, false === NaN 사용하여 값이 숫자인지 확인하면 작동하지 않습니다.
JavaScript에서 NaN (숫자가 아님)은 유효하지 않은 숫자를 나타내는 특별한 값입니다.
NAN은 자체를 포함하여 어떤 것과 동일하지 않으므로 "BG Web Agency" === NaN 항상 false 반환합니다.
값이 JavaScript의 숫자인지 확인하려면 isNaN() 함수를 사용할 수 있습니다. 이 기능은 인수가 NaN 이거나 숫자로 변환 할 수없는 경우 인수가 전달 된 경우 true 반환합니다.
console . log ( isFinite ( Infinity ) , isNaN ( Infinity ) )false, falsefalse, truetrue, falsefalse, false isFinite() 함수는 주어진 값이 유한 숫자인지 여부를 결정하는 데 사용됩니다.
값이 Nan, Infinity, 또는 -infinity 인 경우 값이 유한 한 숫자 인 경우 True가 False를 반환합니다.
따라서이 예에서 isFinite(Infinity) 무한대가 유한 번호가 아니기 때문에 거짓을 반환합니다.
반면에, ISNAN () 함수는 주어진 값이 숫자가 아닌지 여부를 결정하는 데 사용됩니다.
값이 NAN 인 경우 true를 반환하고 값이 숫자 또는 기타 데이터 유형 인 경우 FALSE입니다.
따라서이 예에서 isNaN(Infinity) 무한대가 NAN이 아니기 때문에 False를 반환합니다.
따라서 숫자가 유한 한 경우 검증을 원할 때 항상 isNaN 함수 대신 isFinite 함수를 사용하십시오.
const user = {
name : 'John' ,
age : 30 ,
getName : ( ) => {
return this . name
} ,
getAge : function ( ) {
return this . age
} ,
}
const getName = user . getName
const getAge = user . getAge
console . log ( getName ( ) )
console . log ( getAge ( ) ) getName Arrow 함수는 this 키워드를 사용하여 객체의 이름 속성을 참조하지만 화살표 함수는 this 바인딩을 가지기 때문에 화살표 기능 내부 의이 this 의 값은 브라우저의 window 또는 node.js의 global 객체가됩니다.
global 오브젝트에는 이름 속성이 없으므로 함수는 undefined 반환합니다.
getAge 함수는 일반 기능 표현식을 사용 하며이 this 를 사용하여 user 객체의 연령 속성을 올바르게 지칭합니다.
그러나 getAge getAge 변수에 할당되면 user 객체에 대한 참조가 손실되므로 기능을 getAge() 사용하여 호출 할 때 글로벌 오브젝트를 다시 참조하고 전역 객체에 연령 특성이 없으므로 함수는 정의되지 않은 것으로 반환됩니다.
for ( var i = 0 ; i < 3 ; i ++ ) {
setTimeout ( function ( ) {
console . log ( i )
} , 0 )
}폐쇄는 외부 기능이 반환 된 후에도 외부 범위의 변수에 대한 액세스를 유지하는 기능입니다.
이 예에서는 설정 타임 아웃 함수가 비동기식이고 즉시 실행되지 않기 때문에 대답은 b입니다.
콜백 함수가 Settimeout으로 전달 될 때까지 루프가 이미 완료되었으며 I 변수의 값은 3입니다.
따라서 콜백 함수 내부에서 Console.log (i)로 호출되는 각 호출은 3 인쇄됩니다.
이 문제를 해결하고 0, 1, 2를 인쇄하기 위해 iife (즉시 호출 된 함수 표현식)를 사용하여 루프의 각 반복에 대한 새로운 범위를 만들 수 있습니다.
이것은 각 iife 내부에 새로운 변수 j를 생성하며, 루프 반복에서 i의 현재 값의 사본을 사용합니다.
콜백 함수가 Settimeout으로 전달되면 폐쇄의 J 변수에 액세스 할 수 있으며, 이는 루프의 각 반복에 대해 0, 1 또는 2의 예상 값을 갖습니다.
function add ( x ) {
return function ( y ) {
if ( y !== undefined ) {
x += y
return arguments . callee
} else {
return x
}
}
}
console . log ( add ( 1 ) ( 2 ) ( 3 ) ( ) )정답은 A입니다. 코드는 단일 인수 x를 취하고 단일 인수 y를 취하는 다른 함수를 반환하는 추가 함수를 정의합니다.
이 내부 기능은 Y가 정의되어 있는지 확인합니다. 정의 된 경우 y를 x에 추가하고 arguments.callee 속성을 사용하여 다음 인수를 사용하여 기능을 재귀 적으로 호출 할 수 있습니다.
y가 정의되지 않으면 x의 현재 값을 반환합니다.
그런 다음 코드 호출은 추가 (1) (2) (3) ()를 호출합니다. 첫 번째 호출은 (1)을 인수로 1으로 추가하여 단일 인수 y를 취하는 함수를 반환합니다.
그런 다음이 기능을 2로 인수로 부릅니다.이 기능은 2에서 1을 추가하고 함수에 대한 참조를 반환합니다.
마지막으로,이 기능을 3으로 3으로 3 대 3으로 추가하고 함수에 대한 참조를 반환합니다.
마지막 호출에서 인수가 전달되지 않으므로 6 인 x의 현재 값을 반환합니다.
이 코드는 JavaScript에서 카레링의보다 복잡한 예를 보여줍니다. 여기서 Curried 함수는 그 자체에 대한 참조를 반환하여 다음 인수로 재귀 적으로 호출 할 수 있습니다.
function multiply ( x ) {
return function ( y ) {
return x * y
}
}
const double = multiply ( 2 )
console . log ( double ( 5 ) )정답은 B입니다. 코드는 단일 인수 x를 취하고 단일 인수 y를 취하는 다른 함수를 반환하는 곱하기 함수를 정의합니다. 이 내부 기능은 X와 Y를 곱하고 결과를 반환합니다.
그런 다음 코드는 2를 인수로 호출하여 새로운 기능을 두 배로 만듭니다. 이중 함수는 이제 단일 인수로 호출 할 수있는 카레 기능입니다.
마지막으로, 코드는 인수로 5로 두 배를 호출하여 10 개가 콘솔에 기록됩니다.
이 코드는 JavaScript에서 카레링 개념을 보여줍니다. 여기서 함수는 일부 인수와 함께 부분적으로 적용될 수있는 다른 함수를 반환합니다.
JavaScript의 반복자의 next() 메소드에 대해 다음 중 어떤 진술이 사실입니까?
정답은 A입니다.
JavaScript에서 반복 가능한 것은 시퀀스를 정의하고 루프를 사용하여 반복 할 수있는 객체입니다.
반복자는 한 번에 반복 가능한 요소의 요소에 액세스하는 방법을 알고있는 객체입니다.
반복 가능한 객체에는 핵심 Symbol.iterator 있는 메소드가 있으며 반복자 객체를 반환합니다.
반복자 객체에는 next() 메소드가 있는데, 이는 두 가지 속성이있는 객체를 반환합니다. value 순서의 다음 요소이며, 이는 반복기가 시퀀스의 끝에 도달했는지 여부 done 나타내는 부울입니다.
반복은 일반적으로 대규모 데이터 세트로 작업하거나 사용자 정의 데이터 구조를 구현하는 동안 많은 실시간 응용 프로그램에서 일반적으로 사용됩니다.
function * counter ( ) {
let i = 0
while ( true ) {
yield i ++
}
}
const gen = counter ( )
console . log ( gen . next ( ) . value )
console . log ( gen . next ( ) . value )
console . log ( gen . next ( ) . value )위의 코드 스 니펫 출력은 무엇입니까?
정답은 D입니다.
counter 함수는 i 의 값을 증가시키는 무한 루프를 생성하는 발전기 기능입니다.
gen 변수는 생성기 함수로 설정되며 각 gen.next() 에 대한 호출은 값 속성을 다음으로 설정 한 값으로 설정 한 객체를 반환합니다.
console.log 문은 gen.next() 에 의해 반환 된 값을 인쇄합니다.
생성기 함수는 일련의 값을 통해 반복을 제어하는 데 사용할 수있는 특수한 유형의 함수입니다.
기존 기능과 달리 발전기 기능을 사용하면 실행을 일시 중지하고 재개 할 수 있으며 시간이 지남에 따라 여러 값을 산출 할 수 있습니다.
다음 시나리오 중 JavaScript에서 메모리 누출을 유발할 수있는 시나리오는 무엇입니까?
원형 참조는 둘 이상의 물체가 서로를 참조 할 때 발생하여 객체가 수집되는 것을 방지하는 루프를 만듭니다.
객체가 더 이상 필요하지 않지만 원형 기준으로 인해 해제 될 수없는 경우 메모리 누출이 발생할 수 있습니다.
옵션 A, C 및 D는 일반적으로 JavaScript에서 메모리 누출을 유발하지 않습니다.
쓰레기 수집은 더 이상 프로그램에서 사용하지 않는 메모리를 자동으로 확보하는 과정입니다.
JavaScript에서는 마크 및 스윕 알고리즘이 일반적으로 쓰레기 수집에 사용됩니다.
이 알고리즘은 먼저 프로그램에서 여전히 참조되는 메모리의 모든 객체를 표시 한 다음 사용중인 것으로 표시되지 않은 메모리를 스윕하고 자유롭게함으로써 작동합니다.
function getData ( ) {
return new Promise ( ( resolve , reject ) => {
setTimeout ( ( ) => {
resolve ( 'Data retrieved successfully' )
} , 1000 )
} )
}
async function main ( ) {
try {
const data = await getData ( )
console . log ( data )
throw new Error ( 'Something went wrong' )
} catch ( err ) {
console . log ( 'Caught an error:' , err . message )
return 'Error occurred'
} finally {
console . log ( 'Finally block executed.' )
return 'Finally block value'
}
}
; ( async ( ) => {
console . log ( await main ( ) )
} ) ( )위의 코드 스 니펫 출력은 무엇입니까?
코드가 실행되면 main () 함수가 호출되는데, 이는 getData() 함수에서 데이터를 가져 오기 위해 기다리고있는 비동기 함수입니다.
데이터가 검색되면 console.log(data) 문은 콘솔에 "데이터를 성공적으로 검색 한 데이터"로그를 기록합니다.
그 후, throw new Error("Something went wrong") 명령문은 오류가 발생합니다.
catch 블록은 오류를 잡고 로그가 "Caught an error: Something went wrong" 고 콘솔에 문자열을 반환한다. "Error occurred" .
마지막으로, 마지막으로 블록이 실행되고 로그가 "Finally block executed." 콘솔에 "Finally block value" 반환합니다.
main() 함수가 호출되면 비동기 함수이므로 약속을 반환합니다. finally 블록도 값을 반환하기 때문에 그 값은 약속의 최종 해결 된 가치가 될 것입니다.
따라서 console.log(main()) 이 호출되면 "Finally block executed." "Finally block value" 이 콘솔에 기록됩니다.
런타임 오류를 처리하기 위해 JavaScript에서 사용되는 키워드입니다.
const arr = [ 1 , 2 , 3 , 4 , 5 ] ;
let sum = 0 ;
for ( let num of arr ) {
sum += num ;
if ( sum >= 6 ) break ;
}
console . log ( sum ) ;
const arr2 = [ 1 , 2 , 3 , 4 , 5 ] ;
let sum2 = 0 ;
arr . forEach ( ( num ) => {
sum2 += num ;
if ( sum2 >= 6 ) break ;
} ) ;
console . log ( sum2 ) ;위의 코드 스 니펫 출력은 무엇입니까?
break 문은 forEach 로 전달 된 콜백 함수 내부에서 유효하지 않기 때문입니다.
forEach break 문을 사용하여 조기 종료를 지원하지 않습니다. 따라서 오류가 발생합니다 "Uncaught SyntaxError: Illegal break statement".
루프의 경우 break 명령문이 허용됩니다.
문제를 해결하려면 Foreach에서 break 문을 제거하면 작동해야합니다.
일반적으로, for of for in 또는 forEach 권장됩니다.
let arr = [ 1 , 2 , 3 , 4 ]
let result = arr . push ( 5 )
console . log ( 'result: ' , result , 'arr: ' , arr )위의 코드 스 니펫 출력은 무엇입니까?
JavaScript의 array.push() 메소드는 배열 끝에 하나 이상의 요소를 추가하고 배열의 새로운 길이를 반환합니다.
주어진 코드에서 arr 값 [1, 2, 3, 4] 의 배열입니다. push() 메소드는 인수 5와 함께 호출되며 arr 어레이의 끝에 5 추가합니다.
push() 메소드는 요소를 추가 한 후 배열의 새로운 길이를 반환합니다. 이 경우 5 배열 끝에 추가되므로 새로운 길이의 ARR은 5가됩니다.
let arr = [ 3 , 5 , 7 , 9 ]
let result = arr . unshift ( 1 , 2 )
console . log ( 'result: ' , result , 'arr: ' , arr )위의 코드 스 니펫 출력은 무엇입니까?
JavaScript의 array.unshift() 메소드는 배열의 시작 부분에 하나 이상의 요소를 추가하고 배열의 새로운 길이를 반환합니다.
주어진 코드에서 arr 값 [3, 5, 7, 9] 의 배열입니다. unshift() 메소드는 인수 1과 2로 호출되며 arr 어레이의 시작 부분에 1과 2를 추가합니다.
unshift() 메소드는 요소를 추가 한 후 배열의 새로운 길이를 반환합니다. 이 경우 1과 2가 배열의 시작 부분에 추가되어 기존 요소를 오른쪽으로 이동시키기 때문에 새로운 길이 arr 6이됩니다.
const myArray = [ 1 , 2 , 3 , 4 , 5 ]
const poppedValue = myArray . pop ( )
console . log ( poppedValue )위의 코드 스 니펫 출력은 무엇입니까?
JavaScript의 Array.pop() 메소드는 배열에서 마지막 요소를 제거하고 해당 요소를 반환합니다.
이 경우 myArray 는 요소 [1, 2, 3, 4, 5] 있는 배열이며 myArray.pop() 호출되어 배열에서 요소 5를 제거하고 반환합니다.
const arr = [ 10 , 20 , 30 , 40 , 50 ]
const removedElement = arr . shift ( )
console . log ( 'removedElement: ' , removedElement , 'arr: ' , arr )위의 코드 스 니펫 출력은 무엇입니까?
Array.shift() 메소드는 arr 어레이에서 첫 번째 요소를 제거하여 10 입니다. 결과적으로 arr 어레이는 [20, 30, 40, 50] 입니다.
따라서 옵션 A는 removedElement 의 올바른 값과 Array.shift() 호출 된 후 업데이트 된 arr 상태를 반영하기 때문에 정답입니다. 옵션 B는 removedElement 가 50이라고 말하면 부정확합니다. 이는 사실이 아닙니다. 옵션 C는 arr 변경되지 않은 상태로 유지되므로 정확하지 않습니다. Array.shift() 배열을 반환한다고 말하면 옵션 d는 약간 혼란 스럽습니다.
let arr = [ 1 , 2 , 3 , 4 , 5 ]
let removed = arr . splice ( 1 , 2 , 'a' , 'b' )
console . log ( 'removed:' , removed , 'arr: ' , arr )위의 코드 스 니펫 출력은 무엇입니까?
Array.splice() 메소드는 요소를 추가, 제거 또는 교체하여 배열을 수정하는 데 사용됩니다.
이 경우 코드 스 니펫은 arr.splice(1, 2, 'a', 'b') 사용하여 색인 1 (2 요소 제거)에서 시작하여 요소 a 와 b 대신에 삽입합니다. 제거 된 요소 (즉, 2 및 3)가 반환되어 제거 된 변수에 할당됩니다. 실행 후 제거 된 것은 [2, 3] 이며 arr [1, 'a', 'b', 4, 5] 가됩니다. 옵션 C는 제거 된 배열에 삽입 된 요소가 포함되어 있으므로 정확하지 않습니다. 옵션 D는 배열에서 제거 된 잘못된 요소를 언급하므로 옵션 D도 올바르지 않습니다.
const fruits = [ 'apple' , 'banana' , 'orange' , 'grape' , 'apple' , 'kiwi' ]
const index = fruits . indexOf ( 'orange' )
const lastIndex = fruits . lastIndexOf ( 'apple' )
const result = fruits . includes ( 'grape' )
console . log ( 'index: ' , index , 'lastIndex: ' , lastIndex , 'result: ' , result )위의 코드 스 니펫 출력은 무엇입니까?
Array.indexOf() 메소드는 배열 과일에서 지정된 값의 첫 번째 발생 인덱스를 검색합니다. 이 경우 "Orange"는 인덱스 2에서 발견되므로 index 2가됩니다.
Array.lastIndexOf() 메소드는 배열 과일에서 지정된 값의 마지막 발생 인덱스를 검색합니다. 이 경우 "Apple"은 어레이에 두 번 나타나고 마지막 발생은 인덱스 4에 있으므로 lastIndex 4가됩니다.
반면에, Array.includes() 메소드는 지정된 값 "포도"가 배열 과일에 존재하는지 확인하고 배열에 "포도"가 존재하므로 result 사실이 될 것입니다.
function isDivisibleBy7 ( num ) {
return num % 7 == 0
}
const nums = [ 28 , 7 , 3 , 29 , 15 , 1 , 2 , 23 ]
const filterResult = nums . filter ( isDivisibleBy7 )
const findResult = nums . find ( num => num < 10 )
const findIndexResult = nums . findIndex ( num => num / 2 == 14 )
console . log (
'filterResult:' ,
filterResult ,
'findResult:' ,
findResult ,
'findIndexResult:' ,
findIndexResult ,
)위의 코드 스 니펫 출력은 무엇입니까?
Array.filter() 메소드는 함수가 전달 된 모든 요소가 포함 된 배열을 반환합니다. 이 경우, isDivisibleBy7 기능은 7로 나눌 수있는 숫자에 대해 true를 반환합니다. nums 어레이에서 7과 28은 7으로 나눌 수 있으므로 nums.filter(isDivisibleBy7) 반환됩니다 [28, 7].
Array.find() 메소드는 함수가 전달 된 배열에서 첫 번째 요소를 반환합니다. 이 경우 전달 된 함수는 10 미만의 숫자에 대해 true를 반환합니다 nums 에는 10 미만의 숫자가 여러 개 있지만 Array.find() 는 첫 번째를 반환합니다. nums.find((num) => num < 10) 7을 반환합니다.
Array.findIndex() 메소드는 Array.find() 메소드와 유사하지만 기능이 전달 된 배열에서 첫 번째 요소의 인덱스를 요소 자체가 아닌 true를 반환합니다. 이 경우 28 / 2 == 14.28이 배열 nums 에 있고 인덱스 0에 있으므로 nums.find((num) => num / 2 == 14) 0을 반환하기 때문에 28 명에 대해 전달 된 함수가 28 명에 대해 반환됩니다.
const numbers = [ 1 , 2 , 3 , 4 , 5 ]
const doubledNumbers = numbers . map ( num => num * 2 )
console . log ( doubledNumbers )위의 코드 스 니펫 출력은 무엇입니까?
JavaScript의 Array.map() 메소드는 원래 배열의 각 요소에 제공된 기능을 적용하여 새 배열을 만듭니다.
이 경우 제공된 함수 num => num * 2 숫자 배열의 각 숫자에 2를 곱하여 새로운 배열 [2, 4, 6, 8, 10] 을 초래합니다.
const numbers = [ 1 , 2 , 3 , 4 , 5 ]
const sum = numbers . reduce ( ( acc , val ) => acc + val )
console . log ( sum )위의 코드 스 니펫 출력은 무엇입니까?
Array.reduce() 각 요소에 함수를 반복적으로 적용하고 누적 된 결과를 추적하여 배열을 가져 와서 단일 값으로 "감소"합니다. 일반적으로 숫자 배열을 합산하거나 최대 값을 찾거나 문자열 배열을 단일 문자열로 연결하는 등의 작업에 일반적으로 사용됩니다.
이 경우 reduce () 메소드는 배열의 각 요소에 대해 실행되는 콜백 함수를 취합니다. 콜백 함수는 acc 와 val 두 매개 변수를 취하며, 이는 각각 어큐뮬레이터와 배열의 현재 값을 나타냅니다.
콜백 함수 내에서 배열의 현재 값이 축합기에 추가되고 결과가 반환됩니다. reduce() 메소드는 배열의 모든 요소에 반복 될 때까지 각 반복과 함께 축합기의 값을 업데이트합니다.
마지막으로, reduce() 메소드는 어큐뮬레이터의 최종 값을 반환합니다.이 값은 배열의 모든 숫자, 즉 15입니다.
const arr = [ 1 , 2 , 3 , 4 ]
const result = arr . reduceRight ( ( acc , curr ) => acc + curr )
console . log ( result )위의 코드 스 니펫 출력은 무엇입니까?
reduceRight() 메소드는 reduce() 메소드와 유사합니다. reduceRight() 메소드는 어큐뮬레이터와 배열의 각 값 (오른쪽에서 왼쪽에서)에 대한 함수를 단일 값으로 줄입니다.
주어진 코드 스 니펫에서 arr 어레이에는 값 [1, 2, 3, 4] 이 포함되어 있습니다. reduceRight() 메소드는이 배열에서 콜백 함수를 사용하여 현재 요소 curr 과 함께 축합기 acc 추가합니다.
첫 번째 반복에서 curr 값은 4 되고 ACC 값은 초기 값이 제공되지 않으므로 undefined . 따라서 첫 번째 반복의 결과는 4 입니다.
두 번째 반복에서 curr 값은 3 되고 acc 값은 이전 반복의 결과, 즉 4 입니다. 따라서 두 번째 반복의 결과는 7 입니다.
세 번째 반복에서 curr 값은 2 가되고 acc 값은 이전 반복의 결과 ( 7 입니다. 따라서 세 번째 반복의 결과는 9 입니다.
네 번째이자 최종 반복에서 curr 값은 1 되고 acc 값은 이전 반복의 결과 ( 9 입니다. 따라서 네 번째 반복의 결과는 10 입니다.
따라서 코드의 최종 출력은 10 입니다. 따라서 올바른 옵션은 A입니다.
const arr = [ 'Centauri' , 3.14159 , 'canine' , 11235 , undefined ]
const result = arr . sort ( )
console . log ( result )위의 코드 스 니펫 출력은 무엇입니까?
기본적으로 sort() 메소드는 문자별로 요소를 정렬하므로 11235는 3.14159 이전에 제공됩니다. 1은 3 이전에 오기 때문입니다.
단어와 문자는 ASCII 코드에 의해 알파벳순으로 정렬되므로 "Centauri"는 대문자 C (ASCII Code 67) 정렬로 시작하여 소문자 C (ASCII Code 99)로 시작합니다.
정의되지 않은 요소는 항상 배열 끝에 정렬됩니다.
따라서 코드의 최종 출력은 옵션 D 인 [11235, 3.14159, 'Centauri', 'Canine', undefined]입니다.
let numbers = [ 1 , 2 , 3 , undefined , 6 , 7 , 8 , 9 ]
let [ a , , b , c = 2 , ... rest ] = numbers
console . log ( a , b , c , rest )위의 코드 스 니펫 출력은 무엇입니까?
배열 파괴를 사용하면 배열에서 개별 변수로 특정 값을 포장 할 수 있습니다. 왼쪽에서 만든 값 ( a, b, c, rest )은 오른쪽 ( numbers )에 할당 한 배열의 값과 순서에 해당합니다.
변수 a 배열의 첫 번째 요소에 해당하며 ( 1 ).
다음 값 2 에 대한 변수를 지정하지 않았으므로 평가에서 값이 고려되지 않으며 건너 뜁니다.
변수 b 배열의 3 번째 요소에 해당합니다.
배열의 요소가 undefined 경우 변수의 기본값을 설정할 수 있습니다. 배열의 네 번째 요소가 undefined 변수 c 기본값 2 갖습니다.
스프레드 연산자 ( ... )를 사용하면 배열의 나머지 값을 변수에 할당 할 수 있습니다. 값 [ 6, 7, 8, 9 ] 은 배열의 나머지 값이므로 변수 rest 에 할당됩니다.
따라서 최종 결과는 다음과 같습니다. 1 3 2 [ 6, 7, 8, 9 ] , 옵션 B입니다.
const date1 = new Date ( )
const date2 = new Date ( '1995-12-17T05:10:00' )
const date3 = new Date ( '1995-10-15T08:12:15+02:00' )
console . log ( date1 , '' , date2 , '' , date3 )위의 코드 스 니펫 출력은 무엇입니까?
new Date() 현재 날짜와 시간과 시간을 반환 한 다음 두 개의 지정된 날짜가 "yyyy-mm-ddthh : mm : ss.sssz"형식으로 이어집니다. 여기서 "z"는 UTC 시간 영역 오프셋을 나타냅니다.
YYYY-MM-DDTHH:mm:ss.sssZ ISO 8601 표준의 날짜와 시간을 나타내는 데 사용되는 형식입니다. 다음 구성 요소로 구성됩니다.
YYYY : 4 자리 (0000 ~ 9999), 또는 + OR-의 연도와 6 자리의 연도. 표지판은 확장 된 해에 필요합니다. -000000은 유효한 해로 명시 적으로 허용되지 않습니다.MM : 두 자리 달 (01 = 1 월, 02 = 2 월 등). 기본값은 01입니다.DD : 월의 2 자리 (01 ~ 31)T : 시간 구성 요소의 시작을 나타내는 분리기HH : 24 시간 형식 (00 ~ 23)의 하루 중 2 자리. 특별한 경우, 24:00:00이 허용되며 다음 날 시작시 자정으로 해석됩니다. 기본값은 00입니다.mm : 시간의 2 자리 (00 ~ 59). 기본값은 00입니다.ss : 분 중 2 자리 (00 ~ 59). 기본값은 00입니다..sss : 밀리 초 성분 (000 ~ 999). 기본값은 000입니다.Z : 오프셋이없는 시간이 UTC (조정 된 범용 시간)에 있음을 나타내는 접미사. 문자 문자 z (UTC를 나타내는) 또는 + 또는 -hh : mm, UTC에서 몇 분 동안 오프셋 및 몇 분 동안 오프셋이 될 수 있습니다. const date = new Date ( 'Mart 15, 1975 23:15:30' )
date . setMinutes ( 10 )
date . setUTCDate ( 5 )
console . log (
'Minutes:' + date . getMinutes ( ) + ',' ,
'' ,
'Year:' + date . getFullYear ( ) + ',' ,
'' ,
'UTCDate:' + date . getUTCDate ( ) ,
)위의 코드 스 니펫 출력은 무엇입니까?
제공된 코드는 "1975 년 3 월 15 일 23:15:30"의 날짜와 시간으로 초기화 된 날짜 객체를 만듭니다.
그런 다음 setMinutes() 및 setUTCDate() 메소드를 각각 사용하여 날짜 개체의 분 및 UTC 날짜를 수정합니다.
마지막으로 console.log() 사용하여 업데이트 된 분, 연도 및 UTC 날짜의 업데이트 값을 기록합니다.
setMinutes(10) 사용하여 분을 10로 수정 한 후 getMinutes() 메소드는 업데이트 된 값 10을 반환합니다.
setUTCDate(5) 사용하여 UTC 날짜를 5로 수정 한 후 getUTCDate() 메소드는 업데이트 된 값 5를 반환합니다.
getFullYear() 메소드는 1975 년의 변하지 않은 해를 반환합니다.
const date1 = new Date ( '2023-5-1' )
const next_us_election = new Date ( '2024-11-5' )
const difference_in_time = next_us_election . getTime ( ) - date1 . getTime ( )
const difference_in_days = difference_in_time / ( 1000 * 3600 * 24 )
console . log ( parseInt ( difference_in_days , 10 ) + ' Days' )위의 코드 스 니펫 출력은 무엇입니까?
이 코드는 "2023-5-1"날짜와 다음 미국 선거 날짜 "2024-11-5"사이의 차이를 계산합니다. Date 개체를 사용하여 두 날짜를 만듭니다. date1 2023 년 5 월 1 일을, next_us_election 2024 년 11 월 5 일을 나타냅니다.
getTime() 메소드는 각 날짜의 시간 값을 밀리 초로 얻는 데 사용됩니다. next_us_election 에서 date1 의 시간 값을 빼면 밀리 초의 시차를 얻습니다.
시간 차이를 밀리 초에서 일로 변환하기 위해 하루에 밀리 초 수 (1000 _ 3600 _ 24)로 나눕니다. 결과는 변수 difference_in_days 에 저장됩니다.
마지막으로, parseInt() 함수는 차이 _in_days 값을 정수로 변환하는 데 사용되며 결과는 "days"문자열과 함께 콘솔에 로그인됩니다. 출력은 "554 일"입니다.
let person = {
name : 'John' ,
age : 30 ,
hobbies : [ 'reading' , 'traveling' , 'cooking' ] ,
address : {
street : '123 Main St' ,
city : 'New York' ,
state : 'NY' ,
} ,
sayHello : function ( ) {
console . log ( 'Hello, my name is ' + this . name )
} ,
}
console . log ( person . name )
console . log ( person . hobbies [ 1 ] )
console . log ( person . address . city )
person . sayHello ( )위의 코드 스 니펫 출력은 무엇입니까?
이 코드는 name , age , hobbies 및 address 와 같은 속성, sayHello 같은 속성을 가진 물체 문자 그대로의 person 정의합니다.
console.log() 문은 name 의 값, hobbies 배열의 두 번째 요소 ( "여행") 및 address 개체 ( "뉴욕")의 city 속성의 값을 인쇄합니다.
마지막으로, sayHello 방법은 DOT 표기법을 사용하여 person Object에서 호출됩니다. DOT 표기법은 "안녕하세요, 내 이름은 John"을 콘솔에 출력합니다.
function User ( username ) {
this . username = username
this . updateUsername = newName => {
this . username = newName
}
}
const user1 = new User ( 'kirandash' )
const user2 = new User ( 'bgwebagency' )
user1 . updateUsername ( 'kirandash-website' )
user2 . updateUsername ( 'bgwebagency-app' )
console . log ( user1 . username , user2 . username )위의 코드 스 니펫 출력은 무엇입니까?
코드는 username 속성 및 updateUsername 메소드로 user 객체를 생성하는 생성자 기능 User 정의합니다. user1 과 user2 두 가지 user 객체는 각각 초기 사용자 이름 'Kirandash'및 'bgwebagency'로 작성됩니다.
updateUsername 메소드는 사용자 이름을 업데이트하기 위해 user1 및 user2 객체 모두에서 호출됩니다. user1 '의 사용자 이름은'Kirandash-Website '로 업데이트되었으며 user2 의 사용자 이름은'bgwebagency-App '으로 업데이트됩니다.
마지막으로, 코드는 user1.username 및 user2.username 의 연결을 기록하여 출력 'Kirandash-website bgwebagency-app'을 초래합니다.
function greet ( name ) {
console . log ( `Hello, ${ name } ! Welcome to ${ this . location } .` )
}
const person = {
location : 'New York' ,
}
greet . call ( person , 'John' )
greet . apply ( person , [ 'Alex' ] )
const greetPerson = greet . bind ( person )
greetPerson ( 'Thomas' )위의 코드 스 니펫 출력은 무엇입니까?
call 함수는 person 개체와 함께 greet 기능을 컨텍스트 ( this 의 값)로, 'John' 인수로 호출하는 데 사용됩니다.
apply 함수는 person 개체를 컨텍스트 ( this 의 값)와 인수로서 인사와 greet 기능을 호출하는 데 사용됩니다.
bind 함수는 person 객체를 바인딩 컨텍스트 ( this 의 값)로서 새로운 함수 greetPerson 생성하는 데 사용됩니다.
In summary, the code demonstrates how call , apply , and bind can be used to invoke a function with a specific context and arguments
class Animal {
constructor ( name ) {
this . name = name
}
static makeSound ( ) {
console . log ( 'Generic animal sound' )
}
sayName ( ) {
console . log ( `My name is ${ this . name } ` )
}
}
const a1 = new Animal ( 'Lion' )
const a2 = new Animal ( 'Time' )
Animal . makeSound ( )
a1 . makeSound ( )
a2 . makeSound ( )What does the above code snippet output?
The static method makeSound() is defined on the Animal class, and is accessible directly through the class itself, ie, Animal.makeSound() . This will output "Generic animal sound" to the console.
However, when we try to call makeSound() on an instance of the Animal class (a1.makeSound() and a2.makeSound()) , we get a TypeError, because static methods can only be accessed through the class itself and not through its instances.
function Animal ( name ) {
this . name = name
}
Animal . prototype . eat = function ( ) {
console . log ( this . name + ' is eating.' )
}
function Dog ( name ) {
Animal . call ( this , name )
}
Dog . prototype = Object . create ( Animal . prototype )
Dog . prototype . constructor = Dog
Dog . prototype . bark = function ( ) {
console . log ( this . name + ' is barking.' )
}
function CustomArray ( ) {
Array . call ( this )
}
CustomArray . prototype = Object . create ( Array . prototype )
CustomArray . prototype . constructor = CustomArray
CustomArray . prototype . sum = function ( ) {
return this . reduce ( ( acc , val ) => acc + val , 0 )
}
var dog = new Dog ( 'Buddy' )
dog . eat ( )
dog . bark ( )
var numbers = new CustomArray ( )
numbers . push ( 1 , 2 , 3 , 4 , 5 )
console . log ( numbers . sum ( ) )What will be the output of the following code
Explanation: In this example, we have a base class called Animal that defines a constructor and an eat() method. The subclass Dog extends the Animal class and adds its own constructor, bark() method, and a specific property breed .
Furthermore, we extend the built-in Array class using the class syntax to create a CustomArray class. The CustomArray class adds a custom method called sum() that calculates the sum of the array elements.
In the usage section, we create an instance of Dog named dog with the name "Buddy" . We can call the inherited eat() method from the Animal class, the bark() method defined in the Dog class.
Additionally, we create an instance of CustomArray called numbers and add some numbers to it. We can call the custom sum() method, which is added to the built-in Array class through subclassing.
This example showcases inheritance, subclassing, and extending a built-in class in JavaScript, illustrating how classes can be extended and customized to add additional functionality.
const person = {
name : 'John' ,
age : 30 ,
city : 'New York' ,
}
const { name , age , city } = person
console . log ( name )
console . log ( age )
console . log ( city )What will be the output of the following code
In the code above, we have an object literal called person with properties name , age , and city . We then use object destructuring to extract those properties into separate variables ( name , age , and city ). After destructuring, we can use these variables to access the corresponding values from the object.
Consider the following code snippet:
// module.mjs
export const PI = 3.14159
export function calculateArea ( radius ) {
return PI * radius * radius
}
export default function calculateCircumference ( radius ) {
return 2 * PI * radius
}
// script.mjs
import calculateCircumference , { PI , calculateArea } from './module.mjs'
console . log ( PI ) // Output: ________
console . log ( calculateArea ( 5 ) ) // Output: ________
console . log ( calculateCircumference ( 5 ) ) // Output: ________What will be the output of the console.log statements in the code above?
옵션 :
3.14159 , 78.53975 , 31.41593.14159 , 78.53975 , 62.83183.14159 , 78.53975 , NaN3.14159 , NaN , 62.8318 The module.js file exports three entities:
PI is a named export, exported using the export keyword.calculateArea is a named export, exported using the export keyword.calculateCircumference is the default export, exported using the export default syntax. In the main.js file, we import PI and calculateArea as named exports using the destructuring assignment syntax. We also import calculateCircumference as the default export. The import statements reference the module.js file using the relative file path ./module.js .
The outputs of the console.log statements will be:
console.log(PI) will output 3.14159 since we imported the named export PI .console.log(calculateArea(5)) will output 78.53975 since we imported the named export calculateArea and called the function with a radius of 5.console.log(calculateCircumference(5)) will output 62.8318 since we imported the default export calculateCircumference and called the function with a radius of 5. Consider the following code snippet:
// foo.js
function foo ( ) {
console . log ( `Foo` )
}
export { foo } What is the correct Syntax to import the function foo ?
옵션 :
import foo from "./foo"import foo as FooFunction from "./foo"import { foo } from "./foo"import { foo } from "./bar" Named exports are imported into different files with braces and must be imported with the name of the object, function or variable that was exported. In this example, a function with the name foo is exported from the file foo.js . Accordingly, the correct expression is: import { foo } from "./foo" .
In JavaScript, when importing a default export from a module, which syntax correctly assigns an alias "myAlias" to the default import?
Explanation: Both option B and C are valid syntaxes for importing a default export from a module and assigning it an alias. The difference between the two syntaxes is that option B does not use the { default as myAlias } syntax. This means that the default export will be imported under the name myAlias, rather than the name default.
Here is an example of how to use the option B syntax:{import myAlias from 'module';},This will import the default export from the module module and assign it the name myAlias. You can then use the myAlias variable to access the default export from the module module. Here is an example of how to use the option C syntax:{import { default as myAlias } from 'module';},This will import the default export from the module module and assign it the alias myAlias. You can then use the myAlias alias to access the default export from the module module.
The choice of which syntax to use is up to you. The option B syntax is simpler, but it can lead to collisions if there is already a variable named myAlias in the current scope. The option C syntax is more verbose, but it avoids collisions.
Which method is used to convert a JavaScript object to a JSON string while preserving data types like Dates and RegEx?
JSON.stringify()JSON.stringify() with a custom replacer functionJSON.toTypedString()JSON.stringify()JSON.stringify() with a custom replacer function. Explanation: The JSON.stringify() method can be used to convert a JavaScript object to a JSON string. However, by default, it will not preserve data types like Dates and RegEx . To preserve these data types, you can use a custom replacer function. The replacer function takes an object as input and returns a new object with the modified values.
The code below would show you how to use a custom replacer function to preserve data types:
function replacer ( key , value ) {
if ( typeof value === 'Date' ) {
return value . toJSON ( )
} else if ( typeof value === 'RegExp' ) {
return value . toString ( )
} else {
return value
}
}
const object = {
date : new Date ( ) ,
regex : / some regex / ,
}
const jsonString = JSON . stringify ( object , replacer )
