함수9

• 

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

• 

  [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]함수 생성 방법 JavaScript에서 함수 생성 방법 JavaScript에서 함수를 생성하는 방법은 네 가지가 있습니다. - 함수 선언문(function statement) - 함수 표현식(function expression) - 화살표 함수(arrow function) - Function 생성자(Function constructor) 네 가지 방법들은 함수를 생성한다는 점은 동일하지만, 미묘한 차이점이 존재합니다. 함수 선언문 다음 예제처럼 함수 선언문 방식으로 함수를 생성할 수 있습니다. function Add(a, b) { return a + b; } console.log(Add(10, 20)); // 30 함수 선언문은 function 키워드로 시작하며, function 키워드 뒤에 함수명, 매개변수 리스트, .. JavaScript/함수 2022. 6. 27.

• 

  [TypeScript]함수 타입(Function Type) TypeScript에서 함수 정의 TypeScript의 함수는 JavaScript처럼 함수를 생성할 수 있지만, 매개변수의 타입과 반환 타입을 설정해야 합니다. 다음은 number 타입의 매개변수와 string 값을 반환하는 getParam() 함수입니다. // 일반 함수 function getParam(val: number): string { return "매개변수의 값: " + val; } // 화살표 함수 let getParam = (val: number): string => { return "매개변수의 값: " + val; } (val: number)는 getParam() 함수의 매개변수를 나타냅니다. 매개변수의 이름을 val로 설정하였고 타입은 number로 정의합니다. 소괄호 뒤의 : stri.. TypeScript 2022. 3. 20.

• 

  [React]React Hook setState에 함수 전달 이번 포스팅에서는 React Hook을 사용한 함수형 컴포넌트에서 setState에 함수를 전달했을 경우 동작하는 방법을 소개합니다. 목차 setState에 함수가 아닌 값을 전달 언제 setState에 함수를 전달해야하는가? setState에 함수를 전달하는 예제 및 내용 setState에 함수가 아닌 값을 전달 React Hook에서는 useState()를 사용하여 state의 값을 초기화합니다. const [state, setState] = useState(initialValue); 그리고 특정 이벤트 또는 로직에 의해 setState()에 원하는 값을 인수로 전달하여 state의 값을 갱신할 수 있습니다. handleClick = () => { setState(newState); } React H.. React/React 문법 2021. 11. 22.