JavaScript/함수26

• 

  [JavaScript]함수로 클래스 만드는 방법 클래스 기반의 언어와 프로토타입 기반의 언어 ES6부터 JavaScript에서 class 키워드를 사용하여 클래스를 정의할 수 있지만, C++, C#, Java와 같은 클래스 기반의 언어에서 사용하는 클래스와 100% 동일하게 동작하지 않습니다. 따라서, JavaScript에서 class 키워드를 사용하여 클래스를 정의하는 문법을 이해하기 전에 클래스 기반의 언어와 프로토타입 기반의 언어에 대해 간단하게 구분할 수 있어야 하고 class 키워드가 도입되기 전에 JavaScript에서 클래스를 어떻게 정의했는지 알아야 할 필요가 있습니다. 클래스 기반의 언어는 클래스로 객체의 기본적인 형태와 기능(필드와 메서드)을 정의하고 new 키워드와 생성자로 객체를 생성할 수 있습니다. 다음 예제는 클래스 기반의 언.. JavaScript/함수 2022. 11. 9.

• 

  [JavaScript]화살표 함수를 사용하면 안 되는 경우 화살표 함수를 사용하면 안 되는 경우 JavaScript ECMAScript 6부터 도입된 화살표 함수(arrow function)는 function 키워드를 사용하여 함수를 정의하는 것보다 적은 타이핑을 요구하고 깔끔한 코드를 작성할 수 있으며, React 클래스 컴포넌트의 생성자에서 이벤트 핸들러 함수를 바인딩하지 않아도 된다는 장점이 존재합니다. 하지만, 모든 기능은 장점이 있으면, 단점도 존재합니다. function 키워드 또는 리터럴 방식으로 정의된 함수와 화살표 함수는 동일하게 동작하지 않습니다. 따라서, 이 둘의 차이점을 모르면, 화살표 함수를 잘못 활용할 수 있습니다. 이번 포스팅은 JavaScript에서 화살표 함수를 사용하면 안 되는 경우에 대해 소개합니다. 객체의 메서드 객체의 메서드.. JavaScript/함수 2022. 10. 9.

• 

  [JavaScript]함수 호이스팅(Function Hoisting) 호이스팅(Hoisting) 호이스팅은 코드를 실행하기 전에 선언된 변수 및 함수를 해당 범위의 맨 위로 이동하는 JavaScript의 메커니즘입니다. 일반적으로 선언되지 않은 변수를 접근할 수 없습니다. 마찬가지로, JavaScript에서도 선언되지 않은 변수를 접근할 수 없으며, 선언되지 않은 변수를 접근하면 ReferenceError가 발생합니다. 하지만, JavaScript는 다음 예제처럼 나중에 선언되는 변수를 미리 접근할 수 있습니다. console.log(value); // undefined var value = 'Hello' console.log(value); // Hello ReferenceError는 발생하지 않으나 JavaScript는 호이스팅 된 변수를 undefined로 초기화합니다.. JavaScript/함수 2022. 7. 7.

• 

  [JavaScript]프로토타입의 프로퍼티 프로토타입의 프로퍼티 프로토타입 확장에서 프로토타입 객체인 Object.prototype에 새로운 함수를 추가하는 방법을 소개하였습니다. [JavaScript]프로토타입 확장(prototype extend) 프로토타입 확장 지금까지 프로토타입을 주제로 작성된 포스팅 내용을 정리하자면, 모든 객체(숫자, 문자열, 객체, 배열, 함수 등)는 내부 프로퍼티인 [[Prototype]]를 가지고 있습니다. 프로토타입 developer-talk.tistory.com 즉, 프로토타입 객체도 일반 객체처럼 동적으로 프로퍼티를 추가 또는 삭제할 수 있습니다. 다음 예제는 최상위 프로토타입 객체인 Object.prototype에 두 개의 프로퍼티를 추가합니다. // address 프로퍼티 추가(문자열) Object.pro.. JavaScript/함수 2022. 7. 6.

• 

  [JavaScript]프로토타입 확장(prototype extend) 프로토타입 확장 지금까지 프로토타입을 주제로 작성된 포스팅 내용을 정리하자면, 모든 객체(숫자, 문자열, 객체, 배열, 함수 등)는 내부 프로퍼티인 [[Prototype]]를 가지고 있습니다. 프로토타입 관련 포스팅(클릭하면 해당 포스팅으로 이동합니다.) ☞ [JavaScript]프로토타입(Prototype)이란? ☞ [JavaScript]프로토타입 체인(Prototype Chain) ☞ [JavaScript]함수의 프로토타입(prototype in function) [[Prototype]]는 현재 객체의 상위 객체를 참조하며, 이 상위 객체를 프로토타입이라고 말합니다. 그리고 프로토타입 체인으로 상위 객체를 계속해서 참조했을 때, 프로토타입 체인의 종점은 Object.prototype 객체입니다. 즉,.. JavaScript/함수 2022. 7. 6.

• 

  [JavaScript]함수의 프로토타입(prototype in function) 함수의 프로퍼티 JavaScript에서 함수는 객체이지만, 일반 객체와는 다르게 함수 객체만의 표준 프로퍼티가 존재합니다. 이번 포스팅에서는 함수의 내부 프로퍼티인 [[Prototype]]와 다른 객체에 존재하지 않는 prototype 프로퍼티에 대해 설명합니다. 함수의 표준 프로퍼티인 length, name에 대해서는 아래 포스팅에서 자세하게 설명합니다. [JavaScript]함수의 length, name 프로퍼티 함수는 특별한 객체 JavaScript에서 함수는 객체입니다. 객체와 마찬가지로 함수에는 프로퍼티와 함수가 존재하며, 함수를 변수, 배열, 객체에 할당하거나 다른 함수에 인수로 전달할 수 있습니다. developer-talk.tistory.com 프로토타입에 대한 내용은 아래 포스팅에서 자세.. JavaScript/함수 2022. 7. 5.

• 

  [JavaScript]프로토타입 체인(Prototype Chain) 프로토타입 체인(Prototype Chain) JavaScript에서 변수를 객체(배열, 객체, 함수 등)로 선언하면 상위 객체의 프로퍼티를 호출할 수 있는데, 여기서 말하는 상위 객체를 프로토타입이라고 말합니다. var arr = []; // 배열을 할당했으므로 프로토타입은 Array var obj = {}; // 객체를 할당했으므로 프로토타입은 Object console.dir(arr); console.dir(obj); [실행 결과] 그리고 상위 객체의 프로퍼티를 호출할 수 있도록 해주는 메커니즘을 프로토타입 체인(Prototype Chain)이라고 말합니다. var arr = []; var obj = {}; arr.push(1); // Array는 push() 함수를 사용할 수 있음 obj.push.. JavaScript/함수 2022. 7. 5.

• 

  [JavaScript]함수와 this(Function and this) 전역 객체 JavaScript 함수 내부에서 this를 사용한 경우 this는 전역 객체에 바인딩되며, Chrome과 같은 브라우저에서 JavaScript 코드를 실행하는 경우 전역 객체는 window 객체입니다. 다음 예제를 Chrome 개발자 도구 콘솔 창에서 실행 후 함수 내부의 this가 어떻게 바인딩되는지 확인해봅시다. function show() { console.log(window === this); } show(); [실행 결과] Chrome과 같은 브라우저에서 전역 객체는 window 객체라고 설명했으며, 함수 내부의 this는 전역 객체에 바인딩된다고 언급했습니다. 즉, 브라우저에서 함수 내부의 this는 window 객체입니다. 다음은 함수가 아닌 변수를 선언하는 경우에 대해 알아봅시.. JavaScript/함수 2022. 7. 4.

• 

  [JavaScript]생성자 함수와 this(Constructor Function and this) 생성자 함수 JavaScript에서 객체를 생성하는 방법은 객체 리터럴 방식과 생성자 함수를 이용하는 두 가지 방법이 존재합니다. 생성자 함수에 대한 내용은 아래 포스팅에서 자세하게 설명합니다. [JavaScript]생성자 함수(Constructor Function) 생성자 함수(Constructor Function)란? 생성자 함수는 JavaScript에서 객체를 생성하기 위해 사용되는 특수한 함수입니다. 생성자 함수로 객체를 생성하기 위해서는 new 연산자를 호출합니다. 다음 예제는 developer-talk.tistory.com [객체 리터럴 방식] const person = { name: '둘리', age: 20 } [생성자 함수] function Person(name, age) { this.na.. JavaScript/함수 2022. 7. 4.

• 

  [JavaScript]메서드와 this(Method and this) JavaScript에서 객체의 프로퍼티가 함수인 경우에는 해당 프로퍼티를 메서드라고 말합니다. 이번 포스팅은 메서드에서 this가 어떻게 동작하는지 설명합니다. this 바인딩 메서드에 사용된 this는 메서드를 호출한 객체로 바인딩됩니다. 즉, 현재 객체를 나타냅니다. 다음 예제를 살펴봅시다. let obj = { strValue: 'Hello', normalFunc: function() { console.log(this.strValue) } } obj.normalFunc(); // Hello 메서드의 this는 현재 객체를 나타내므로 this는 obj를 가리킵니다. 따라서, obj 객체의 strValue 프로퍼티의 값이 콘솔에 출력되었습니다. 다른 객체에 할당 다음 예제는 객체에 메서드를 동적으로 추.. JavaScript/함수 2022. 7. 4.

• 

  [JavaScript]함수와 메서드(Function and Method) C#, Java와 같은 객체 지향 프로그래밍(OOP;Object-oriented programming) 언어를 사용하다가 JavaScript를 사용하면 함수(Function)와 메서드(Method)에 대해 혼동될 수 있습니다. JavaScript에서 함수와 메서드는 비슷해 보이지만 다른 개념입니다. 함수와 메서드의 차이를 알고 있다고 코드를 작성하는 실력이 향상되지는 않지만, 모르면 곤란한 상황이 발생할 수 있습니다. 따라서, 이번 포스팅에서는 JavaScript에서 함수와 메서드의 차이를 알아봅시다. 함수와 메서드 함수와 메서드의 차이점은 호출 방식에 따라 다릅니다. 함수를 호출하는 객체가 있는 경우 메서드라고 말하며, 함수를 호출하는 객체가 없는 경우 함수라고 말합니다. 다음 예제를 통해 알아봅시다... JavaScript/함수 2022. 7. 3.

• 

  [JavaScript]함수의 리턴값 return문이 없는 함수 JavaScript는 함수에 return문을 작성하지 않아도 값이 반환됩니다. Chrome 개발자 도구의 콘솔에서는 JavaScript 코드를 작성할 수 있는데, 다음 예제처럼 즉시 실행 함수를 사용하면 Hello와 undefined가 출력되는 것을 확인할 수 있습니다. Chrome 개발자 도구는 코드를 실행 후 함수의 반환 값을 출력합니다. 따라서, undefined는 즉시 실행 함수의 반환 값을 의미합니다. 이러한 동작은 함수 표현식에서도 동일하게 발생합니다. 그렇다면, ES6에 도입된 화살표 함수는 어떻게 동작할까요? 마찬가지로, undefined가 반환됩니다. 다음은 함수에 return문을 작성 후 함수를 호출합니다. 이번에는 undefined를 출력하지 않고 Hi라는 .. JavaScript/함수 2022. 7. 1.