[새싹 프론트엔드] 9주차 - 3 TypeScript 함수

함수

함수 선언문

function 함수이름(매개변수1: 타입1, 매개변수2: 타입2): 반환값_타입 {

     // 작업

}

 

반환값이 숫자 타입인 함수

function add(a: number, b: number): number {

      return a + b;

}

 

let result = add(1, 2);

console.log(result);

---

반환값이 문자열 타입인 함수

function add(a: string, b: string): string {

      return a + b;

}

 

let result = add("Hello", "SOOA");

console.log(result);

---

반환값이 문자열 배열 타입인 함수

function add(a: string, b: string): string[] {

       return [a, b];

}

 

let result = add("Hello", "SOOA");

console.log(result);

---

반환값이 없는 함수

 

function add(a: string, b: string): void {

        console.log(a, b);

}

add("Hello", "SOOA");

 

🟠 void 타입

아무것도 반환하지 않는 함수의 반환 값으로만 사용되는 타입

( return 값이 없는 함수의 반환 타입 )

 

function printValue(a: number, b: string): void {

       console.log(`a : ${a}, b : ${b}`)

}

---

선택적 매개변수

• 필수 매개변수가 아닌 경우

• 매개변수 이름 뒤에 물음표(?) 기호를 붙임

function add(a: string, b: string): void {
   console.log(a, b);
}

// add()에 매개변수를 한 개만 전달
add("Hello"); // 에러 발생

function add(a: string, b?: string): void {
   console.log(a, b);
}

// add()에 매개변수를 한 개만 전달
add("Hello"); // 정상 실행

주의 사항

선택적 매개변수는 반드시 필수 매개변수 뒤에 위치!

 

 

실습) 선택적 매개변수

 

OptionalParameter.tsx

import React from "react";

const OptionalParameter = () => {
  function setUser(
    id: string,
    name: string,
    age?: number,
    address?: string
  ): void {
    console.log(`ID:${id}`);
    console.log(`NAME:${name}`);
    console.log(`AGE:${age}`);
    console.log(`ADDRESS:${address}`);
    console.log(`-----------------`);
  }

  setUser("admin", "sooa");
  setUser("admin", "sooa", 20);
  setUser("admin", "sooa", 20, "seoul");
  return <div></div>;
};

export default OptionalParameter;

 

기본 매개변수

기본 매개변수

매개변수에 값이 전달되지 않았을 때, 기본값으로 지정

 

function 함수이름(매개변수: 타입 = 기본값): 반환값_타입 {

         // 작업

}

 

 

실습) 기본 매개변수

DefaultParameter.tsx

import React from "react";

const OptionalParameter = () => {
  function setUser(
    id: string,
    name: string,
    age: number = 20,
    address: string = "seoul"
  ): void {
    console.log(`ID:${id}`);
    console.log(`NAME:${name}`);
    console.log(`AGE:${age}`);
    console.log(`ADDRESS:${address}`);
    console.log(`-----------------`);
  }

  setUser("admin", "sooa");
  setUser("admin", "sooa", 20);
  setUser("admin", "sooa", 20, "seoul");
  return <div></div>;
};

export default OptionalParameter;

 

 

---

 

[실습회고]

 

함수를,,, 화면에,,, 뿌리는,, 방법이 여러가지가 있는 것 같은데 난 아직도 헷갈리는 매직,,

그러나 이번 실습은 타입스크립트 기본적인 내용이라 그리 엄청 어렵지는 않았다 하지만 빨리 올리고 싶어 나도,,, 마지막 문제가 함수 호출 땜에 조곰 헷갈렷음

 

 

 

 

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 9주차 블로그 포스팅