javascriptの関数から、別オブジェクトのメソッドにアクセスしたい。

Question

前提

javascriptの関数から、別オブジェクトのメソッドにアクセスしたい。

実現したいこと

strとオブジェクトの2つの引数を受け取るcalc関数の中で、aaaオブジェクトのmethodメソッドにアクセスしたいです。

発生している問題・エラーメッセージ

Error: obj.func is not a function

該当のソースコード

const aaa ={
    name: 'aaa',
    method: ()=>{ return 'method'}
  }
  
function calc(obj={str:'', func:()=>{}}){
    let res = obj.func()
  
    console.log(res)
  }
  
calc(aaa)

試したこと

aaaオブジェクトのmethodメソッドを

method(){return 'method'}

のように書き換えたりもしましたが変わりませんでした。

こちらにて質問するのは初めてなので不足事項などありましたら申し訳ございません。
よろしくお願いします。

Comments

[int32_t]

calc() の 引数の obj=... はどういう意図で書いてますか?

[kss]

int32_t様
ありがとうございます。
strというプロパティ、funcというメソッドを持ったオブジェクトを引数として受け取る、という意図で記述しました。

[int32_t]

> strというプロパティ、funcというメソッドを持ったオブジェクトを引数として受け取る、という意図

そのようには動きませんです。
デフォルト引数の指定なので、calc(aaa) と引数を指定して呼ぶ場合には ={...} の部分は無視されます。calc() のように引数なしで呼んだ場合に obj が {str:'', func:()=>{}} になります。

[kss]

int32_t様
ありがとうございます。
typescriptを直前に学習していたので、型の指定と勘違いしていたようです。
ご回答ありがとうございました。

Answer 1

求められていることが以下の２点：

• 引数のオブジェクトの nameプロパティとmethodプロパティを、関数の本体の中では変数strおよび変数func として使いたい。
• かつ、引数のオブジェクトが渡されなかった場合のstrとfunc の初期値を指定したい。

なのであれば、以下のようにすれば出来ます。

function calc({ name: str = '', method: func = ()=>{} } = {}){
  const res = func();
  
  console.log(str, res);
}

• 動作確認サンプル👉 https://codepen.io/su507/pen/LYmQaJj?editors=0012

Comments

[kss]

su507様

サンプル付きのご回答ありがとうございます。
とても参考になりました。

[退会済みユーザー]

BA決定後に失礼しました。
分割代入するときに別の名前の変数に入れることができるのは以下の説明の中の「新しい変数名への代入」という節に書いてあります。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

[kss]

su507様
とんでもないです、ご丁寧にありがとうございます。
非常に勉強になりました。

Answer 2

オブジェクトaaaの中のkeyと、calc()関数のなかのobj.method()は同じにしないとだめです。
aaaのなかにfuncは存在しないので、obj.func()と書いたらエラーになります。

const aaa = {
  name: 'aaa',
  method: () => { // ここの名前を
    return 'method'
  }
}

// (obj={str:'', func:()=>{}})は、
// calc()と書かれて引数に何も指定されなかったときのための、初期値
// calc(aaa)ときちんと引数を渡しているので、
// {str:'', func:()=>{}}は無視されます。
function calc(obj) {
  let res = obj.method(); // ここで使う
  console.log(res);
}

calc(aaa);

Comments

[kss]

Cocode様

ご回答ありがとうございます。

func:()=>{}のように関数の形で記述すれば、javascript側が勝手にFunc = methodと認識してくれると勘違いしていました。
関数の引数にオブジェクトを取る際は、代入するオブジェクトとプロパティ名を一致させなければいけないのですね。
ありがとうございました。

Answer 3

calcの方をaaaに合わせると

const aaa ={
    name: 'aaa',
    method: ()=>{ return 'method'}
  }
  
function calc(obj={str:'', method:()=>{}}){
    let res = obj.method()
  
    console.log(res)
  }
  
calc(aaa)

aaaの方をcalcに合わせると

const aaa ={
    name: 'aaa',
    func: ()=>{ return 'method'}
  }
  
function calc(obj={str:'', func:()=>{}}){
    let res = obj.func()
  
    console.log(res)
  }
  
calc(aaa)

Comments

[kss]

ozwk様

早速のご回答ありがとうございます。

もし差し支えなければお教えいただきたいのですが、オブジェクトのプロパティ名と、関数の引数にしていしているオブジェクトのプロパティ名は一致していないといけないのでしょうか。