javascriptは関数内に引数を定義する必要がある??

投稿者: Anonymous

javascriptを勉強しているのですが、関数から引数を使用するところで躓いています。

期待した動作する。

function pluck(array, property) {
    // pluck関
    var colorObjrcts = array;
    var color = property;
    var onlynames = colorObjects.map(function(colorObject){
        return colorObject.color
    });
    return onlynames
}

var colorObjects = [{ color: '赤' }, { color: '青' }, { color: '黄色' }];

var colorNames = pluck(colorObjects, 'color');

console.log(colorNames);

javascriptの関数内で引数を使用するとき定義し直さないと使えないんでしょうか?

上手く動作しない

function pluck(array, property) {
    // pluck関
    var onlynames = array.map(function(colorObject){
        return colorObject.property
    });
    return onlynames
}

var colorObjects = [{ color: '赤' }, { color: '青' }, { color: '黄色' }];

var colorNames = pluck(colorObjects, 'color');

console.log(colorNames);

これって関数内で無名関数を用いてるためそちらに引数を渡す必要があるためエラーになるのでしょうか?
その場合は書き方はこのような形であっているのでしょうか?

追記
こちらのプログラムはなぜかimage['height'] * image['width']でも下記のプログラムでも動作します。なぜなのでしょうか??複数通りがあるのでしょうか?

var images = [
    { height: 10, width: 30 },
    { height: 20, width: 90 },
    { height: 54, width: 32 }
];
var areas = [];
console.log(images[0].height);

function multiplication(image) {
    var area = image.height * image.width;
    areas.push(area);
}

images.forEach(multiplication);

console.log(areas);

解決

こんにちは。コードの内容には問題はありません。

ただ、プロパティのアクセスの仕方が違っていると思います。
colorObjectに’property’という名前のプロパティは存在していないですよね?
変数’property’に記述された文字列と一致するプロパティを呼び出す必要があります。
オブジェクトのプロパティには [ ] で文字列を使ってアクセスすることかできます。

下記の内容でarray.map内の関数を置き換えることで正常な動作が確認できました。

var onlynames = array.map(function(colorObject){
   return colorObject[property]
});

追記の内容についての返信

ふたつの違いを見てみましょう。
まず、例示されたコードには特に問題はありません。下記の様にObjectが宣言された場合。

 var object = { height: 10, width: 30 }

object[‘height’]でもobject.heightでも値にはアクセスできます。

ですが、間違いのあるコードでは下記のように宣言されたのち

var object = { color: '赤' }

object.property という呼び出しをしています、この場合このオブジェクトには、propertyと名付けられたフィールドがないのでアクセスしてもnullが返ってきます。

この場合はobject[‘color’]かobject.colorで呼び出しができます。
例のように変数propertyに文字列’color’が代入されていれば、下記のようにアクセスできます。

var property = 'color';
var colorName = object[property];

object.property(objectの中のpropertyフィールド)と、宣言された変数propertyとでは
別のものですので混同しないようにしてください。

仕組が気になるようでしたら、連想配列やマップなどのキーワードで改めて書籍などを確認してみてください。

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *