개요

JavaScript를 사용하여 함수를 선언하고 실행하는 방법과 객체, 매개변수에 대한 학습을 요약합니다.

전제 지식

로컬에서 JavaScript를 실행하기 위한 환경 구성

사용할 소프트웨어

Visual Studio Code: js를 설명하는 스크립트
터미널: macOS High Sierra ver 10.13.6 표준 탑재 실행 환경
Google Chrome(Google Chrome, 마우스 오른쪽 버튼 클릭→유효성 검사]를 통해 [Controe] 화면 표시)

함수.

프로그래밍에서 처리를 함수로 같이 명명함으로써 호출할 수 있습니다.
다음 구성으로 기술하다

함수 (여기 이름이 "Hello Constore") 를 이용하여 "Hello World"를 출력할 때 다음과 같습니다.
.js

//関数の定義
function helloConsole(){
    console.log("Hello World");
}

//関数の実行
helloConsole();

함수 정의 방법 (여기 함수 이름은 "hogehoe")
.js

function hogehoge(){
    //処理内容の記述
}

※ 함수의 명명 규칙으로 숫자, 대문자로 시작하지 마십시오

화살 함수 사용하기 (화살=>의 함수)

function 정의 함수를 사용하는 것보다 간단한 문법() => {}에서 이 문법을 자주 사용합니다
aro 함수를 이용하여 "Hello World"를 정의하다
.js

const showMessage  = () => {
    console.log("Hello World");
}

Arrow 함수를 정의하는 방법(여기서 "hogehoe")
프로그래밍에서 = 는 오른쪽을 왼쪽으로 대입한다는 뜻이다
.js

const hogehoge  = () => {
    //処理内容の記述
}

개체 정의

대상은 다음과 같이 쓸 수 있다
.js

const user = {
     name: "太郎", // 文字列
     age: 21 // 数字
}

여기, "user"는 대상 이름이고, "name", "age"는 속성입니다.
개체를 정의하면 각 등록 정보를 얻을 수 있습니다.
.js

console.log(user.name);
console.log(user.age);

전달 대상을 함수 매개 변수로 하다

대상이 aro 함수의 매개 변수로 전달될 때 한 변수를 통해 여러 개의 값을 전달할 수 있다
.js

//オブジェクトの定義
const user2 = {
    name: "二郎", 
    age: 22 
}

//取得するプロパティを定義
const logUser = (u) => {
    console.log(u.name)
    console.log(u.age)
}

//関数の実行
logUser(user2);

함수 및 객체 사용 예

야구 소년 등급을 찾기 위한 예문을 기재하다.
.js

//3人の野球少年のスペックをオブジェクトで定義
const baseballBoy1 = {
    name : "ichiro",
    power : 90,
    speed : 80,
    technique : 100
}

const baseballBoy2 = {
    name : "jiro",
    power : 30,
    speed : 50,
    technique : 80
}

const baseballBoy3 = {
    name : "saburo",
    power : 10,
    speed : 10,
    technique : 10
}

//野球少年のランクを求める関数を定義
//野球少年ランクは power と speed と technique の合計値
const baseballBoyRank = (boy) => {
    const total = boy.power + boy.speed + boy.technique
    let rank = "";

    //合計値に応じたランクの設定
    if (total>=250){
        rank = "A"
    }
    else if (total>=150){
        rank = "B";
    }
    else{ 
        rank = "C";
    } 
    return rank; 
}

//関数の実行
console.log(baseballBoyRank(baseballBoy1)); //出力結果：A
console.log(baseballBoyRank(baseballBoy2)); //出力結果：B
console.log(baseballBoyRank(baseballBoy3)); //出力結果：C

//getrank によって取得した値を再利用したい場合は、結果を変数に格納する記述方法がいい
const baseballboyRank1 = baseballBoyRank(baseballBoy1)
console.log(baseballboyRank1) //出力結果：A

const baseballboyRank2 = baseballBoyRank(baseballBoy2)
console.log(baseballboyRank2) //出力結果：B

const baseballboyRank3 = baseballBoyRank(baseballBoy3)
console.log(baseballboyRank3) //出力結果：C

변수let과const의 차이 사용

let

대입 변수의 값을 업데이트할 수 있습니다
.js

let name = "Ichiro";
console.log(name);
//出力結果：Ichiro


name = "Jiro"; // 値の更新時には let は不要
console.log(name);
//出力結果：Jiro 

const

정의된 값을 업데이트할 수 없습니다.
.js

let name = "Ichiro";
console.log(name);
//出力結果：Ichiro

name = "Jiro"; 
console.log(name);  //エラーが発生する

재대입 시let, 기타 시const

참조 페이지

기본 함수