property attribute

면접 질문

1. 프로토타입 체인에 대해서 말해주세요.

• JavaScript에서 객체 간 상속을 구현하는 메커니즘
• JavaScript는 프로토타입 기반 언어로서, 모든 객체는 다른 객체로부터 상속받은 프로토타입(원형)을 가지며, 이 프로토타입들은 체인 형태로 연결됩니다. 이를 통해 객체는 프로토타입 체인을 따라 상위 객체의 속성과 메서드에 접근할 수 있습니다.
• 프로토타입 체인은 객체 간의 코드 재사용과 상속을 가능하게 하며, JavaScript에서 객체 지향 프로그래밍을 구현하는 핵심 메커니즘 중 하나입니다.

"속성(Attribute)"와 "요소(property)"의 차이가 무엇인가요?

• 속성은 주로 HTML에서 사용되며 HTML 요소의 특성을 정의하는 데 사용되는 용어

  예시: HTML 이미지 요소인 <img> 의 src 속성

• 요소는 JavaScript와 관련하여 객체의 속성 또는 멤버를 가리키는 용어
• 요소(property)는 객체의 일부로서 JavaScript 코드에서 접근하고 조작할 수 있습니다.

  예시: JavaScript에서 객체의 length 요소(property)

2. JS 개발 시, 프로퍼티 어트리뷰트를 조작할 일이 많이 없거나 아예 없었을텐데, 이 개념을 알아야하는 이유는 무엇인가요?

3. 프로퍼티 어트리뷰트란 무엇이며 어떤 정보를 포함하나요?

• 프로퍼티 어트리뷰트는 JavaScript 객체의 속성에 대한 특성을 설명하는 메타데이터입니다. 각 프로퍼티마다 값, 쓰기 가능 여부, 열거 가능 여부, 설정 가능 여부와 같은 정보가 포함됩니다. 이 정보는 프로퍼티의 동작과 특성을 결정합니다.
• +) 메타데이터는 데이터에 대한 정보를 담은 데이터로, 데이터의 특성, 의미, 구조 등을 설명하는 역할을 합니다.

4. 프로퍼티의 어트리뷰트를 정의할 때 사용하는 메서드에 대해 설명해주세요.

• Object.defineProperty(obj, prop, descriptor): 객체의 프로퍼티 어트리뷰트를 정의 또는 수정하는 메서드로, 프로퍼티의 값, 쓰기 가능 여부, 열거 가능 여부, 설정 가능 여부 등을 설정할 수 있습니다.
• Object.defineProperties(obj, descriptors): 여러 프로퍼티의 어트리뷰트를 동시에 정의 또는 수정하는 메서드로, descriptors 객체를 사용하여 여러 프로퍼티를 설정할 수 있습니다.
• Object.getOwnPropertyDescriptor(obj, prop): 객체의 특정 프로퍼티에 대한 어트리뷰트 정보를 가져오는 메서드로, 프로퍼티의 값과 어트리뷰트 상태를 확인할 수 있습니다.

5. 프로토타입 내부 슬롯 [[Prototype]]에 직접 접근할 수 없는 이유와 접근 방법에 대해 설명해 주세요.

• 프로토타입 내부 슬롯 [[Prototype]]에는 직접 접근할 수 없습니다. 이렇게 설계된 이유는 JavaScript의 프로토타입 체인 시스템을 보호하고 안전성을 유지하기 위함입니다. 대신, 객체의 프로토타입에 접근하려면 다음과 같은 간접적인 방법을 사용해야 합니다:

  • Object.getPrototypeOf(obj) 메서드를 사용하여 객체의 프로토타입을 가져올 수 있습니다.
  • __proto__ 접근자를 사용하여 객체의 프로토타입에 접근할 수도 있지만 표준 ECMAScript에서는 권장하지 않습니다.
  • Object 생성자 함수를 사용하여 객체를 생성하면서 프로토타입을 설정할 수 있습니다.
  • ES6 클래스를 사용하여 상속 관계를 설정할 수 있습니다.

생성자 함수에 의한 객체 생성

면접 질문

1. 생성자 함수에서 new를 붙이는 이유와 붙이지 않으면 어떻게 되는 지 설명해주세요.

• JavaScript에서 생성자 함수에 new를 붙이는 이유는 생성자 함수를 통해 새로운 객체를 생성하고 초기화하기 위함입니다. new를 붙이지 않으면 생성자 함수는 일반 함수처럼 동작하며, this가 전역 객체를 가리키므로 원치 않는 부작용이 발생할 수 있습니다. 따라서 생성자 함수를 사용할 때는 항상 new를 사용하여 새로운 객체를 생성하고 초기화해야 합니다.

2. 생성자 함수의 인스턴스 생성 과정을 설명해주세요.

• 생성자 함수를 정의합니다.
• new 키워드와 함께 생성자 함수를 호출합니다.
• 빈 객체(인스턴스)가 생성됩니다.
• 생성자 함수 내에서 this 키워드를 사용하여 인스턴스를 초기화하고 속성을 설정합니다.
• 생성자 함수가 끝나면 초기화된 인스턴스가 반환됩니다.

3. 생성자 함수에서 this 키워드는 무엇을 가리키나요?

• 생성자 함수에서 this 키워드는 현재 생성 중인 인스턴스를 가리킵니다. 이를 통해 생성자 함수 내에서 인스턴스의 속성을 초기화하거나 설정할 수 있으며, 각 인스턴스는 자체적인 속성을 가지게 됩니다.

4. 객체를 생성할 때 객체 리터럴에 의한 방식 대신 생성자 함수에 의한 방식을 사용하는 이유에 대해 설명해주세요.

• 재사용성과 일관성을 높일 수 있습니다.
• 객체의 초기 상태를 설정하고 속성을 초기화하기 용이합니다.
• 프로토타입 체인을 활용하여 상속 구조를 만들 수 있습니다.
• 클래스 개념을 지원하고 객체 지향 프로그래밍을 구현하기 용이합니다.
• 객체 생성 과정을 커스터마이징할 수 있어 특수한 요구사항을 충족시키기 용이합니다.

5.new.target 은 주로 언제 사용되는지와 어떤 값들을 반환하는지 설명해 주세요.

• new.target은 JavaScript에서 클래스나 생성자 함수 내에서 사용되며, 현재 함수가 생성자로 호출되었는지 확인하는 데 사용됩니다. 값으로는 생성자 함수를 가리키며, new로 생성자 함수를 호출한 경우에는 해당 생성자 함수를, 그렇지 않은 경우에는 undefined를 반환합니다. 이를 활용하여 생성자 호출 여부를 확인하고 필요한 로직을 수행할 수 있습니다.

함수와 일급 객체

면접 질문

1. 함수형 프로그래밍에 대해서 설명해주세요.

• 같은 입력에 대해 항상 같은 결과를 반환하며 함수 내부에서 외부 상태를 변경하지 않고, 외부 상태에 의존하지 않는 순수 함수를 중요시 한다.
• 함수형 프로그래밍에서 데이터는 불변(immutable)해야 합니다. 한 번 생성된 데이터는 변경되지 않으며, 새로운 데이터를 생성하하여 안정성을 유지합니다.
• 함수를 인자로 받거나, 함수를 반환하는 고차 함수를 활용하여 코드를 추상화하고 모듈화합니다.
• 여러 함수를 조합하여 복잡한 함수를 만들고 코드를 모듈화합니다.(함수 합성)
• 함수형 프로그래밍은 "무엇(What)"을 수행해야 하는지를 중점적으로 다룹니다. "어떻게(How)"를 명시적으로 구현하는 대신 원하는 결과를 선언적으로 표현합니다.
• 작은 함수와 모듈을 조합하여 코드를 작성하고 재사용성을 높입니다.

2. 함수는 어떤 조건을 만족하기 때문에 일급객체인가요?

• 함수가 일급 객체로 간주되려면 세 가지 조건을 만족해야 합니다.
• 함수는 변수에 할당할 수 있고, 다른 함수의 인자로 전달하거나 반환값으로 사용할 수 있으며, 배열이나 객체 내에서 저장할 수 있습니다.
• +) 이러한 특징은 함수형 프로그래밍 패러다임을 구현하고 다양한 프로그래밍 패턴을 사용하는 데 매우 유용합니다.

3. 일급 객체, 일급 함수와 고차 함수에 대해 설명해주세요.

• 일급 객체는 변수에 할당하고 함수의 인자로 전달하거나 반환값으로 사용할 수 있는 객체를 나타냅니다. JavaScript에서 함수는 일급 객체로 취급되어 변수에 저장하고 다른 함수에 전달하거나 반환할 수 있습니다.
• 일급 함수는 함수가 일급 객체로 다루어지는 언어에서, 함수를 변수에 저장하고 함수의 인자로 전달하거나 함수의 반환값으로 사용할 수 있는 함수를 의미합니다. JavaScript는 일급 함수를 지원하며, 함수를 변수에 할당하고 다른 함수에 전달하거나 반환할 수 있습니다.
• 고차 함수는 함수를 인자로 받거나 함수를 반환하는 함수를 의미하며, 함수 조합과 추상화에 사용됩니다. JavaScript에서는 고차 함수를 쉽게 작성하여 함수 합성 및 다양한 작업을 수행할 수 있습니다.

4. 일급 객체란 무엇인가요?

• 일급 객체(First-Class Object)는 프로그래밍 언어에서 객체를 변수에 할당하고 함수의 인자로 전달하며 함수의 반환값으로 사용할 수 있는 객체를 나타냅니다. JavaScript에서 함수는 일급 객체로 취급되며, 이는 함수를 변수에 저장하고 다른 함수에 전달하거나 반환값으로 사용할 수 있음을 의미합니다.

5. 함수의 arguments 프로퍼티를 배열로 변환할 수 있는 방법에 대해 설명해 주세요.

• arguments 객체를 전개 연산자(...)를 사용하여 배열로 변환할 수 있습니다.

  가독성이 좋고 간결한 코드를 작성 가능, ES6에서 도입된 기능으로 모던한 JavaScript 코드에 적합

• Array.from() 메서드를 사용하여 arguments 객체를 배열로 변환할 수 있습니다.

  Array.from()은 다른 이터러블 객체도 배열로 변환할 수 있어 더 유연함

• Array.prototype.slice.call()을 사용하여 arguments 객체를 배열로 변환할 수 있습니다.

  ES5 이전의 환경에서도 사용 가능, 코드가 상대적으로 길어질 수 있으며 가독성이 다소 낮을 수 있습니다.

• ES6 화살표 함수를 사용하면 arguments 객체를 ...arguments 구문을 통해 배열로 변환할 수 있습니다.

  단점 : 화살표 함수는 arguments 객체를 바인딩하지 않으므로 함수 내에서만 사용 가능합니다. 다른 함수나 메서드 내에서는 사용할 수 없습니다.

  • 화살표 함수(arrow function)는 함수 내에서 arguments 객체를 바인딩하지 않는다는 것은 arguments 객체를 해당 함수 내에서 사용할 수 없다는 것을 의미합니다.
  • 함수 내에서 변수를 사용할 때, 그 변수가 어떤 값을 참조하고 있는지를 결정하는 것을 "바인딩"이라고 합니다. 일반적인 함수(일반 함수 표현식)의 경우에는 함수 내부에서 arguments 객체를 바인딩하며, 이 객체를 사용하여 함수에 전달된 인자(매개변수)에 접근할 수 있습니다.
  • 하지만 화살표 함수는 arguments 객체를 바인딩하지 않기 때문에 함수 내에서 arguments를 사용하려고 하면 오류가 발생하거나 상위 스코프의 arguments를 참조하게 됩니다. 따라서 화살표 함수 내에서는 arguments 객체 대신에 일반적인 매개변수를 사용하는 것이 좋습니다.

• +) 일반적으로는 ES6 환경에서는 전개 연산자나 Array.from()을 선호하며, ES5 이전의 환경에서는 Array.prototype.slice.call()을 사용하는 것이 좋습니다.