[ Front-End ] Javascript 관련 면접 질문

Javascript 관련 면접질문

원시타입 6가지

string, number ,boolean ,symbol ,null ,undefined

원시타입은 immutable

var str = "123"
var sliceStr = str.slice(0,2)

console.log(str)  //123
console.log(sliceStr) //12

참조타입

• 원시타입이 아닌 Object 기반의 모든 타입

Object, Function, Array

불변 객체

• 원복객체를 손상시키지 않고, 복사한 객체를 넘겨주는 방법

var obj = { name: 'arthur' }
var cpyObj = Object.assign({}, obj)
cpyObj.name = 'youngsoo'

console.log(obj.name)     // arthur
console.log(cpyObj.name)  // youngsoo

Shallow Copy

• 단, 안에 참조형이 있는경우 값는 변한다.

var obj = { list: [1,2,3] }
var cpyObj = Object.assign({}, obj)

cpyObj.list.push(4)

console.log(obj.list)     // 1,2,3,4
console.log(cpyObj.list)  // 1,2,3,4

Deep Copy

Json Method | Easy one

var obj = { list: [1,2,3] }
var cpyObj = JSON.parse(JSON.stringify(obj))

cpyObj.list.push(4)

console.log(obj.list)     // 1,2,3
console.log(cpyObj.list)  // 1,2,3,4

• 1 Depth 까지는 잘 복사되지만, 그 이상의 Depth에서는 유실
• 함수(functions), Date 객체, 정규표현식, Infinity 등등의 데이터는 복사되지 않고 유실

재귀함수 | Not Bad

function cloneObject(obj) {
  var clone = {};
  for (var key in obj) {
    if (typeof obj[key] == "object" && obj[key] != null) {
      clone[key] = cloneObject(obj[key]);
    } else {
      clone[key] = obj[key];
    }
  }

  return clone;
}


var obj = { list: [1,2,3] }
var cpyObj = cloneObject(obj)

cpyObj.list.push(4)

console.log(obj.list)     // 1,2,3
console.log(cpyObj.list)  // 1,2,3,4

Lodash | Best Practice

var obj = { list: [1,2,3] }
var cpyObj = _.cloneDeep(obj)

cpyObj.list.push(4)

console.log(obj.list)     // 1,2,3
console.log(cpyObj.list)  // 1,2,3,4

호이스팅

• 선언된 변수의 선언부를 함수 스코프 최상단으로 위치
• 실제 코드가 변경되는 건 아니며 메모리에는 변화는 없다.

함수선언문과 함수표현식

foo();
foo1();

function foo() { // 함수선언문
  console.log("hello");
}

var foo1 = function() { // 함수표현식
  console.log("hi");
}

Parser 는 아래와 같이 받아들인다

var foo1;

function foo() { // 함수선언문
        console.log("hello");
}

foo();
foo1();

foo1 = function() {
  console.log("hi");
}

결과

hello
VM60:2 Uncaught TypeError: foo1 is not a function
    at <anonymous>:2:1
(anonymous) @ VM60:2

호이스팅 우선순위

1. 변수 선언
2. 함수선언문
3. 변수값 할당

var foo1 = "1"

function foo1() {}
function foo2() {}

var foo2 = "2"

console.log(typeof foo1)
console.log(typeof foo2)

호이스팅 결과

var foo1;
var foo2;

function foo1() {}
function foo2() {}

foo1 = "1"
foo2 = "2"

변수값과 함수선언이 동시에 되었을때 변수값 할당이 된다.

ES6 변수 정의

var

• 함수 스코프 | 호이스팅이 O
• 중복정의 가능
• 재할당 가능

let

• 블록 스코프
• 중복정의 불가능
• 재할당 가능

const

• 블록 스코프
• 중복정의 불가능
• 재할당 불가능

TDZ ( Temporal Dead Zone)

• let과 const도 호이스팅이 일어나긴 하지만 초기화가 이뤄지기전에 변수를 사용하려고 하면 참조에러가 발생

let a = 1;

if (true) {
  console.log(a) // error
  let a = 2;
}

Lexical Scope

• 함수를 어디서 호출하는지가 아닌, 어디에 선언하였는지에 따라 결정되는것

var x = 1;

function foo() {
  var x = 2;
  foo2();
}

function foo2() {
  console.log(x)
}

foo()     //1
foo2()    //1

클로져

• 렉시컬 스코프를 기억하여 접근이 가능한 상태

function outer() {
  const name = "arthur"

  return function inner() {
    console.log(name)
  }
}

outer()();

실행 컨텍스트

• 자바스크립트의 코드들이 실행되기 위한 환경
• 자바스크립트의 코드가 실행되기 위해서는 변수객체, 스코프체인, this 정보들을 담고 있는 곳

순서

• 전역 컨텍스트 하나 생성 후에 함수 호출할 때마다 함수 컨텍스트가 생성
• 컨텍스트를 생성시에 변수객체, 스코프 체인, this가 생성된다.
• 컨텍스트 생성 후 함수가 실행되는데 사용되는 변수들은 변수 객체 안에서 값을 찾고 없다면 스코프체인을 따라 올라가며 찾음.
• 함수 실행이 마무리되면 해당 컨텍스트는 사라짐. 페이지가 종료되면 전역 컨텍스트가 사라짐

상세

 

• Lexical Environment
  • Environment Record
  • Reference to the outer environment
  • This binding

• Variable Environment

출처: poiemaweb

이벤트

Call Stack에

• 함수 실행이 요청되면 Call Stack에 쌓이게 된다.

Event Queue

• 비동기 처리 함수의 콜백함수, 비동기식 이벤트 핸들러
• Call Stack이 비었을때 순차적으로 Call Stack으로 이동되서 실행

Event Loop

• Call Stack 내에서 현재 실행중인 task가 있는지 확인
• Event Queue에 task가 있는지 확인
• Call Stack이 비어져 있다면 Event Queue내의 task를 Call Stack으로 이동시킨다

function func1() {
  console.log('func1');
  func2();
}

function func2() {
  setTimeout(function () {
    console.log('func2');
  }, 0);

  func3();
}

function func3() {
  console.log('func3');
}

func1();

// func3 > func1 > func2

hasOwnProperty

• 프로토타입 체인을 따라 상속되는 프로퍼티 제거

AJAX

• javascript 를 이용해 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신방식
• 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법

이점

• AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest객체를 통해 서버에 request한다.
• 이 경우, JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

함수형 프로그래밍

• 부수 효과가 없는 순수 함수를 1급 객체로 간주하여 파라미터로 넘기거나 반환값으로 사용할 수 있으며, 참조 투명성을 지킬 수 있다.

순수함수

• 부수효과가 없는 함수 즉, 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수

1급객체

1. 변수나 데이타에 할당 할 수 있어야 한다.
2. 객체의 인자로 넘길 수 있어야 한다.
3. 객체의 리턴값으로 리턴 할수 있어야 한다.

Reference Site

• https://sunnykim91.tistory.com/121
• https://m.blog.naver.com/z1004man/222051088407
• https://uwostudy.tistory.com/55
• https://poiemaweb.com/js-execution-context
• https://mangkyu.tistory.com/111