function15

• 

  [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]함수가 존재하는지 확인하는 방법 함수가 존재하는지 확인하는 방법 JavaScript는 느슨한 타입의 프로그래밍 언어라서 변수 타입이 명확하지 않을 수 있습니다. 예를 들어, 다음과 같이 변수의 값이 문자열이었다가 숫자형으로 변경되거나 함수로 변경될 수 있습니다. // 문자열(string) let sum = 'sum'; // 숫자(number) sum = 100; // 함수(function) sum = function(x, y) { return x + y; } 따라서, sum이라는 변수가 처음에는 함수였다가 나중에 문자열 또는 숫자로 변경돼서 함수처럼 호출한 경우 다음과 같이 TypeError가 발생합니다. let sum = function(x, y) { return x + y; } sum = 100; // Uncaught TypeErr.. JavaScript/Tip 2022. 9. 24.

• 

  [Java]Function 인터페이스 사용 방법 Function 인터페이스 Function Interface는 Java에서 함수형 프로그래밍을 구현하기 위해 Java 버전 1.8부터 도입된 함수형 인터페이스로 한 개의 매개변수를 전달받아 특정 작업을 수행 후 새로운 값을 반환하는 경우 사용됩니다. 제네릭 타입인 한 개의 인수가 존재하며, 제네릭 타입을 반환합니다. @FunctionalInterface public interface Function { R apply(T t); default Function compose(Function Java/함수형 인터페이스 2022. 8. 24.

• 

  [JavaScript]스코프(Scope) 스코프(Scope) JavaScript에서 스코프(Scope)는 변수의 가용성(변수를 사용할 수 있는지)을 관리하는 중요한 개념입니다. JavaScript에서 사용되는 변수 또는 함수는 선언되는 위치에 따라 다르게 동작하므로 스코프에 대해 구체적으로 이해할 필요가 있습니다. [JavaScript]함수 호이스팅(Function Hoisting) 호이스팅(Hoisting) 호이스팅은 코드를 실행하기 전에 선언된 변수 및 함수를 해당 범위의 맨 위로 이동하는 JavaScript의 메커니즘입니다. 일반적으로 선언되지 않은 변수를 접근할 수 없습니다. 마 developer-talk.tistory.com [JavaScript]변수 선언과 호이스팅(Hoisting) JavaScript의 변수 선언 방법과 호이스팅(H.. JavaScript/기초 2022. 7. 7.

• 

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

• 

  [JavaScript]함수의 length, name 프로퍼티 함수는 특별한 객체 JavaScript에서 함수는 객체입니다. 객체와 마찬가지로 함수에는 프로퍼티와 함수가 존재하며, 함수를 변수, 배열, 객체에 할당하거나 다른 함수에 인수로 전달할 수 있습니다. 다음 예제는 typeof와 instance 연산자를 사용하여 Add() 함수가 객체 인스턴스인지 확인합니다. function Add(a, b) { return a + b; } console.log(typeof Add); // function console.log(add instanceof Object); // true console.log(add instanceof Function); // false typeof 연산자는 object가 아닌 function을 반환했는데, 이러한 이유는 함수는 일반 객체보다 특.. JavaScript/함수 2022. 6. 28.