JavaScript/함수26 [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. [JavaScript]익명 함수(Anonymous Functions) 익명 함수 JavaScript의 익명 함수는 이름이 없는 함수입니다. 함수 표현식으로 익명 함수를 변수에 할당하지 않거나 또는 익명 함수를 소괄호로 감싸지 않으면 다음과 같이 함수 이름이 필요하다는 구문 오류가 발생합니다. function() { console.log('Hello'); }; 에러 내용 구문 오류를 해결하기 위해 익명 함수를 변수에 할당하거나 익명 함수를 소괄호로 감쌉니다. 다음 예제는 익명 함수를 소괄호로 감싸며, 함수 표현식이 반환되는 것을 확인할 수 있습니다. (function() { console.log('Hello'); }); 실행 결과 다음 예제는 익명 함수를 변수에 할당 후 함수를 호출합니다. let hello = function() { console.log('Hello'); .. JavaScript/함수 2022. 6. 28. [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. [JavaScript]매개변수의 정보를 가지는 arguments 객체 arguments 객체 JavaScript의 arguements 객체는 함수에서 전달된 인자 값이 배열 형태로 저장된 객체를 말합니다. 함수에 전달된 인자의 개수와 정보를 알고 싶은 경우 유용하게 사용할 수 있습니다. 아래 소스 코드를 실행하면 arguments 객체를 확인할 수 있으며, 함수에 인수를 전달하지 않으면 argements 객체의 값은 null입니다. function sum(a, b) { return a + b; } console.dir(sum); 실행 결과 arguments 객체는 함수 내부에서 사용할 수 있는 지역 변수로 arguments 객체를 사용하여 함수 내에서 함수의 인자를 참조할 수 있습니다. 다음 예제는 sum() 함수에서 arguments 객체를 접근합니다. function .. JavaScript/함수 2022. 6. 27. [JavaScript]클로저(Closure) 개념 이번 포스팅은 JavaScript의 클로저(Closure)에 대해 소개하며, 클로저를 소개하기 전에 중첩 함수와 함수 반환을 소개합니다. 중첩 함수 JavaScript에서 함수 안에 또 다른 함수를 정의하는 것을 중첩 함수라고 합니다. 다음 예제는 receiveName() 함수 내부에 showName() 함수를 정의합니다. // receiveName()은 외부 함수입니다. function receiveName(name) { // showName()은 reciveName() 내부에 정의되었으므로 내부 함수입니다. function showName() { console.log('name: ' + name); } showName(); } receiveName('홍길동'); 실행 결과 name: 홍길동 showN.. JavaScript/함수 2022. 6. 22. [JavaScript]prompt 함수 사용 방법 prompt 함수란? JavaScript에서 prompt() 함수는 사용자에게 입력을 요청하는 프롬프트 상자를 화면에 표시하기 위해 사용됩니다. 프롬프트 상자에서 계속 진행하려면 "확인" 또는 "취소" 버튼을 클릭해야 합니다. 이번 포스팅에서는 prompt() 함수를 다루는 방법을 소개합니다. prompt() 함수 설명 prompt() 함수는 두 개의 인수를 가지는 함수이며, 사용하는 즉시 프롬프트 상자가 화면에 표시됩니다. let promptObj = prompt(message, default); 첫 번째 인수는 프롬프트 상자에 표시되는 레이블이며, 두 번째 인수는 프롬프트 상자의 텍스트 박스에 표시되는 문자열입니다. 두 개의 인수는 생략 가능하며, 다음은 크롬 브라우저에서 prompt() 함수를 사용.. JavaScript/함수 2021. 12. 21. [JavaScript]일반 함수와 화살표 함수 차이 화살표 함수(Arrow Function)란? 화살표 함수는 ES6에 도입된 새로운 기능으로 일반 함수를 보다 간결하게 작성할 수 있습니다. 일반 함수와 화살표 함수는 동작 방식은 비슷하지만, 몇 가지 차이가 존재합니다. 이번 포스팅에서는 일반 함수와 화살표 함수의 차이를 소개합니다. 구문(Syntax) [일반 함수] function addFunc(x, y) { return x + y; }; [화살표 함수] let addFunc = (x, y) => {return x + y}; 화살표 함수는 일반 함수에 비해 많은 코드 입력을 요구하지 않습니다. 더 짧은 코드로 동일한 결과를 얻을 수 있습니다. 화살표 함수는 본문이 짧은 경우 중괄호와 return문을 생략할 수 있습니다. let addFunc = (x, .. JavaScript/함수 2021. 12. 15. [JavaScript]pipe 함수와 compose 함수 사용 방법 JavaScript 함수형 프로그래밍에서 유용하게 사용되는 pipe 함수와 compose 함수를 소개합니다. 목차 pipe(), compose() 함수를 사용하지 않는 경우 pipe() 함수 compose() 함수 pipe(), compose() 함수를 사용하지 않는 경우 pipe 함수는 n개의 함수를 결합합니다. pipe 함수는 왼쪽에서 오른쪽으로 진행되며, 최종적으로 마지막 함수를 호출합니다. 다음은 객체의 name 속성을 반환하는 함수입니다. getPersonName = ( person ) => person.name; getPersonName({name: 'Hong Gil Dong'}); // 'Hong Gil Dong' 그리고 문자열을 대문자로 변환하는 함수를 작성합니다. uppercase = (.. JavaScript/함수 2021. 12. 13. [JavaScript]생성자 함수(Constructor Function) 생성자 함수(Constructor Function)란? 생성자 함수는 JavaScript에서 객체를 생성하기 위해 사용되는 특수한 함수입니다. 생성자 함수로 객체를 생성하기 위해서는 new 연산자를 호출합니다. 다음 예제는 Date()라는 생성자 함수와 new 연산자를 사용하여 Date 객체를 생성합니다. var date = new Date(); JavaScript는 Date 생성자 이외에도 Array, Boolean, Error, Function, Number 등 다양한 내장 생성자를 제공합니다. 생성자 함수 만들기 개발자가 직접 생성자 함수를 만들어야 하는 경우가 존재합니다. 다음 예제는 UserInfo라는 생성자 함수를 구현합니다. // 생성자 함수 function UserInfo() { this... JavaScript/함수 2021. 12. 13. [JavaScript]call, apply, bind 함수 사용 방법 JavaScript에서 객체는 고유한 속성과 함수를 가질 수 있습니다. student 객체는 teacher 객체의 printValue() 함수를 사용할 수 없으며 반대의 경우도 마찬가지입니다. const student = { name: '둘리', age: 20, printValue: function() { return `${this.name} is ${age} years old.`; } }; const teacher = { name: '또치', age: 50, printValue: function() { return `${this.name} is ${age} years old.`; } }; 그러나 call(), apply(), bind() 함수를 사용하면, 함수가 해당 객체에 속한 것처럼 함수를 호출할 .. JavaScript/함수 2021. 12. 8. [JavaScript]제너레이터 함수 응용(반복, 비동기, 옵저버) 제너레이터 함수(Generator Function)란? 제너레이터 함수(Generator Function)는 함수가 도중에 중간에 일시 중지한 다음 중지된 위치에서 로직이 실행되는 함수입니다. 자세한 사용 방법은 아래 링크를 클릭하여 게시된 포스팅을 확인해주세요. ☞ 제너레이터 함수(Generator Function) 이해하기 이번 포스팅에서는 제너레이터 함수를 실제로 응용 및 활용하는 방법에 대해 소개합니다. 목차 반복자(Iterables) 구현 비동기 함수 구현 옵저버로 사용 참조 사이트 반복자(Iterables) 구현 제너레이터는 반복 가능한 객체(iterable Object)이므로 반복자(iterator)를 구현할 수 있습니다. 다음은 반복자를 사용한 일반 함수입니다. const iterableO.. JavaScript/함수 2021. 12. 5. [JavaScript]제너레이터 함수(Generator Function) 사용 방법 제너레이터 함수(Generator Function)란? 제너레이터 함수(Generator Function)는 함수가 도중에 중간에 일시 중지한 다음 중지된 위치에서 로직이 실행되는 함수입니다. 제너레이터 함수는 function 키워드 뒤에 * 를 추가하여 제너레이터 함수를 정의합니다. 목차 일반 함수 동작 과정 제너레이터 함수 동작 과정 일반 함수 동작 과정 일반 함수는 return문을 만나거나 작업을 완료 하기 전에 동작을 멈출 수 없습니다. 즉, return문을 만나지 않는 이상 일반 함수는 함수 본문의 마지막 줄이 실행됩니다. 다음은 return문이 존재하지 않는 일반 함수입니다. function printConsole() { console.log('일반 함수는'); console.log('retu.. JavaScript/함수 2021. 12. 5. 이전 1 2 3 다음