기술면접 대비 [1탄]

나는야 코드 짜는 감자

요즘 면접을 보러 다니니 참 공부를 안했다는게 많이 자책이 된다.

그동안 받았던 기술면접 질문들과 잘못 말했던 부분들을 정리하는 시간을 가져보고자 한다.

JavaScript 편

1. NameSpace 패턴

이름이 존재하는 공간 특정 이름으로 선언된 변수와 함수를 쉽게 가져다 쓸 수 있도록 만든 메커니즘

예시 소스를 보자

// 부분 네임스페이스 생성

app.subApp = {};
app.subApp.tempDate = new Date();
app.subApp.temp = function () {
  	// subApp을 가리킴
    console.log('temp:', this); 
    return `${app.name}의 입사일은 ${this.tempDate}입니다.`
}

어 이거 실무에서 많이 보던건데....
아... 이걸 네임스페이스 패턴이라고 하는구나...

조금 더 쉽게 설명하기 위해 도서관을 예를 들어보자

javaScript 도서관

우리가 큰 도서관에 있다고 하자
이 도서관에는 수많은 책들이 있고, 이 책들을 찾기 쉽게 하기 위해 다양한 섹션으로 구분되어 있다.
예를 들어, "문학", "과학", "역사" 등의 섹션이 있을 수 있다.
각 섹션 안에서, 책들은 그들의 주제나 저자에 따라 더 세분화되어 정리된다.

이 도서관은 JavaScript의 네임스페이스 패턴과 유사한데,
여기서 도서관은 전체 JavaScript 프로그램을 나타내고,
각 섹션(문학, 과학, 역사 등)은 네임스페이스 이다.
섹션 내의 책들은 그 네임스페이스에 속한 변수, 함수, 객체 등을 의미한다.

네임스페이스 패턴을 사용하면, 각기 다른 네임스페이스에 같은 이름의 변수나 함수를 사용할 수 있다.
이것은 도서관에서 "문학" 섹션과 "과학" 섹션에 같은 이름의 책이 있을 수 있지만,
서로 다른 섹션에 있기 때문에 혼란이 없는 것과 같다.

const Library = {
    Literature: {
        bookName: "Romeo and Juliet",
        read: function() {
            console.log("Reading Literature: " + this.bookName);
        }
    },
    Science: {
        bookName: "A Brief History of Time",
        read: function() {
            console.log("Reading Science: " + this.bookName);
        }
    }
};

Library.Literature.read(); // "Reading Literature: Romeo and Juliet"
Library.Science.read();    // "Reading Science: A Brief History of Time"

이 예시에서 Library는 전체 도서관(즉, 전역 객체)입니다.
Literature와 Science는 네임스페이스로,
각각의 네임스페이스 안에 bookName과 read 함수가 있습니다.
이렇게 함으로써, 같은 이름의 속성과 함수를 서로 다른 네임스페이스에서 겹치지 않게 사용할 수 있습니다.

2. arrow fuction vs 일반 fuction

ES6 버전부터 함수를 화살표 로 사용할 수 있는 arrow fuction 이 도입되었다.

// 일반 함수
function sum(a, b) {
    return a + b;
}

// 화살표 함수
const sum = (a, b) => a + b;

이렇게 말이다.

두 함수는 모양 뿐만 아니라 기능도 다르다는 사실 알고 있었나?
하지만 나는 몰랐찌...

그렇다면 뭐가 다를까??

1. this 키워드의 차이

일반 함수: '어디서 호출되었는지'에 따라 this의 값이 달라집니다. 예를 들어, 어떤 객체의 메소드로 호출하면 this는 그 객체를 가리킵니다.
혼자 호출하면 this는 전역 객체(브라우저에서는 보통 window)가 됩니다.

화살표 함수: '어디에 선언되었는지'에 따라 this의 값이 정해집니다.
화살표 함수는 자신을 둘러싼 외부 함수의 this 값을 '계승'합니다.
즉, 화살표 함수 자체는 this를 가지지 않습니다.

2. 생성자 함수로 사용 여부

일반 함수: new 키워드를 사용해 새로운 객체를 만들 때 사용할 수 있습니다.

화살표 함수: 화살표 함수는 new와 함께 사용할 수 없습니다.
즉, 생성자 함수로 사용할 수 없습니다.

3. 인자 객체(arguments)

일반 함수: 함수 내부에서 arguments 객체를 사용해 모든 인자를 볼 수 있습니다.

화살표 함수: arguments 객체를 사용할 수 없습니다. 대신,
화살표 함수는 자신을 둘러싼 외부 함수의 arguments 객체를 참조합니다.

4. 반환 방식

일반 함수: 반드시 return 문을 사용해 값을 반환해야 합니다.

화살표 함수: 중괄호를 생략하면 자동으로 반환됩니다. 중괄호를 쓰면 return 문을 사용해야 합니다.

// this 바인딩 차이 예시
function Person() {
    this.age = 0;

    setInterval(function growUp() {
        // 여기서 this는 전역 객체 또는 undefined를 가리킨다.
        this.age++;
    }, 1000);
}

function Person() {
    this.age = 0;

    setInterval(() => {
        // 화살표 함수에서 this는 Person 객체를 가리킨다.
        this.age++;
    }, 1000);
}



//1. 생성자 함수로 사용 여부

//일반함수 
function Person(name) {
    this.name = name;
}

const person = new Person("Alice");
console.log(person.name); // 출력: Alice

// 화살표 함수 사용 예시 (생성자로 사용 불가능)

const Person = (name) => {
    this.name = name;
}

// 아래 코드는 에러를 발생시킵니다
//const person = new Person("Alice");




// 인자 객체 

// 일반함수
function sum() {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}

console.log(sum(1, 2, 3)); // 출력: 6



// 화살표 함수
const sum = () => {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}

// 아래 코드는 에러를 발생시킵니다
//console.log(sum(1, 2, 3));




// 반환 방식 차이 


//일반함수 
function sum(a, b) {
    return a + b;
}

console.log(sum(5, 7)); // 출력: 12


// 화살표 함수
const sum = (a, b) => a + b;

console.log(sum(5, 7)); // 출력: 12

3. ES6 와 ES 이전버전의 차이

javaScript 가 ES6 로 업데이트 되며 다양한 기능들이 업데이트 되는 등 중대한 업데이트가 되었다.

[업데이트 된 대표적인 기능들]

1. Let과 Const
   let: 변수를 블록 스코프로 선언합니다. let으로 선언된 변수는 선언된 블록 내에서만 유효합니다.
   const: 상수 값을 선언하는 데 사용되며, 블록 스코프를 가집니다. 한 번 할당되면 값을 변경할 수 없습니다.

2. 화살표 함수 (Arrow Functions)
   간결한 문법을 사용하여 함수를 정의할 수 있게 해줍니다. 또한, 화살표 함수는 외부 함수의 this 값을 상속받습니다.

3. 클래스 (Classes)
   JavaScript에 클래스 기반 객체 지향 프로그래밍을 도입합니다. 이전 버전에서는 프로토타입 기반 상속을 사용했으나, ES6에서는 보다 익숙한 클래스 문법을 제공합니다.

4. 모듈 (Modules)
   import와 export 문을 사용하여 모듈을 생성하고 사용할 수 있게 되었습니다. 이를 통해 코드를 분리하고 재사용할 수 있습니다.

5. 템플릿 리터럴 (Template Literals)
   백틱(`)을 사용한 문자열은 멀티라인 문자열과 문자열 내부에 변수나 표현식을 삽입(${expression})할 수 있게 해줍니다.

6. 기본 매개변수 (Default Parameters)
   함수 매개변수에 기본값을 제공할 수 있게 됩니다.

7. 비구조화 할당 (Destructuring Assignment)
   객체나 배열로부터 속성이나 요소를 쉽게 추출할 수 있는 문법을 제공합니다.

8. 확장 연산자 (Spread Operator)
   배열이나 객체의 요소를 쉽게 전개하거나, 함수의 인자 목록으로 사용할 수 있습니다.
   ex)
   배열 복사: let newArr = [...oldArr];
   배열 합치기: let combinedArr = [...arr1, ...arr2];
   함수 인자 전달: function sum(a, b, c) { return a + b + c; } sum(...[1, 2, 3]);

9. Promise와 비동기 프로그래밍
   비동기 연산을 보다 편리하게 관리할 수 있는 Promise 객체가 도입되었습니다.

10. 맵(Maps)과 세트(Sets)
    전통적인 객체 대신 키-값 쌍을 저장하는 Map과 값의 집합을 관리하는 Set이 도입되었습니다.

11. 이터레이터(Iterator)와 제너레이터(Generator)
    새로운 순회 가능한 데이터 구조와 함께, 이터레이터와 제너레이터를 사용해 사용자 정의 순회 동작을 구현할 수 있게 되었습니다.

12. 심볼(Symbol)
    고유하고 변경 불가능한 데이터 타입으로, 주로 객체 속성의 키로 사용됩니다.
    이러한 변화들은 JavaScript를 보다 현대적이고 강력한 언어로 발전시켰으며, 대규모 애플리케이션 개발과 함수형 프로그래밍 스타일을 지원하는 데 큰 도움을 주었습니다.

javaScript 의 질문은 여기까지
다음시간에는 서버와 백엔드 에서 받은 질문을 정리해보도록 하겠다.