Java Script #함수의 종류

달다로·2024년 6월 2일
js

JS

목록 보기
4/26
post-thumbnail

📌 함수 (function)

특정 동작(기능)을 수행하는 일부 코드의 집합(부분)

예제 1번

function helloFunc() { // 함수 선언
	console.log(1234); // 실행코드(명령)
}

helloFunc(); //1234, 함수 호출

예제 2번

function sum(x, y) { // x 와 y 는 매개체
	console.log(x + y)
}
sum(1, 3) // 안에 들어있는 숫자를 인수 라고 부른다.
sum(4, 12) // 함수 재활용

1) 반환 (return)

function returnFunc() {
	return 123; // 반환, 함수를 밖으로 내보낼 수 있음
}

let a = returnFunc(); // 변수 선언, 함수 호출(실행), 내보낸 return값을 내보내서 returnFunc()안으로 들어감

console.log(a); ///123

2) 매개변수 와 인수

  • 매개변수 (parameters) : 메서드 선언에 정의한 변수
  • 인수 (arguments) : 메서드 호출 시 넘기는 실제 값
// 함수 선언
function sum(a, b) {
	return a + b; // a 와 b 는 매개변수 
}

// 재사용
let a = sum(1, 2); // 1과 2는 인수, 인수는 숫자가 아니더라도 모든 js데이터(문자값같은)를 사용할 수 있다. 
let a = sum(7, 12);
let a = sum(2, 4);

console.log(a, b, c); // 3, 19, 6

3) 기명 함수 와 익명 함수

  • 기명 함수
    • 이름을 지정해준 함수 (function hello 의 hello 부분)
  • 익명 함수
    • 이름을 지정하지 않은 함수 (function () 부분에서 () 앞에 아무것도 이름을 지정해주지 않은 상태)
    • 주로 데이터로 활용하거나, 변수(let/const)에 할당해서 사용함
    • 함수를 표현한다고 말함. (선언 X)
// 함수 선언
function hello() {
	console.log('Hello~');
}

// 함수 표현
let world = function () {
	console.log('World~')'
}

// 함수 호출
hello(); // Hello~
world(); // World~

4) 매소드 (Method)

객체 데이터 안의 속성 부분에 함수가 할당되어있는 것을 의미함

// 객체 데이터
const daldaro = {             // const 선언 → 재할당 불가능
	name: 'DALDARO',
  	age: 95,
  	getName: function () {    // 메소드(Method) 
  		return this.name;     // this 는 this가 소속된 객체 데이터를 의미함
  }
};

const herName = daldaro.hetName();
console.log(herName); // DALDARO
// 혹은
console.log(daldaro.getName()); // DALDARO

함수를 호출하는 방법

  • MyFeat ();
// 입력
function myFeat() {
    console.log("특별한 일을 했어요!");}
// 호출
myFeat();
  • MyFeat.apply ();
// 생성
function MyFeat() {
    console.log(this.name + "가 특별한 일을 했어요!");}
// 지정
const owner1 = { name: "Alice" };
// 호출
MyFeat.apply(owner1);
  • MyFeat.call ();
// 생성
function MyFeat() {
    console.log(this.name + "가 특별한 일을 했어요!");}
// 지정
const owner1 = { name: "Alice" };
//호출
MyFeat.call(owner1);
  • 그 외
const ThisObject = {
	id: 1,
  	getValue: function() {
    	return 1;
    },
}

thisObject.id;
thisObject.getValue(); // 함수가 어떤 위치에 있느냐에 따라 부르는말이 달라짐, 객체 안의 함수는 매소드
thisOject.__proto__

thisObject.toString(); // 결과 : object Object

📌 1급 함수

  • 1급 함수를 가진 언어에서 함수는 다른 함수들에 전달인자로 제공된다.
  • 다른 함수에 의해 반환 될 수 있다.
  • 변수에 값으로서 할당 될 수 있다.

JS

const obj = {
	id: 1,
  	title: 'my object'
};

function myFunction() {
	return a;
}

// 1급 함수 : 함수를 값으로 취급함 (변수에 할당할 수 있음, 개념의 확장)
obj.title = 'change';
obj.fn = myFunction;

myFunction(myFunction) // 함수를 인자에 넣을 수 있음
result ()

📌 람다함수 (expression, 화살표함수)

이름을 따로 지정을 하지 않고 사용한다. function ()

  • 화살표함수의 장점

    • 간결한 문법
      특히 한 줄짜리 함수 or 간단한 롤백 함수를 작성할 때 좋다.
    • 중첩함수에서의 가독성을 높여준다
      왜냐하면 간결하게 작성하기 때문에 보기 쉽다.
    • this 바인딩
      화살표 함수는 자신만의 this 를 가지지않고 외부의 this 를 그대로 사용하기때문에 this 의 혼란을 방지할 수 있다.
    • 명시적 변환
      따로 return 을 사용하지 않아도 반환된다.
    • 클로저
      클로저를 사용할 때 편리하다.

  • 화살표함수의 단점(제한점)

    • this, arguments, super 에 대한 자체 바인딩이 없고, 메서드로 사용 불가능
    • new.target 키워드가 없음
    • call(), apply(), bind() 메서드를 이용 불가능 (일반적으로 스코프를 지정할 때 사용하는것)
    • 생성자(Constructor) 로 사용 불가능
    • yield 를 화살표 함수 내부에서 사용 불가능

예시 1번

const YourFeat = () ==> {
	return 0
}

const YourFeat2 = a ==> 0 * 2; // 인자 하나면 괄호 생략가능
 
const YourFeat3 = (a, b) ==> { // 인자가 없거나 두개면 괄호 생략 불가능
	return a + b;
}

예시 2번

const double = function (x) { // 일반함수
	return x * 2
}
console.log('double: ', double(7))

// 위와 같은 식인데 화살표함수로 변형한거
const doubleArrow = (x) => { // 화살표함수
	return x * 2
}
console.log('doubleArrow', doubleArrow(7))

// 위와 같은 식인데 객체데이터(중괄호를 쓰는 객체 "()")가 아닌 것을 사용할때의 예시
const doubleArrow = (x) => ({ name: 'daldaro' })
console.log('doubleArrow', doubleArrow(7))

📌 타이머 함수

  • setTimeout(함수, 시간)
    일정 시간 후 함수 실행
    여기서 시간의 단위는 ms이다. (1000ms = 1s)
setTimeout(() => {  // setTimeout(()=>{} 과 setTimeout (function) {} 은 같다.
	console.log('daldaro')
}, 3000) // 3초후에 daldaro 라는 단어가 실행된다.

  • setInterval(함수, 시간)
    시간 간격마다 함수 실행 (반복적으로 값이 나타남)

  • clearTimeout()
    설정된 Timeout 함수를 종료

const timer = setTimeout(() => {  // setTimeout(()=>{} 과 setTimeout (function) {} 은 같다.
	console.log('daldaro')
}, 3000) // 3초후에 daldaro 라는 단어가 실행된다.

const h1El = document.querySelector('h1') // 3초가 흐르기전에 h1태그를 클릭하면 타이머가 멈춘다.
h1El.addEventListener('click', () => {
	clearTimeout()
})
  • clearInterval()
    설정된 Interval 함수를 종료

📌 콜백 (callback)

  • 함수의 인수로 사용되는 또다른 함수
  • 실행위치를 보장하는 역할로 많이 활용된다.
  • 어떤 일이 끝난 후에 다시 호출되는 함수
// setTimeout(함수, 시간)
function timeout(callback) {
	setTimeout(() => {
    	console.log('daldaro')
      	callback()
    }, 3000)
}
timeout(() => {
	console.log('Done') 
  
}) // 콜백함수
  1. timeout 할 때 하나의 익명함수(done)를 사용함, 이건 timeout(callback)의 callback의 매개변수로 들어감
  2. 외부의 timeout(callback)은 아직 실행 전이기때문에
  3. 함수 내부에 callback() 을 적어준다.

📌 즉시실행함수 (IIFE : Immediately-Inyoked Function Expression)

정의되자마자 즉시 실행되는 함수 (결과를 바로 얻을 수 있다는 장점)
즉시실행함수를 사용할때는 다음 식으로 넘어갈때 반드시 세미클론(;)을 붙여야 한다.

  • (1)() 함수를 1의 위치에 넣어준다. (첫번째 괄호)
  • (1()) 함수를 1의 위치에 넣어준다. (두번째 소괄호의 앞쪽)
const a = 7 // 익명함수 (const에 따로 이름을 정해주지 않은 경우)
function double() {
	console.log(a * 2)
}
double(); 

(function () {
	console.log(a * 2)
})();
profile
달다로
나이들어서 공부함
이전 포스트

Java Script #변수

다음 포스트

Java Script #조건문 (if/switch)

0개의 댓글