strict mode

1. strict mode를 사용하려고 할 때 스크립트와 함수에서 어떻게 선언해줘야 할까요? 그리고 클래스와 모듈은 왜 use strict를 선언하지 않아도 될까요?

   "use strict" 모드를 사용하려면 스크립트 레벨과 함수 레벨에서 선언해야 하며, 클래스와 모듈에서는 별도로 선언하지 않아도 됩니다.

   • 스크립트 전체에서 "use strict" 모드를 활성화하려면 스크립트 파일의 맨 위에 다음과 같이 선언합니다:

     "use strict";
     // 이후의 전역 범위의 코드는 엄격한 모드에서 실행됩니다.

   • 함수 내에서만 "use strict" 모드를 활성화하려면 해당 함수 내에서 다음과 같이 선언합니다:

     function myFunction() {
       "use strict";
       // 이 함수 내의 코드는 엄격한 모드에서 실행됩니다.
     }

     클래스와 모듈은 보통 이미 "use strict" 모드에서 실행되기 때문에 별도로 선언할 필요가 없습니다. 클래스와 모듈은 ES6 (ECMAScript 2015)에서 소개되었으며, 이 버전부터는 "use strict" 모드가 기본으로 활성화된 상태로 실행됩니다.

2. 변수, 프로퍼티, 함수, 매개변수, 문자열, this의 strict mode를 각각 최소 1개씩 말해보세요

   • 변수 (Variable):

     "use strict";
      var x = 10; // 엄격 모드에서 변수 선언이 누락되지 않아야 합니다.

   • 프로퍼티 (Property):

     "use strict";
      var obj = {};
      obj.prop = "Strict Mode"; // 엄격 모드에서 존재하지 않는 프로퍼티를 만들 수 없습니다.

   • 함수 (Function):

     "use strict";
      function myFunction() {
        // 엄격 모드에서 함수 매개변수의 이름은 고유해야 합니다.
        var arg = 5;
        var arg = 10; // 에러: 중복된 변수 선언
     }

   • 매개변수 (Parameter):

     function myFunction(param) {
        "use strict";
        // 엄격 모드에서 매개변수 이름은 고유해야 합니다.
        var param = 5; // 에러: 중복된 변수 선언
     }

   • 문자열 (String):

     "use strict";
      var str = "Strict Mode";
      str = "Modified String"; // 엄격 모드에서 문자열을 변경할 수 없습니다.

   • this:

     "use strict";
      function myFunction() {
        // 엄격 모드에서 함수 내에서의 this는 undefined입니다.
        console.log(this); // 출력: undefined
      }

3. strict mode를 사용할 때 주의해야 할 사항은 무엇인가요?

   • 문법 오류와 예외 처리를 엄격하게 다루며, 기존 코드의 동작을 변경할 수 있습니다.
   • 기존 코드와의 호환성을 확인하고 부작용을 주의해야 합니다.
   • strict mode에서는 함수 내에서 this 키워드가 전역 객체를 참조하지 않고 undefined를 가리킵니다. 이로 인해 this에 의존하는 코드에서 수정이 필요할 수 있습니다.
   • strict mode에서 eval() 함수의 사용이 제한됩니다. 보안상의 이유로 eval()을 사용하지 않는 것이 좋습니다.
   • strict mode에서 삭제 연산자(delete)를 사용하여 변수, 함수 또는 함수 매개변수를 삭제하는 것이 금지됩니다.

4. strict mode나 린트 도구 등을 사용하는 이유는 무엇인가요?

   • strict mode와 린트 도구는 코드 품질을 향상시킵니다. 엄격한 규칙과 가이드라인을 따르도록 강제함으로써 코드의 가독성을 높이고 버그와 오류를 줄입니다.
   • strict mode와 린트 도구는 일부 일반적인 오류와 버그를 사전에 방지합니다.
   • strict mode와 린트 도구는 JavaScript 언어의 최신 표준과 권고사항을 따르도록 도와줍니다.
   • 엄격한 코딩 규칙과 명확한 스타일 가이드를 준수하면, 코드를 작성한 개발자뿐만 아니라 다른 개발자들이 코드를 이해하고 유지 보수하는 데 도움이 됩니다.
   • strict mode와 린트 도구는 보안 문제를 사전에 방지하고, 취약점을 줄이는 데 도움을 줍니다. 예를 들어, XSS(Cross-Site Scripting) 공격과 같은 보안 취약점을 방지하는 데 도움이 됩니다.
   • 일부 린트 도구는 성능과 메모리 사용에 관한 조언을 제공하여 코드의 효율성을 향상시키는 데 도움을 줄 수 있습니다.
   • strict mode와 린트 도구는 팀 내에서 일관성을 유지하고 협업을 향상시킵니다.

5. strict mode에서는 기존에 무시되던 에러들이 throwing됩니다. 그 예시 두 가지를 말해 주세요.

   • 기본적으로 JavaScript는 변수를 선언하지 않고 사용하면 전역 변수로 취급합니다. Strict mode에서는 이를 방지하고 해당 변수가 선언되지 않았다는 에러를 던집니다.
   • 기존에는 함수 내에서 중복된 매개변수 이름을 사용해도 에러가 발생하지 않았지만, strict mode에서는 중복된 매개변수 이름을 사용하면 에러를 발생시킵니다.

ES6 함수의 추가 기능

1. 스프레드 오퍼레이터에 대해서 설명하고 왜 사용하는 지 말해주세요.

   • 스프레드 오퍼레이터(Spread Operator)는 JavaScript에서 배열, 객체, 함수 호출과 같은 여러 상황에서 사용되고 ... 기호로 표시된다.
   • 코드를 더 가독성 있고 유지보수가 쉽게 만들고, 데이터의 불변성을 유지하며 재사용성을 높이며, 코드 품질을 향상시키는 데 도움을 준다.

2. ES6 함수의 추가 기능을 말하고 각각 내용을 핵심만 설명하세요.

   • 화살표 함수 (Default Parameters): 간결한 함수 정의 구문으로 =>를 사용하고 this가 자동으로 외부 스코프를 참조하여 콜백 함수 등에서 유용하게 활용됨
   • 디폴트 매개변수 (Default Parameters): 함수 매개변수에 기본 값을 설정할 수 있어, 인수를 전달하지 않을 때 기본값이 사용된다.
   • Rest 파라미터 (Rest Parameters): 나머지 매개변수를 하나의 배열로 수집하여 함수 내에서 활용할 수 있다.
   • 스프레드 오퍼레이터 (Spread Operator): 배열을 확장하거나 객체를 병합하는 데 사용되며, ...로 표시된다.
   • 템플릿 리터럴 (Template Literals): 문자열을 역따옴표()로 감싸고 ${}`를 사용하여 변수 또는 표현식을 문자열에 삽입할 수 있다.
   • 클래스 (Classes): 객체 지향 프로그래밍을 더 간단하게 구현하기 위한 클래스 구문을 도입함.
   • Promise (Promises): 비동기 작업을 다루기 위한 표준화된 패턴으로, 비동기 코드를 보다 구조화하고 관리할 수 있음. .then() 및 .catch()를 사용하여 비동기 작업을 처리
   • 모듈 (Modules): 모듈 시스템을 표준으로 도입하여 코드를 더 모듈화하고 재사용 가능하게 만듦. export와 import 키워드를 사용하여 모듈을 정의하고 가져옴
   • 화살표 함수와 this: 화살표 함수는 this가 외부 스코프를 참조하므로 콜백 함수 내에서 this 오류를 피할 수 있습니다.
   • Promise와 비동기 프로그래밍: Promise는 비동기 작업을 보다 간편하게 처리하며, .then() 및 .catch()를 사용하여 비동기 코드를 구조화함
   • 클래스와 상속: 클래스를 사용하여 객체 지향 프로그래밍을 구현할 수 있으며, 상속과 다형성을 편리하게 활용할 수 있음
   • 모듈 시스템: 모듈을 사용하여 코드를 분리하고 모듈 간의 의존성을 관리하여 더 효율적인 코드 구성을 도와줌

3. 화살표 함수와 일반 함수의 차이는 무엇인가요?

   • 화살표 함수는 =>로 정의하고, 일반 함수는 function 키워드로 정의
   • this 바인딩: 화살표 함수는 외부 스코프에서 this를 상속하며, 일반 함수는 호출한 객체에 바인딩됨
   • 화살표 함수에서는 arguments 객체, 생성자 함수로 사용할 수 없습니다.
   • 화살표 함수는 매개변수 수가 고정되어 있습니다.
   • 화살표 함수는 간결한 구문을 가지고 있어, 간단한 함수를 간결하게 작성하는 데 유용합니다.

4. ES6 클래스와 ES5 함수 생성자의 차이점은 무엇인가요?

   • ES6 클래스는 class 키워드를 사용하고, ES5 함수 생성자는 함수로 정의됨
   • ES6 클래스는 extends 키워드를 사용하여 상속을 정의하며, ES5에서는 수동으로 설정해야 함
   • ES6 클래스는 생성자 메서드를 constructor로 정의하고 초기화 작업을 수행합니다. ES5에서는 생성자 함수 내에서 초기화 작업을 수행합니다.
   • ES6 클래스는 함수 키워드 생략이 가능하며, ES5에서는 메서드를 별도로 함수로 정의해야 합니다.
   • ES6 클래스는 static 키워드로 정적 메서드를 정의하고, ES5에서는 프로토타입에 메서드를 추가해야 합니다.
   • ES6 클래스는 get 및 set 키워드로 접근자 프로퍼티를 정의할 수 있으며, ES5에서는 더 복잡한 방식으로 구현해야 합니다.
   • ES6 클래스는 super 키워드로 상위 클래스의 메서드와 생성자에 접근할 수 있고, ES5에서는 명시적으로 설정해야 합니다.
   • ES6 클래스는 상속 관계와 프로토타입 체인을 더 명확하게 정의하며, ES5에서는 수동 설정이 필요합니다. ES6 클래스는 객체 지향 프로그래밍을 더 간결하게 구현하는 데 도움을 줍니다.

5. 화살표 함수로 생성자 함수와 인스턴스를 생성할 수 있는지 판단하고 그 이유를 설명해 주세요.

   • 화살표 함수로 생성자 함수와 인스턴스를 생성할 수 없습니다. 이는 화살표 함수의 특성 때문입니다.
   • 화살표 함수의 주요 특징 중 하나는 this를 가질 수 없다는 것입니다. 화살표 함수는 항상 외부 스코프에서 this 값을 상속받으며, 내부적으로 this를 바인딩하지 않습니다. 이로 인해 생성자 함수의 역할을 수행할 수 없습니다.