【JavaScript関数ドリル】Lodash関数の実装【勉強用】_.join関数

【JavaScript関数ドリル】初級編の_.join関数の実装のアウトプット

_.join関数の挙動

_.join(['a', 'b', 'c'], '~');
// => 'a~b~c'

第1引数の配列の要素の間に、第2引数を追加していく
第2引数がなければ初期値の','が追加される

_.join関数の課題内容

_.join関数に取り組む前の状態

• 配列に任意の位置に順番に挿入するにはspliceを使えばよさそう
• 普段通りのfor(let i = 0; i < array.length; i++)でよさそう

_.join関数に取り組んだ後の状態

• かなり強引に実装している
• forループにspliceを用いてインクリメントした結果、当初ループの条件をi < array.lengthとしていたため無限ループとなってしまった
• 無限ループを改善できた後も、変わりゆく配列の要素数にiの2個飛ばしで無理やり対応させてしまった
• 変数名をnew○○とする癖があるので、解答のように配列のコピーであればcopiedArrayなど分かり易い変数名にしていくべきだと感じた
• 加算代入+=について理解していなかった

_.join関数の実装コード

const join = ((array, separator = ',') => {
    const newLength = array.length;
    const newArray = array.slice();
    for (let i = 1; i < (newLength * 2) - 1; i = i + 2) {
        newArray.splice(i, 0, separator);
    }
    return newArray.toString().replace(/,/g, '');
});

const arrays = ['a', 'b', 'c', 'd']
console.log(join(arrays, '~'));
// => 'a~b~c~d'

_.join関数の解答コード

function join(array, separator = ',') {
  const copiedArray = [...array];

  let joinedString = copiedArray.shift();
  for(let i = 0; i < copiedArray.length; i++) {
    joinedString += separator + copiedArray[i];
  }

  return joinedString;
}

console.log( join(['a', 'b', 'c'], '---') );
// => 'a~b~c'