https://github.com/kenmori/javascript

自分自身の確認テストのためJavaScript問題集をREADME上で更新しています
https://github.com/kenmori/javascript

es6 exercises javascript

Last synced: 8 months ago
JSON representation

自分自身の確認テストのためJavaScript問題集をREADME上で更新しています

• Host: GitHub
• URL: https://github.com/kenmori/javascript
• Owner: kenmori
• Created: 2014-11-07T23:44:42.000Z (over 11 years ago)
• Default Branch: main
• Last Pushed: 2024-07-21T20:44:40.000Z (almost 2 years ago)
• Last Synced: 2024-07-21T22:14:53.514Z (almost 2 years ago)
• Topics: es6, exercises, javascript
• Language: JavaScript
• Homepage: https://kenjimorita.jp/category/javascript/
• Size: 20.4 MB
• Stars: 33
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# JavaScript練習問題集

![JavaScript](https://kenjimorita.jp/wp-content/uploads/2017/06/image3-1024x755.jpeg)

**更新情報**

```txt

・constをletに修正、問題を追加(2024/9/27)

・問題を追加(2024/7/20)

・問題を追加(2024/4/12)

・リファクタリング(2023/4/22)

・Decoratorsに関する問題を追加(2020/6/6)

```

こちらは[よしもと芸人もりたけんじ](https://profile.yoshimoto.co.jp/talent/detail?id=3871)が自身のテストとして作ったJavaScript練習問題集です。([TypeScript練習問題はこちら](https://gist.github.com/kenmori/8cea4b82dd12ad31f565721c9c456662))

[X](https://twitter.com/terrace_tech)

**前提**

※この問題集はChrome最新版のコンソール、[Google Chrome Canary](https://www.google.co.jp/chrome/browser/canary.html)のコンソールか、[JS Bin](https://jsbin.com/yenaderite/edit?js,console)などや[babel](http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Ces2015-loose%2Ces2016%2Ces2017%2Clatest%2Creact%2Cstage-2&experimental=false&loose=false&spec=false&code=%5B1%2C2%2C3%5D.map(n%20%3D%3E%20n%20%2B%201)%3B&playground=true)、ECMAScript2015,2016,2017,2018,2019, 2020, 2021, 2022, 2023, 2024, 2025が使える環境で試されることを想定しています

※表記揺れは鋭意解消中。

※答えはあくまで１つの記述です。

※以下に示す問題の答えがあなたの考えた答えより冗長な書き方かもしれません。

適宜置き換えていただけたらと思います。

・答えが見えてしまっているのは都度操作させないためです。

※・プルリク歓迎です。修正依頼は[こちら](https://twitter.com/terrace_tech)のDMからお願いします。

*★を押していただけたら今後もやる気出ます。よろしくお願いします。

※[blog/JavaScript](https://kenjimorita.jp/category/javascript/)

※[X](https://twitter.com/bukotsunikki)

※[GitHub](https://github.com/kenmori)

※English [here](https://github.com/kenmori/javascript/blob/master/JavaScriptPractice)

## JavaScript問題集

問1〜問50

**問1**

```const a = { a: 'a' }```と```const b = { b: 'b' }```

をマージした```c```

を出力してください

e.g```{ a:'a', b:'b' }```

```js

const a = { a: 'a' };

const b = { b:'b'};

const c = Object.assign({}, a, b);

c //{a: 'a', b: 'b'}

//Object.assign(target, ...sources)

//・戻り値はtargetオブジェクト

//・sroucesオブジェクトの挙可能で自分が所有するプロパティのみtargetにコピーされる

//・prototypeに定義し直したい場合、Object.getOwnPropertyDescriptorとObject.definePropertyを使う

//・プロパティが書き込み不可の場合TypeErrorが発生。targetオブジェクトは変更されない

//・Object.assignはsources値がnull、undefinedの場合例外を投げない

別解

const c = {...a, ...b}

```

**問2**

```js

const arry = ['aa','bb','cc','dd','ee','ff','gg'];

```

のdd,ee,ffを新たな配列として返してください

```js

const newArry = arry.slice(-4,-1);

//or

const newArry = arry.slice(3,-1);

```

**問3**

['a','b’] の要素をconsole出力してください e.g ```'a'```と```'b'```

```js

const arry = ['a','b'];

arry.forEach(function(elem,i){

 console.log(elem)

})

//'a'

//'b'

```

**問4**

```['a', 'b']```の各要素にindex値を足した文字列を出力してください```e.g 'a0'```と```'b1'```

```js

const arry = ['a','b'];

arry.forEach(function(ele,i){

 console.log(ele + i)

})

//'a0'

//'b1'

```

**問5**

```任意の変数名の[1,2]```を定義して配列かどうかを評価してください

e.g true

```js

Array.isArray(arry) //true

//arry instanceof Array //true

//instanceof比較は継承しているオブジェクトのインスタンス比較なので

// aryy instanceof Objectでもtrueが返ってくる

```

**問6**

こちら

```js

//1

if (typeof x === 'undefined') {

 ???

}

//2

if(x === undefined){

 ???

}

```

変数xが定義されていない場合上の1、2は実行されますか?

```

//1は実行される

//2は実行されない(ReferenceError)

//typeofは変数が存在しない場合エラーは投げない。

//ただこのような値の存在チェックは避けるべき

//グローバル上の値のチェックはfor in

```

**問7**

こちら

```js

//1

let x;

if (x === void 0) {

}

//2

// 直前まで y は宣言されていない

if (y === void 0) {

}

```

1,2はそれぞれ実行されますか

```

//1は宣言はされているが値が割り当てられていない場合です。

//実行される

//2は宣言されていない場合です。

//実行されない

//void 0 は確実にundefindeを返すことが保証されています

//undefinedはただのglobal変数なので

undefined = "foo";

undefined;

//'foo'

で代入でき、保証はされていない

e.g:

undefined = 1;

console.log(!!undefined); //true

console.log(!!void(0)); //false

```

**問8**

下記

```js

const obj = {

 key: 'aa',

 key2: 'bb'

}

```

の中のkeyとvalueを自身のプロパティのみ全て出力しなさい

```js

const obj = {

 key: 'aa',

 key2: 'bb'

}

for (key in obj){

 if(obj.hasOwnProperty(key)){

   console.log(key, obj[key])

  }

}

//key aa

//key2 bb

//or use Object.values, Object.keys

```

**問9**

こちらの ['a', 'b', 'c'] 配列の中の全ての要素を結合し、1つの文字列として出力してください。

```js

const array = ['a', 'b', 'c'];

array.join("");

//'abc'

//other

const array = ['a', 'b', 'c'];

let str = '';

const count = array.length;

for(let i= 0; i < count; i++){

  str += array[i];

}

str

//'abc'

```

**問10**

こちら

```js

x = 43

let y = 3

```

の2つの変数。deleteできるのはどちらですか？

```js

deleteは暗黙に定義された場合は変数は削除できるが、

const(let) や function文中の変数はnon-configurableであり削除できない

//globaleオブジェクト

x = 43;

delete x

//true //暗黙に定義されたglobale変数なので

//var宣言

delete y

false //削除できない

//関数宣言文の中でのdelete

function f(){

 const z = 44;

 delete z;

 console.log(z)

}

f()

//44 //削除されていない

【配列の要素の削除】

1

let color = ['red', 'blue', 'green'];

//要素として存在する状態にするが値は未定義

color[1]= undefined;

color

//["red", undefined, "green"]

if(1 in color){console.log('実行されてます')}

//実行されてます

2

let color = ['red', 'blue', 'green'];

delete color[1]

//true

color.length//削除しても配列の長さには影響しない

//3

//配列の一部ではなくなります

if(1 in color){console.log('実行されてます')}

//出力されない(1との違いに注意してください)

//

function Foo(){}

Foo.prototype.bar = 42;

let foo = new Foo();

delete foo.bar;

//true

//trueを返すがプロトタイプから継承してオブジェクトに存在するプロパティは削除できない

foo.bar

//42

//プロトタイプ上でプロパティを削除

delete foo.prototype.bar;

foo.bar 

//undefined

```

**問11**

```js

let arry =[

  {id:1,name:'morita'},

  {id:2,name:'kenji'},

  {id:4,name:'uro'},

  {id:3,name:'ken'}

  ];

```

をid番号が若い順にソートしたオブジェクトを含む配列を出力してください

```js

let arry =[

  {id:1,name:'morita'},

  {id:2,name:'kenji'},

  {id:4,name:'uro'},

  {id:3,name:'ken'}

];

arry.sort(function(a,b){

 return a.id > b.id

})

//先に位置させたい時はaが'正'をになるように返します

//other

arry.sort(function(a,b){

 if(a.id > b.id) return 1;

 if(a.id < b.id) return -1;

});

/*

[

  {id:1, name:'morita'},

  {id:2, name:'kenji'},

  {id:3, name:'ken'},

  {id:4, name:'uro'}

]

*/

```

**問12**

```a, b```の変数はデフォルトとしてaは5、bは7を持ち、aに1を代入してconsole出力してください。

```js

const [a=5, b=7] = [1];

console.log(a, b);

//1 7

//other

const {a = 5, b = 7} = {a: 1}

```

**問13**

next()を実行しただけ返り値が1増える関数を定義してください

```js

const setUp = function(){

  let count = 0;

  return function(){

return (count += 1);

  }

};

const next = setUp();

next();//1

next();//2

next();//3

```

**問14**

fun(1,2,3)を実行したら引数が全て配列で返る関数funを定義しなさい

[参照](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)

```js

function fun(){

 return Array.from(arguments)

}

fun(1,2,3)//[1.2,3]

//other

function fun (...arg){

  return arg;

}

fun(1,2,3)

//[1,2,3]

```

**問15**

配列

```

const array = ['a1','a2','a3','a4','a5']

```

の0〜2番目の要素をそれぞれ

```

red, green, yellow

```

に置き換えて配列にしてください。また実行した際の返り値を教えてください

```js

const array = ['a1','a2','a3','a4','a5']

//インデックス0から2つの要素を削除

array.splice(0,2, 'red', 'green','yellow');

//["a1", "a2"]

//返り値:['a1', 'a2']

array

//['green', 'red', 'yellow', 'a3', 'a4', 'a5']

```

**問16**

```

const array = ['a1','a2','a3','a4','a5']

```

のインデックス2〜4の要素を取り出し、

配列として出力しなさい。

実行された後のarrayの要素を教えてください

```js

const array = ['a1','a2','a3','a4','a5']

const newArray = array.slice(1,4);

newArray

//['a2', 'a3', 'a4']

array

//['a1','a2','a3','a4','a5']

```

**問17**

```js

const array = ['a1','a2','a3','a4','a5']

```

の全ての要素を"/"で結合した文字列を出力し、さらにその文字列を'/'区切りで配列に直してください

```js

const array = ['a1','a2','a3','a4','a5']

array.join('/').split('/');

```

**問18**

配列```['おはよう','こんにちは','おやすみなさい']```の要素がランダムに出力される関数を書いてください。(配列に要素が追加される事を仮定してたものにしてください)

```js

const array = ['おはよう','こんにちは','おやすみなさい'];

const greeting = array[Math.floor(Math.random() * array.length)]

greeting

//おはよう or こんにちは or おやすみなさい

```

**問19**

Object.createで空のオブジェクトを作成し、値が1のプロパティpを出力してください

```js

const obj = Object.create({}, {p: {value: 1}});

obj.p //1

```

**問20**

コンストラクタWhoの初期化時に'morita'(String)を渡しインスタンスプロパティnameに代入、

インスタンスメソッドgetNameの返り値がWho.prototype.name値になるいわゆる「classのようなもの」を作成してください

※インスタンスメソッドはprototypeに代入してください

```js

function Who(name){

 this.name = name;

};

Who.prototype.getName = function(){

 console.log('Myname is ' + this.name);

};

let o = new Who('morita');

o.getName()

```

**問21**

浅いコピー(shallow copy)と深いコピー(deep copy)の違いを説明してください

```js

//**shallow copy**

//プロパティ値や要素値だけのコピーでその先の参照まではコピーしない

//例

let arr = [{x : 2}];//オブジェクト参照をもつ配列

let arr2 = [].concat(arr);//要素をコピー

arr2[0].x = 123;//変数arr2から見える要素の参照先オブジェクトを変更。

arr[0].x//変数arrから変更が見える(shallowだから)

//123

//**deep copy**

//コピー元とコピー先が別のオブジェクトを参照していること。プロパティが別のオブジェクトを参照していれば参照崎のオブジェクトも含めてコピーします。deepcopyが必要な場面はない。自分で実装する必要がある。パーフェクトP199

```

**問21**

下記

```js

let array = ['e','a','k','B','c'];

array.sort();

```

を実行した結果を答えてください

```js

['B', 'a', 'c', 'e', 'k']

//note 順番は文字エンコーディングによって決まる

//要素に数値があった場合文字列に置き換えられる

```

**問22**

上記の配列を大文字小文字区別なく順番通りにしてください。期待する値```['a','B','c', 'e','k']```

```js

let array = ['e','a','k','B','c'];

array.sort(function(a,b){

 return a.toUpperCase() > b.toUpperCase() ? 1 : -1 ;

});

//['a', 'B', 'c', 'e', 'k']

```

**問23**

このような```[20,100,3,35,0]```

比較する配列の要素が数値の場合、「降順」にsortしてください

期待する結果```[100, 35, 20, 3, 0]```

```js

let numArray = [20,100,3,35,0];

numArray.sort(function(a,b){

 return b - a;

});

[100, 35, 20, 3, 0]

//昇順の場合

return a - b

```

**問24**

文字列

'10'をNumber型にし、型判定し、数値かどうか評価後、文字列に変換してください

```js

let a = +'10';

typeof a

//number

isNaN(a);

//false

a.toString();

//'10'

//other

let a = parseInt('10', 10);

```

**問25**

カーリー化されたadd(1)(2)もしくはadd(1,2)

を実行した際両方とも返り値3になる関数を定義しなさい。p85

```js

function add(x, y){

 if(typeof y == 'undefined'){//部分適用

  return function(y){

return x + y

  }

 }

 //完全適用

 return x + y

}

add(1)(2) //3

add(1,2) //3

```

**問26**

クロージャーを使ったファクトリー関数。

```js

const fafa = Factory('morita');

fafa.introduce()

//'morita'

```

上記のような実行をしたら渡したname(ここではmorita)が表示されるメソッドintroduceを持つファクトリー関数を定義しなさい。

```js

function Factory(name){

 function getName(){

  return name;

 };

 return {

  introduce : function(){

    console.log(getName());

   }

 }

};

const fafa = Factory('morita');

fafa.introduce()

//morita

```

**問27**

関数```sayHi```に自分の名前を引数で渡した際に```hello!yourname```、何も渡さない場合```hello!```

と返す関数を作成し、それをapplyで実行してください。また

applyの第一引数にnullを渡す場合とオブジェクトを渡す場合のそれぞれのthisは何を指しますか答えてください

p83

```js

let sayHi = function(name){

 return 'hello!' + (name ? name : '');

};

sayHi('kenji');

sayHi();

sayHi.apply(null,['kenji']);//関数呼び出し

let greeting = {

  sayHi: function(name){

    return 'hello!' + (name ? name : '');

  }

};

//メソッド呼び出し

greeting.sayHi.apply(greeting,['kenji']);//渡す

greeting.sayHi.apply(greeting);//渡さない

//関数呼び出しの場合thisはwindowを指し、nullを渡す、

//メソッド呼び出しの場合thisはオブジェクトを指しオブジェクトの参照を渡す

```

**問28**

```js

let obj = {x : 2, y: 3};

```

このobjをプロパティ追加不可、削除変更は可能にし、プロパティ追加不可か否かの判定メソッドでtrueが返る事を確認した後、objのkeyを列挙してください。

```js

let obj = {x : 2, y: 3};

Object.preventExtensions(obj);

Objcet.isExtensible(obj);//true

Object.key(obj);

//['x', 'y']

```

**問29**

こちら```let obj = {}``` と等価をObjctメソッドで生成してください

```js

let obj = Object.create(Object.prototype);

```

**問30**

こちら

```js

let obj = {x : 2, y: 3}

```

と等価をObjectメソッドで生成してください

```js

let obj = Object.create(Object.prototype, {

   x : {value: 2, writable: true, enumerable: true, configurable: true},

   y : {value: 3, writable: true, enumerable: true, configurable: true}

})

```

**問31**

こちら

```js

const obj = { x : 2}

```

の属性を出力してください

```js

Object.getOwnPropertyDescriptor(obj, 'x');

// {

//  configurable: false,

//  enumerable: false,

//  value: 2,

//  writable: false

//.fseventsd/}

```

**問31**

こちら

```const obj2 = {x : 2};```にObjectメソッドを用いてプロパティ```y```、値```2```、```プロパティ追加可能```を定義して、Objectメソッドで情報(値と属性)を返してくださいP149

```js

let obj2 = {x : 2};

Object.defineProperty(obj2, 'y', {value: 3, enumerable: true});

//[object Object] {

//  x: 2,

//  y: 3

//}

Object.getOwnPropertyDescriptor(obj2, 'y')

// {

//  configurable: false,

//  enumerable: true,

//  value: 3,

//  writable: false

//}

```

**問32**

実引数の数を出力、第一引数を出力する関数fを実行してください

```js

function f(){

 console.log(arguments.length)

 console.log(arguments[0])

}

f(2)

//1

//2

```

**問33**

```js

let arr = ['2','23','0','16'];

```

を小さい順にソートしてください。その後ソートをできないようにread-onlyにしてください

```js

let arr = ['2','23','0','16'];

arr.sort(function(a,b){ return a - b ;});

//['0', '2', '16', '23']

Object.freeze(arr);

//['0', '2', '16', '23']

arr.sort();

//.fseventsd/'Cannot assign to read only property '1' of [object Array]'

```

**問34**

```let arr = [3,4,5];```をconcat以外で新たな配列として```arr2```にコピーしてください。その後```arr2[0]= 123```を代入するとarrは何を出力するか答えなさい

```js

let arr = [3,4,5];

let arr2 = arr.slice(0, arr.length);

arr2

//[3, 4, 5]

arr2[0] = 123;

arr

//[3, 4, 5]//変数arrから変更は見えない(要素をコピーしているから)

arr2

//[123, 4, 5]

//別解

let arr2 = arr.map(ele => ele);

arr2

//[3, 4, 5]

```

**問35**

こちらは2つのパラメーターを足して返すgetSum関数です。

```js

const getSum = (a, b) => a + b

```

このパラメーターに何もわたってこなかった場合Errorをスローすようにしてください

期待する結果

getSum(10) //throws b is not defined

getSum(undefined, 10) //throws a is not defined

```js

const _err = function(message) {

    throw new Error(message);

}

const getSum = (a = _err('a is not defined'), b = _err('b is not defined'))=> a + b

getSum(10) //throws b is not defined

getSum(undefined, 10) //throws a is not defined

getSum(10, 20);

//30

```

**問36**

strict modeの代表的な制約を挙げて説明してください。

```

- 暗黙のグローバル変数の禁止

(標準モードではvarを伴わず変数に値を割り当てると現在のスコープに関係なくグローバルオブジェクトにその名前のプロパティを追加してしまう。strictモードでは明示的にエラーになる)

- 関数内でthis参照がグローバルオブジェクトを参照しない

- NaN、Infinity、undefinedのグローバル変数を読み込み専用

- 重複のプロパティ名とパラメータ名を禁止

リテラルでのオブジェクト生成時同じ名前を持つプロパティを複数定義する場合や、関数に同じ名前を持つパラメータを複数与える場合標準モードでは後に定義されたものが優先されますがstrictモードではこのようなコードを実行する際にエラーが発生します。

'use strict';

//オブジェクト生成時にエラー//標準モードで実行する場合は後に定義されたものが反映される

const object = {

  prop1 : 100,

  prop1 : 200

}

//関数定義字にエラー発生

function func(val, val){

  console.log(val);

}

func(1, 2);

//2

パラメータとargumentsがそれぞれ独立

。

標準モードでは関数にパラメータを設定している場合、関数本体におけるパラメータの名前を持つ変数はパラメータの一にあるargumentsオブジェクトの要素のエイリアスとして定義されていました

。つまり最初のパラメータとargument[0]は、名前は異なるものの、その実体は同じものでした。

strictモードではこれが変更されパラメータとargumentsは独立した存在として扱われるようになり、それぞれ個別の引数が割り当てられます。

(function (param){

  'use strict';

  //引数がプリミティブ型の場合はStrictモードと標準モードで動作がことなる。

  pram = 'param';

  console.log(param, arguments[0]);

  //'param'

  //(標準モードの場合)

  'param' 'param'

  arguments[0] = 'arg';

  console.log(param, arguments[0]);

  //'param' 'arg';

  //標準モードの場合 'arg' 'arg'

  })('引数') //関数に文字列を渡して実行

但し、引数がオブジェクトの場合はパラメータとargumentsに同じオブジェクトへの参照が格納されるためプロパティへのアクセスは事実上同じものへのアクセスとなります。

arguments オブジェクトへの値の割り当ての禁止

関数実行時に与えられた引数はarguments変数に格納されます。Strictモードではこのargumentsオブジェクトに別の新たなオブジェクトを割り当てることができません。

'use strict';

//arguments変数を別の値で置き換えることができない

(function(){

  //SyntaxErrorが発生

  arguments = [100, 200, 300];//別の値でまるまる置き換えている。。

  })();

  //argumentsへの要素の追加や変更は可能

  (function(){

    //要素の置き換え

    arguments[0] = 200;

    要素の追加

    arguments[1] = 300;

    console.log(arguments[0], arguments[1]);

    //200, 300

    })()

    - arguments.calleeアクセスの禁止

再帰などの目的で関数内でその関数自身にアクセスする必要がある場合にはarguments.calleeではなく、関数名を使って呼び出します。関数式を使用する場合は無名関数にするのではなく、その関数に名前を与えておく必要があります。

8進数リテラルの禁止

'use strict';

//8進数リテラルを使用するとsyntaxError

//標準モードで実行する場合はあoctに数値8が割り当てられる。

const oct = 010;

- Functionオブジェクトのcallerプロパティのアクセス禁止

ブロック内の関数分の禁止

'use strict';

//ブロック内部の関数宣言はsyntaxError

if(true) {

  function func(val){return  val;}

}

//ブロック内部での関数式の定義は問題なし

if(true){

  val fun = function(val) {return val};

}

delateによる変数や関数の削除の禁止

標準モードでは演算対象が削除できない変数や関数であっても暗黙的に失敗していた。strictモードではエラーを発生させる。Configurable属性にfalseが設定されている再設定不可プロパティの削除時もエラーが発生します。

- with文の禁止

使用するとSyntaxErrorが発生する

- evalが新しいシンボルを作らない

-

evalコードが独自のスコープで動作する。標準モードでevalに文字列を渡してコードを実行するとそのコードは呼び出しているスコープ上で動作する。つまりevalの実行中に宣言された変数は呼び出したスコープに定義される。

strictモードではevalで実行されるコードが自身のスコープを持ちます。このスコープから外側のスコープにある変数にはアクセスできますが外側のスコープに変数を定義することはできません。関数スコープと同じです。

//'use strict'は複数のstrictモード記述のあるjsファイルの結合されて本番のファイルを構成している場合先頭のファイルの先頭部に置いた'use strict'文によって結合されたスクリプト全体がstrictモードになりその結果コードが誤作動するという事例があった。

ある関数がstrictモードで動作するかの判定は呼び出し時のスコープではなく、定義されたスコープで行われる。Strictモードのコード内で呼び出しても標準モードで定義された関数は標準モードで実行される。argumentsとevalを使っているか？使っていたらそこがstrictモードかどうかを確認しましょう。※scriptタグはタグ単位でスクリプトの実行環境を生成する。そのためタグごとにモードの選択をする。Strictモード内で<script>タグを動的に生成する場合も新しく生成されたタグ内のScriptは指示序文を与えなければ標準モードで動作します。node.jsのrequire()で呼び出すコードは呼び出し元の指示序文に影響されません。strictでも呼び出すコードのコンテクストが標準モードならそのコードは標準モードで動作する

//strictモードの即時実行関数

(function(){

  'use strict';

  //loose関数の中身はStrictモードではエラーが発生するコード

  loose();

  })()

  function loose(){

    //varを忘れて、8進数リテラルを使用

    a = 010;

  }

  //loose関数は標準モードで動作するため、aがグローバルオブジェクトのプロパティとして追加されている

  console.log(a);

  //8

//thisの値にnullやundefinedが競ってされていた場合標準モードではthisはこれらの代わりにグローバルオブジェクトを参照する。strictモードではこの強制的な変換は行われずthisにはそれぞれの値がそのまま格納される。this値にプリミティブ値が競ってされた場合標準モードではそのthisはプリミティブ値の型に対応するプリミティブラッパー型オブジェクトを参照するがstrictはこの型変換もしない。

```

**問37**

for in文に関する注意点を3つ挙げてください

```

- プロパティを列挙する順序がオブジェクトリテラルと配列リテラルで違う

- 列挙できないプロパティがある(Array.lengthなど)

- プロトタイプ継承したプロパティも列挙する

```

**問38**

DOM上にあるdivをnodeListに変換して配列に格納してください

```js

const nodelist = [...document.querySelectorAll('div')];

```

**問39**

配列```const arr = ['f','o','x','k'];```をインデックス順に出力させてください

```js

const arr = ['f','o','x','k'];

for(let j of arr){

console.log(j)

}

//別解

const arr = ['f','o','x','k'];

arr.forEach(function(ele){

 console.log(ele);

 }

)

```

**問40**

またイテレーターを使い順番に出力してください

```js

const arr = ['f', 'o', 'x', 'k'];

const eArr = arr[Symbol.iterator]();

eArr.next().value //f

eArr.next().value //o

eArr.next().value //x

eArr.next().value //k

```

**問41**

配列```['a', 'b', 'c', 'd', 'e']```

のインデックス2番目に'morita'という要素を加えなさい。期待する結果```['a', 'b','morita', 'c', 'd', 'e']```

```js

letarry = ['a', 'b', 'c', 'd', 'e'];

arry.splice(2, 0 , 'morita');

arry

//['a', 'b','morita', 'c', 'd', 'e']

```

**問42**

これ```const o = {};```と同じ意味を持つコードをObjectのAPIを使って生成してください

```js

const o = Object.create(Object.prototype);

```

**問43**

{p: 42}となるようなオブジェクトをObjectメンバを使って生成してください

```js

o = Object.create({}, {p: {value : 42}});

```

**問44**

1234という数字を文字列に変更後、配列の要素としてインデックス順に格納してください

```js

const count = 1234;

const ee = count.toString();

let arr = [];

for(let i = 0; i < ee.length; i++){

 arr[i] = ee.charAt(i);

}

console.log(arr)//['1','2','3','4'];

```

**問45**

こちらは要素が2だったらループを抜けたいのだが期待どうり動かない

期待する出力

//0, 1

```

[0, 1, 2, 3, 4].forEach(function(val, i) {

  if (val === 2) {

    // how do we stop?

    return true;

  }

  console.log(val);

});

// 0, 1, 3, 4

```

期待通りになるようにしてください

```js

//use some

[0, 1, 2, 3, 4].some(function(val, i) {

  if (val === 2) {

    return true;

  }

  console.log(val); // your code

});

//0, 1

//use for

const a = [0, 1, 2, 3, 4];

for (let i = 0; i < a.length; i++) {

  if (a[i] === 2) {

    break; // stop the loop

  }

  console.log(a[i]);

}

//0, 1

```

**問46**

```js

const Speaker = {

 say : function(wordsGetter){

  const words = wordsGetter();

   alert(words);

 }

};

function Person(nickname){

 this.nickname = nickname;

}

Person.prototype.sayName = function(){

    self = this;

    Speaker.say(function(){

      return self.nickname;

    });

};

const person = new Person('moriken');

person.sayName();

```

[答え2](http://jsbin.com/wacumupuqo/edit?js,console,output)

```js

const Speaker = {

 say : function(wordsGetter){

  const words = wordsGetter();

   alert(words);

 }

};

function Person(nickname){

 this.nickname = nickname;

}

Person.prototype.sayName = function(){

    Speaker.say(function(){

      return this.nickname;

    }.bind(this));

};

const person = new Person('moriken');

person.sayName();

```

**問47**

下記のような

```js

array = [

{name: 'kenji', mail:'fafa@eee.com'},

{name: 'morita', mail: 'kkk@faf.com'}

]

```

配列内にある連想配列のkeyとmail値を配列に格納して出力してください

```js

array = [

{name: 'kenji', mail:'fafa@eee.com'},

{name: 'morita', mail: 'kkk@faf.com'}

];

let array2 = [];

array.forEach(function(Element, ind, array){

   for(let key in Element){

    if(key == 'mail'){

  array2.push(Element[key])

  }

 }

})

console.log(array2);

```

**問48**

配列```let passed = [12, 5, 8, 130, 44]```の要素全てが10以上かどうかを評価してtrueかfalseを返してください。また10以上のものが一つでもあった場合trueを返してください。

```js

function isBigEnough(ele, ind, arry){

 return (ele >= 10);

};

const passed = [12, 5, 8, 130, 44].every(isBigEnough);

passed //false

```

**問49**

二次元配列

```

[['one', 'info@fa'],['two', 'send@fafa'],['three', 'hoso@fafa']

];

```

の'two'の値を取得してください

```js

const fafa = [['one', 'info@fa'],['two', 'send@fafa'],['three', 'hoso@fafa']

];

const map = new Map(fafa);

map.get('two');

//'send@fafa'

```

**問50**

問49の変数fafaにインデックス3番目の要素として['four',fafa@eee]の配列を追加してください

```js

const fafa = [['one', 'info@fa'],['two', 'send@fafa'],['three', 'hoso@fafa']

];

const map = new Map(fafa);

map.set('four', 'fafa@eee');

```

</details>

<details><summary>問51〜問100</summary>

**問51**

問50の変数fafa内にある要素を出力してください

//期待する出力

//['one','info@fa']

//['two', 'send@fafa']

//['three', 'hoso@fafa']

```js

const fafa = [['one', 'info@fa'],['two', 'send@fafa'],['three', 'hoso@fafa']];

const entries = map.entries();

for (const entry of entries){

 console.log(entry);

}

```

**問52**

```'morita kenji'```のような1つ以上の小英字、半角スペース、1つ以上の小英字にマッチした場合、配列['morita kenji']が返るようにしてください。

```js

//正解例

/\w+\s\w+/.exec('morita kenji')

```

**問53**

このような

```'It is an important problem'```と```'The import duty is not cheap'```の文字列内```import```にマッチするとbooleanを返す記述をしてください

```js

const str = 'It is an important problem';

const str2 = 'The import duty is not cheap';

let isImport = /.*\bimport\b.*/.test(str);

isImport//false

let isImport = /.*\bimport\b.*/.test(str2);

isImport

//true

//単語の境界線には\b

```

**問54**

ひらがな全てにマッチ、半角カタカナ全てにマッチ、カタカナ全てにマッチする正規表現を記述してください

```js

//ひらがな

[ぁ-ん]

//カタカナ

[ァ-ヶ]

//半角カタカナ

/^[\uFF65-\uFF9F]+$/

//半角以外にmatch

//[

^A-Za-z0-9

]

```

**問55**

「」の中に「ヤッホー!」の文字列が1回以上続く場合にのみマッチする正規表現を書いてください。(！が英単語を構成する文字以外の場合はどうか、また「ヤッホー！」が2回以上3回以下にマッチにはどう書きますか)

```js

const str = '「ヤッホー！ヤッホー！」'; /「(ヤッホー！)+」/.exec(str); //['「ヤッホー！ヤッホー！」', 'ヤッホー！']

//メタ文字

const str = '「ヤッホー?ヤッホー@」';

/「(ヤッホー\W)+」/.exec(str);

['「ヤッホー?ヤッホー@」', 'ヤッホー@']

```

**問56**

```正規表現の/(ありがとう|こんにちは｜さようなら)/```と```/ありがとう|こんにちは｜さようなら/```の違いを教えてください。それぞれexecメソッドを使用した際の返り値を教えてください

```js

//文中に使えるかどうか

//

const str = '彼はありがとうと言った';

/彼は(ありがとう|こんにちは｜さようなら)と言った/.exec(str);

//['彼はありがとうと言った', 'ありがとう']

//

const str = '彼はありがとうと言った';

/彼はありがとう|こんにちは｜さようならと言った/.exec(str);

//['彼はありがとう']

```

**問57**

「When」、「Where」、「Who」、「What」、「Why」、「How」の単語のみにマッチする正規表現を書きなさい

```js

const str = 'How';

/Wh(en|ere|o|at|y|)|How/.exec(str);

```

**問58**

こちらが

```js

x = new Boolean(false)

```

if文の式として渡すと実行されるか答えなさい

[参照](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean)

```js

x = new Boolean(false);

if (x) {

 //実行される

}

//undefinedやnull以外のオブジェクトは実行されます

//真偽値オブジェクトは格納されている値がfalseであってもtrueと評価される。

const falseValue = new Boolean(false);

console.log(falseValue)//false,真偽値オブジェクトが出力される

if(falseValue){//真偽値オブジェクトの内容がfalseでもオブジェクト自体は常にtrue値をみなされる

  //run

}

//もし真偽値でない値を真偽値に変換したいのであればnew演算子を使用せずBoolean()に値を渡してください。Boolean()はプリミティブ値のtrueもしくはfalseを返します。以下は全てfalse

console.log(Boolean(0));

console.log(Boolean(-0));

console.log(Boolean(false));

console.log(Boolean(''));

console.log(Boolean(undefined));

console.log(Boolean(null));

//以下は全てtrue

console.log(Boolean(1789));

console.log(Boolean('false'));//'false'という文字列は真偽値プリミティブのfalseとは異なる

console.log(Boolean(Math);

console.log(Boolean(Array()));

//see: 開眼!Javascirpt(O'REILLY)

```

**問59**

```js

myFalse = new Boolean(false);

g = new Boolean(myFalse);

```

上記のコードはtrueかfalseか

答え

```js

myFalse = new Boolean(false);

g = new Boolean(myFalse);

g//true

//Boolean オブジェクトの初期値としてオブジェクトを指定した場合、それが値が false の Boolean オブジェクトであっても、新しい Boolean オブジェクトは true の値を持ちます

```

**問60**

```

undefined == null

```

の真偽値は何か

```js

if (undefined == null){

  //run

}

//実行されます

```

**問61**

関数iiを実行すると返り値で関数を受け取り、その関数に引数'home'を渡し実行すると'my home'と返ってくるクロージャーを作ってください

```js

const ii = function(){

  const pp = 'my ';

  return function(value){

    console.log(pp + value);

  }

}

const kk = ii();

kk('home');

//my home

```

**問62**

今の時間、何時何分何秒を表してください

```js

const now = new Date();

const nowtime = '今' + now.getHours() + '時' +  now.getMinutes() + '分' + now.getSeconds() + '秒';

nowtime

//'今23時49分56秒'

```

**問63**

こちら

```js

function getSomething(){

  return {

    first: 1,

    second: 2,

    third: 3

  }

}

```

の関数で返しているオブジェクトのfirst,second,thirdのvalue値をそれぞれ

first,second,thirdに代入してください

```js

function getSomething(){

  return {

    first: 1,

    second: 2,

    third: 3

  }

}

const { first, second, third } = getSomething();

first

//1

second

//2

third

//3

```

**問64**

**問65**

文字列```'fafafakenjifafafa'```に```'kenji'```が含まれているかどうかの真偽値を出力してください

expect //true

```js

console.log('fafaeeekenjifa'.includes('kenji'));

//true

```

**問66**

文字列'repeat'を2回繰り返した結果を出力してください

expect //'repeatrepeat'

```js

console.log('repeat'.repeat(2));

//'repeatrepeat'

```

**問67**

文字列```foo```をイテレーターを使い```['f','o','o']```となるようにしてください。

```js

const chars = [];

for (let n of 'foo'){

 chars.push(n);

}

console.log(chars);//['f','o','o']

```

**問68**

IteratableからIteratorを取得、要素を出力していきして「要素がもうない意」の```{value: undefined, done: true}```を出力してください

```js

const arr = ['ooo', 'eee'];

const Iterator = arr[Symbol.iterator]();

console.log(Iterator.next()); // { done: false, value: 'ooo'}

console.log(Iterator.next()); // { done: false, value: 'eee' }

console.log(Iterator.next()); //{ done: true, value: undefined }

```

**問69**

文字列'foo'を```['f','o','o']```と出力してください

```js

//スプレッドオペレータ

const arr = [...'foo'];

console.log(arr);

```

**問70**

文字列```morita```の1文字目```m```を変数```index0```に代入、2文字目```o```を```index1```に代入、残りを配列```rest```の各要素として出力してください

```js

//分割代入

const [index0, index1, ...rest] = 'morita';

console.log(index0,index1, rest);

//'m'

//'o'

//['r', 'i', 't', 'a']

```

**問71**

```foo(1, 2, 3, 4, 5, 6)```を実行したら1がfirst、2がsecond、残りが配列の要素になるような ```foo```を定義してください

```js

//レストパラメータ

function foo(first, second, ...rest){

 console.log('first', first);

 console.log('second', second);

 console.log('rest', rest);

}

foo(1,2,3,4,5,6);

```

**問72**

配列```arr = [1, 2, 3]```にArray#concatを使わずに```arr2 = [4, 5, 6]```を結合させ```[1, 2, 3, 4, 5, 6]```となるようにしてください

```js

//スプレッドオペレータ

const arr2 = [4, 5, 6];

const arr = [1, 2, 3, ...arr2];

console.log(arr);//[1, 2, 3, 4, 5, 6]

```

**問73**

下記のようなあるファイル(module.js)で記述した

```js

const foo = 'foo';

function bar(){};

class Baz{

  baz(){}

}

```

を別のファイル(import.js)にexport、個別のメンバとして読み込む記述を示してください。また「module」という別名で全てのメンバを取得する記述も示してください

※module.jsとimport.jsは同階層にあるものとする

```js

//読み込まれる側

const foo = 'foo';

function bar(){};

class Baz{

  baz(){}

}

export {foo, bar, Baz};

//読み込む側

//メンバ毎にインポート

import {foo, bar, Baz} from './module';

//console.log(foo);

//bar();

//new Baz();

//インポートする変数名の指定

import {foo as poo} from './module';

console.log(poo)

//モジュールまとめてインポート

import * as from './module';

//console.log(module.foo)

```

**問74**

```const obj = {foo: foo, bar: bar}```

オブジェクトのkeyとvalueが等しい場合の記述

をせよ

```js

const obj = {foo: foo, bar: bar};

const obj = {foo, bar};

```

**問75**

下のように

```

const key = 'foo';

const obj = {};

obj[key] = 0;

obj[key + '_bar'] = 1;

```

書いていた記述をECMAScript2015の記述で書いてください

```js

const key = 'foo';

const obj = {

  [key] : 0,

  [key + '_bar'] : 1

}

//common

console.log(obj.foo, obj.foo_bar);

//0, 1

```

**問76**

下記

```js

function ff(){

  return 'kenji';

}

```

のような関数をconsole.log内からテンプレートリテラルを使って出力してください

期待する出力 my name is kenji

[参照](https://gist.github.com/kuu/b7eb679a3ad48d980ed3)

```js

function ff(){

  return 'kenji';

}

console.log(`my name is ${ff()}`);

//my name is kenji

```

**問77**

変数a,bにそれぞれ1,2を代入してください

```

let [a, b] = [1, 2];

```

**問78**

文字列 ```line1```と```line2```を改行てconsole.log出力してください

```js

console.log(`line1

line2

`);

```

**問79**

```js

const long = '30px';

const weight = '40px';

function tag(strings, ...values){

  //console.log(strings);['身長','で、体重は','です']

  return `m:${values[0]}、p:${values[1]}`; };

const str1 = tag`身長${long}で、体重は${weight}です`; console.log(str1);

```

**問80**

ユーザー定義関数funを作り、実行時の引数として、オブジェクトkeyにa,b。値をそれぞれ1,4として加算して返してください

```js

function fun({a, b}){

  return a + b;

}

fun({a: 1, b: 4});//5

```

**問81**

```const aa = [['morita', 'kenji', 'keiko'],['morita', 'kenji', 'keiko']```

全てのaaにある多次元配列の全ての要素に文字列'san'を付け加えて一つの配列として出力してください

```js

```

**問82**

mapとforEachの違いは何か答えてください

```js

//The main difference between the two methods is conceptual and stylistic: You use forEach when you want to do something to or with each element of an array (doing 'with' is what the post you cite meant by 'side-effects', I think), whereas you use map when you want to copy and transform each element of an array (without changing the original).

//ref

http://stackoverflow.com/questions/3034392/what-use-does-the-javascript-foreach-method-have-that-map-cant-do

//map

//新しいarrayを返す

const a = [{ val: 1 }, { val: 2 }, { val: 3 }];

const uu = a.map(function(el) {

    el.val++;

    return el.val

});

a//[{ val: 2 }, { val: 3 }, { val: 4 }]

uu//[2, 3, 4]

//forEach

const a = [{ val: 1 }, { val: 2 }, { val: 3 }];

a.forEach(function(el) {

    el.val++;

    console.log(el.val);

});

//2

//3

//4

//実行するだけ

//forEachならこんなことも

//forEachが配列の要素を編集して配列で返すには

//

const a = [1,2,3],

    b = [];

a.forEach(function(el) {

    b.push(el+1);

});

// b is now [2,3,4], a is unchanged [1, 2, 3]

const a = [1, 2, 3];

const b = a.map(function(elem){

  return  elem + 1;

});

b// [2, 3, 4]

a// [1, 2, 3]

//メソッドを実行

cats.forEach(function(cat) {

    cat.meow(); // nicer than cats[x].meow()

});

const oo = [2,3,4,5,6];

const aa = oo.map(function(x){

    return x + 1;

});

aa //[3, 4, 5, 6, 7]

//forEach

それぞれの配列の要素に対して何かしたいとき

const oo = [2,3,4,5,6];

const aa = oo.forEach(function(x){

    return x + 1;

});

aa// undefined

//forEachは元の配列を変更できる

//map

元の配列を変更せず変換やcopyをしたいとき

```

**問83**

```[{name: 'kenji'},{name: 'morita'}]```の要素のvalueを次のように書き出してください(文字列'san'を付けています)e.g```['kenjisan', 'moritasan']```

```js

const aa = [{name: 'kenji'},{name: 'morita'}];

const result = aa.map(function(ele, i){

   return ele.name + 'san';

});

result//['kenjisan', 'moritasan']

```

**問84**

問83と同じ事をforEachでしてください

```js

const aa = [{name: 'kenji'},{name: 'morita'}];

const arry = [];

aa.forEach(function(ele, i){

      for (const key in ele){

           arry.push(ele[key] + 'san')

      }

});

arry//['kenjisan', 'moritasan']

```

## Objects

**問85**

```js

const atom = {

  value: 1,

  addValue: function (value) {

    return atom.value + value;

  },

};

```

上記object-shorthandを使って書き換えてください

```js

//ok

const atom = {

  value: 1,

  addValue(value) {

    return atom.value + value;

  },

};

```

**問86**

こちらのobjをkey内でメソッド呼び出しされているのをコンピューティッドプロパティを使って書き換えてください

```js

function getKey(k) {

  return `a key named ${k}`;

}

const obj = {

  id: 5,

  name: 'San Francisco',

};

obj[getKey('enabled')] = true;

//ok

function getKey(k) {

  return `a key named ${k}`;

}

const obj = {

  id: 5,

  name: 'San Francisco',

  [getKey('enabled')]: true,

};

```

**問87**

下記のようなURLのファイルパスごとに配列に格納してください

```js

const filepath = location.pathname.substring(1).split('/');

filepath;

//['kenmori', 'Angular2_TypeScript', 'tree', 'master', 'angular2-quickstart']

//https://github.com/kenmori/Angular2_TypeScript/tree/master/angular2-quickstart```

```

**問88**

下記のようなobj内のkeyと値が一緒の際できるshorthandで記述してください

```js

const lukeSkywalker = 'Luke Skywalker';

// bad

const obj = {

  lukeSkywalker: lukeSkywalker,

};

//ok

const obj = {

  lukeSkywalker,

};

```

**問89**

下記のようなある配列itemsの要素をコピーしている記述をspreadArrayを使って簡潔に記述してください

```js

const len = items.length;

const itemsCopy = [];

let i;

for (i = 0; i < len; i++) {

  itemsCopy[i] = items[i];

}

const itemCopy = [...items];

```

**問90**

windowオブジェクトを7つ答えてください

```

navigator

location

history

screen

frames

document

parent, top, self

```

**問90**

下のようにuserというnameとidをプロパティで持ったオブジェクトを再割り当てやマルチプルなobjectを扱う際に簡潔な書き方にしてください

```js

function add (user){

  const name = user.name;

  const id = user.id;

  return `${name} ${id}`;

}

```

答え

```js

//ベター

function add (user) {

  const { name, id } = user;

  return `${name} ${id}`;

}

//best

function add ({name, id}){

  return `${name} ${id}`;

}

```

**問91**

```const aaa = [['oo','oo1'], ['ll','ll2']];```このような多次元配列のインデックス0番目だけを出力してください

```js

const aaa = [['oo','oo1'], ['ll','ll2']];

aaa.forEach(function(ee){

  ee.filter(function(eee, i){

  if(i == 0){

      console.log(eee);

    }

  });

});

//oo ll

```

**問92**

Array destructuringとして簡潔に記述してください。

シャローコピーとディープコピーの違いを教えてください。また

```const aa = ['oo', 'll'];```

aaをbbにシャローコピーしてbb[0]に任意の文字列を代入し、aa[0]の参照する値が変わらないことを確認してください

```js

//concat

const aa = ['oo', 'll'];

const arry = [];

const bb = arry.concat(aa);//shallow copy

bb[0] = 'kk';

aa//['oo', 'll']

bb//['kk', 'll']

//slice

const aa = ['oo', 'll'];

const bb = aa.slice(0, aa.length);

bb[0] = 'kk';

aa//['oo', 'll']

bb//['kk', 'll']

//bad

//spliceは破壊的メソッド(元参照を変える)

const aa = ['oo', 'll'];

const bb = aa.splice(0, aa.length);

bb//['oo', 'll']

aa//[]

```

**問93**

```const aa = ['oo', 'll'];```をbbにコピーしてaaは['kk', 'jj'];が挿入されるようにしてください。期待する結果

bb//['oo', 'll'];

aa//['kk', 'jj'];

```js

const aa = ['oo', 'll'];

const bb = aa.splice(0, aa.length, ['kk','jj'])

bb//['oo', 'll'];

aa//['kk', 'jj'];

```

**問94**

このような配列

```const aa = ['ii', 'jj', 'kk'];```がある。'jj'要素を削除するために

deleteを使った場合とspliceを使った場合の違いは何か。それがわかるコードを書いてください

```js

deleteは削除されたインデックスを残す。spliseは間を詰める。

const aa = ['ii', 'jj', 'kk'];

delete aa[1];

aa//['ii', undefined, 'kk']

const aa = ['ii', 'jj', 'kk'];

aa.splice(1,1);

aa//['ii', 'kk']

```

**問95**

```const text = 'key and value';```このような文字列を単語毎に配列の要素として格納してください

//期待する結果

//['key','and','value']

```js

const text = 'key and value';

const arraytext = ii.match(/\w+/g);

arraytext

['text', 'and', 'value']

```

**問96**

```const text = 'abc def ghi jkl';```の空白の直前の文字をグループ化してカンマ文字の後ろに移動させなさい。

期待する文字列

'ab,cde,fgh,ijkl'

```js

const text = 'abc def ghi jkl';

text.replace(/(.)\s/g,',$1');

'ab,cde,fgh,ijkl'

//or

const text = 'abc def ghi jkl';

text.replace(/(.)\s/g,function(m0, m1){

   return ',' + m1

});

'ab,cde,fgh,ijkl'

```

**問97**

```const array = ['aa','bb','cc','dd','ff'];```

このような配列の要素'bb'の前に'ff'を移動させて ```['aa','ff','bb','cc','dd']```このような配列を完成させてください

```js

array.splice(1,0,array.splice(4,1)[0])

//array

//['aa','ff','bb','cc','dd']

```

**問98**

nullの比較についてそれぞれtureかfalseか答えてください

```js

null < 1

null > 1

null < -1

null > -1

null < 0

null <= 0

null >= 0

null > 0

null == 0

null === 0

//Anser

null < 1 //ture

null > 1 //false

null < -1 //false

null > -1 //true

//数値コンテキストではnullは0と解釈されるため、1より小さく、-1より大きい。

null < 0 //false

null <= 0 //true

null >= 0 //true

null > 0 //false

null == 0 //false

null === 0 //false

//0以下であるが0より小さくはない。

//0以上であっても0より大きくはない。

```

**問99**

こちらの2つのif分の条件式の違いを教えてください

```js

if('a' in obj)

if(obj.a)

**in演算子の場合**

objにキーaが存在する場合(undefinedでも)trueを返す

if('a' in obj)は実行される

**obj.aの場合**

undefinedの場合falseを返す

if(obj.a)が存在しても未定義だと実行されない

```

**問100**

``` const arr = [ 10, 20 ]; ```においてarr[2]が存在しないことを確認してください

```js

2 in arry;

```

</details>

<details><summary>問101〜問150</summary>

**問101**

```const string = '-9';```を数値に変換してください

```js

string - 0

//-9

//別解

//+string

//-9

```

**問102**

sliceとsubstringの違いを教えてください

```js

//引数に-を与えた際に違いが出ます

const str = 'あいうえお';

str.length

str.slice(0,-2)

//'あいう'

//0からインデックス最後の文字を-1とし後ろから数える

const str = 'あいうえお';

str.substring(0, -2);

//'

//負の数字は0とみなす。

//0から0を取得するので空文字を返す

//sliceは開始位置が終了位置以上だと空文字を返す

const str = 'あいうえお';

str.slice(1,1)

//'

//「い」を取得したい場合

const str = 'あいうえお';

str.slice(1,2)

'い'

//substringの場合

//開始位置が終了位置より大きいと交換されて解釈される

const str = 'あいうえお';

str.substring(1,-3);

//substring(-3,1)と解釈され負の数は0と見なされ

//substring(0,1)と同等の処理をする

//'あ'

```

**問103**

次のような文字列```abcdefg```のcとeそれぞれを大文字にしてください

```js

const str = 'abcdefg';

const replaced = str.replace(/[ce]/g,function(str){

 return str.toUpperCase();

});

//replaced 'abCdEfg'

```

**問104**

次のような文字列をvar str = 'こんにちは';

const name = 'もりたさん';

連結し'いい天気ですね'を付け足した新しい文字列を生成してください

期待する結果```'こんにちはもりたさんいい天気ですね'```

連結してもstrは元の文字列のママなことを確認

str

//こんにちは

```js

const str = 'こんにちは';

const name = 'もりたさん';

const newstr = str.concat(name, 'いい天気ですね');

newstr

'こんにちはもりたさんいい天気ですね'

str //こんにちは

//String.concatのパフォーマンスについて

//https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/concat

```

**問105**

targetがnullかundefinedのときのみの判定がtrueになる条件式を書いてください

```js

target == null

```

**問106**

こちら

```js

const value = 0;

const target = value || 10

target

//10

```

はvalueが0の時falseになり10が返る。0の際も代入されるようにしてください

```js

const value = 0;

const target = (value !== undefined) ? value : 10;

value

//0

```

**問107**

配列arrayが空ならfalseが返るようにしてください

```js

const array = [];

array.length !== 0

//false

```

**問108**

こちらは自身のプロパティが定義されていない場合falseが返ることを期待しているがtrueが返る

```js

const obj = {};

obj ? true : false;

```

自身のプロパティを持っていない場合falseが返るようにしてください

```js

const obj = {};

Object.keys(obj).length != 0 ? true : false;

//false

```

**問109**

forでループさせるのとforEachで処理する際の違いを教えてください

```js

//forは構文

//returnで返り値を返し、その関数処理を終える

//forEachはメソッド。受け取った関数を全ての要素に処理するまで終えない。returnしても次の要素に処理が移るのみ

//配列のどれか一つが条件を満たす評価をしたい場合Array.someがある

function isBigEnough(element, index, array) {

  return (element >= 10);

}

const passed = [2, 5, 8, 1, 4].some(isBigEnough);

// passed は false

passed = [12, 5, 8, 1, 4].some(isBigEnough);

// passed は true

```

**問110**

この``` const arry = ['a','b','c']; ``` の列挙可能なプロパティと不可能なプロパティを出力してください

期待する結果

``` ['0','1','2','length'] ```

答え

```js

const arr = ['a','b','c'];

console.log(Object.getOwnPropertyNames(arr));

//['0','1','2','length']

```

**問111**

オブジェクトoに対してaという値が'morita'、列挙可能、削除可能、書き換え可能なプロパティを作成してください

```js

let o = {};

Object.definedProperty(o,'a',{

  value: 'morita',

  writable: true,

  configurable: true,

  enumerable: true,

});

```

**問112**

下のlib/math.jsに入っている1と2を別のファイルで使えるようにして

受け取る方app.jsも記述してください

```js

//lib/math.js

//1

function sum(x, y) {

  return x + y;

}

//2

const pi = 3.141593;

```

```js

//lib/math.js

export function sum(x, y) {

  return x + y;

}

export const pi = 3.141593;

//app.js

import * as math from 'lib/math';

import {sum, pi} from 'lib/math';

//e.g.

math.sum(x, y){

    console.log(math.pi);

    return x + y;

}

sum(1, 3)

```

**問113**

```['morita','kenji','fafafa']```の要素 ```'fafafa'```のインデックスを返してください。

期待する値 2

```js

['morita','kenji','fafafa'].findIndex(x => x == 'fafafa')

//2

```

**問114**

配列```['A','B','C']```を配列の0番目のインデックス値になるようにしてください

expect [['A'],['B'],['C']]

```js

//better

['A','B','C'].map(x => Array.of(x));

//best

['A','B','C'].map(x => [x])

//http://www.2ality.com/2014/05/es6-array-methods.html

```

**問115**

配列```['a', 'b', 'c']```のインデックス1番だけを文字列'kenji'に変えてください

```js

['a', 'b', 'c'].fill('kenji', 1, 2);

//['a','kenji','c']

//http://www.2ality.com/2014/05/es6-array-methods.html

```

**問116**

配列```[6, -5, 8]```を0未満の要素だけ出力してください

```js

const i = [3, 0, 6, -1].find(x=> x < 0);

console.log(i)

//-1

```

**問117**

gen.next().valueを実行すると値が1づつ返ってくるようなGenerator関数を作り、1,2,3と出力してください

```js

function* idMaker(){

    const index = 0;

    while(true)

        yield index++;

}

const gen = idMaker();

console.log(gen.next().value); // 0

console.log(gen.next().value); // 1

console.log(gen.next().value); // 2

```

**問118**

ラッパーオブジェクトとは何ですか？教えてください。

//解答は理解していてある程度どういうものか答えられればいいものとします

```js

//回答例

//trueなどのプリミティブ値のプロパティにアクセスするとjavascirptはプリミティブ値に対応するコンストラクタからラッパーオブジェクトを作り、そのラッパーオブジェクトのプロパティやメソッドにアクセスできるようになる。(「オブジェクトのように」あつかうことができる。)作られたラッパーオブジェクトはオブジェクトへのアクセスが終わると破棄されて元のプリミティブ値に戻します。

例えば下記は文字列オブジェクトから文字列を生成しています。

const string = new String('foo');

string.length;//3 オブジェクトがもつプロパティにアクセスできます。

const string = 'foo'//プリミティブ値として代入

string.length //3 文字列プリミティブをオブジェクトとしてアクセス。同じ3を出力していますが内部的に一時的にラッパーオブジェクトを呼び、オブジェクトにアクセス。その後破棄しています

よく「javascriptは全てがObjectである」と言われるのはこのため

//プリミティブ値・・・文字列,数値,真偽値などtypeofの評価でObjectを返さないそれら

```

**問119**

nullとundefinedの違いを教えてください

```js

//nullはプロパティは設定しているものの、値の初期値としてなんらかの理由で値が入っていないことを明示する際にnullを入れる。変数やプロパティにがその時点で利用不可能にするためにnullを明示的に入れる

//undefinedは存在自体がない

```

**問120**

変数fafaの値がnullかどうかを確認してください

```js

const fafa = null;

console.log(typeof fafa)//Object

console.log(fafa == undefined)//等値演算子ではtrueになってしまう

console.log(fafa === null);//true //同値演算子を使う

//等値演算子ではnullとundefinedはtrueになってしまうことに注意してください。

```

**問121**

プリミティブ型と参照型の同値比較の違いを教えてください。

```js

//プリミティブ型の同値比較は文字通り同じ値かどうかが評価される。

//参照型同士の同値比較は同じオブジェクトを参照しているかどうかが評価される。オブジェクトの代入は参照先の代入であることが理解できればok(参照渡し)

```

**問122**

div要素を10個作ってidがparentの子要素として追加してください

```js

//bad

const parent = document.getElementById('parent');

for(let i = 0; i < 10; i++){

  const child = document.createElement('div');

  parent.appendChild(child);;

}

//good

const fragment = document.createDocumentFragment();

for(let i = 0; i < 10; i++){

  const child = document.createElement('div');

  fragment.appendChild(child);

}

document.getElementById('parent').appendChild(fragment);

```

**問123**

XHTMLにscriptタグで記述する際のCDATAタグをどのように書くか教えてください。またもしそれを書かない場合の実体参照、

``` > ``` と ``` < ``` をどのように書くか教えてください。また、&と'、'はそれぞれエスケープ文字でどのように書きますか？

```js

//CDATAタグ

<script>

<![CDATA[

  //something...

    ]]>

//タグ
の書き方

<h2>


//「'」シングルクウォート

"

//「＆」アンパサンド

&

```

**問124**

実体参照に直すscriptを書いてください

```js

//参照

//http://stackoverflow.com/questions/17966089/how-to-replace-and-with-lt-and-gt-with-jquery-or-js

```

**問125**

次の文章中の

```

 My name is Taro Suzuki and I am a researcher at ABC.

```

小文字のaで始まる英単語にのみマッチする正規表現を書いてください。1文字の場合もマッチの対象で

```js

const str7 = 'My name is Taro Suzuki and I am a researcher at ABC.';

 //str.match(/\ba.*\b/); これだと大文字と次の単語にmatchしてしまう

console.log(str7.match(/\ba\w*\b/g));

//['and','am','a','at']

//\sa\w*\sだと\sは文字の先頭や末尾にはマッチしないので、文章の先頭や末尾にある英単語が対象から外れてしまうことに注意してください。

```

**問126**

```
```や``````などタグにマッチする正規表現を作ってください。またタグ名だけを抜き取ったものも教えてください。

期待する値""

※ではじまる閉じタグは除外

タグ名のみ

```p``` や ```img``` ※いろいろあると思うので答えは一例とさせていただきます

```js

const str3 = ''

const str4 = '
'

const reg2 = /<(\S+)(\s+.+)?>/;//キャプチャあり

const reg3 = /<(?:\S+)(?:\s+.+)?>/;//キャプチャさせない

const re2 = str3.match(reg2);

const re3 = str3.match(reg3);

const re4 = str4.match(reg2);

console.log(re2);

//['','img','src="fafa.com"']

console.log(re2[0]);

//

console.log(re3);

//['']

console.log(re3[0]);

//

console.log(re4);

//['
','p',null]

console.log(re4[0]);

//


```

**問127**

下のこちらを使い

``` const myRe=/ken*/g; const str2 = 'fafakenfafkenji'; ```

文字列の中のkenだけをexecメソッドを使いマッチした文字を全て出力、マッチした文字列の後のインデックスを同時に出力してください

```js

const myRe=/ken*/g;

const str2 = 'fafakenfafkenji';

let array;

while ((array = myRe.exec(str2)) !== null) {

 let msg = array[0] + ' を見つけました。';

  msg += '次のマッチは ' + myRe.lastIndex + ' からです。';

  console.log(msg);

}

//https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec

```

**問128**

次の``` const string3 = 'washable reasonable accessible assemble answerable'; ```

こちらの文字列,

「able」で終わる英単語の前の部分([able]を除いた部分)にマッチする正規表現を書きなさい。期待する結果

```

['wash','reason','answer']

```

```js

const string3 = 'washable reasonable accessible assemble answerable';

const reg5 = /\b\w+(?=able\b)/g;

console.log(string3.match(reg5));

//['wash','reason','answer']

```

**問129**

こちらの文字列

```

const nen1 = 'ケンジは昭和55年生まれの35歳であり、ケンジの母は昭和22年生まれの64歳である'

```

を使い、後ろに「年」および数字以外の文字が続く1桁以上の数字にマッチする正規表現を書いてください

期待する結果

```

['35','64']

```

```js

const nen1 = 'ケンジは昭和55年生まれの35歳であり、ケンジの母は昭和22年生まれの64歳である'

const reg6 = /\d+(?![年\d])/g;

console.log(nen1.match(reg6));

//['35','64']

//see:正規表現書き方ドリル(技術評論社)

//※ 一番最初に見つけたマッチだけが欲しい場合、execの方がいいかもしれません

//see: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match

```

**問130**

下のような文字列```const str222 = 'わたしの名前は「もりた」です。あだなは「もりけん」です';```

のカギ括弧内とその文字列にマッチするような正規表現を書いてください

['「もりた」','「もりけん」']

```js

const str = 'わたしの名前は「もりた」です。あだなは「もりけん」です';

const re = /「(.+?)」/ig;

const result = str.match(re);

console.log(result);

//['「もりた」','「もりけん」']

```

**問131**

上記の文字列を使ってexecメソッドを使い文字列とし2つとも出力してください

期待する結果

//「もりた」「もりけん」

```js

const str222 = 'わたしの名前は「もりた」です。あだなは「もりけん」です';

const re222 = /「(.+?)」/ig;

let result;

while ((result = re222.exec(str222)) !== null){

  console.log(result[0],'ここ')

}

```

**問132**

下記の文字列の「客」という文字の部分ともうひとつある同じ文字である場合のみマッチする正規表現を作成してください

```

○あの客はよく柿食う客だ

×あの客はよく柿食う人だ

○あの友達はよく柿食う友達だ

×あの親友はよく柿食う友達だ

```

```js

//解答例

const str5 = 'あの客はよく柿食う客だ';

const res5 =str5.match(/あの(.+)はよく柿食う\1だ/);

console.log(res5[0]);

//あの客はよく柿食う客だ

//※[0]にはマッチした箇所が、この場合[1]にはキャプチャが入る

```

```js

const str5 = 'あの客はよく柿食う客だ';

const res5 =str5.match(/あの(.+)はよく柿食う\1だ/);

console.log(res5[0]);

```

**問133**

次のタグ

```js

const tag = '


    
kenjimorita.jp

';

//<1><2>kenjimorita.jp3>4>

```


の1と4、2と3が同じ場合にtrue、違う場合はfalseを返す正規表現を書いてそれぞれ出力し確認してください

```js

const tag = '
kenjimorita.jp
';

console.log(/<(\w+)><(\w+)>kenjimorita.jp<\/\2><\/\1>/.test(tag))

//true


const tag2 = '
kenjimorita.jp
';

console.log(/<(\w+)><(\w+)>kenjimorita.jp<\/\2><\/\1>/.test(tag2))

//false

```


**問134**

こちらの

```

[2, 3,-1, -6, 0, -108, 42, 10].sort();

```

sortは正しくsortされない。コンパレータ関数を渡して正しい順序として出力してください。

```js

[2, 3,-1, -6, 0, -108, 42, 10].sort(function(x, y){

if(x < y) return -1;

if(y < x) return 1;

return 0;

});

//[-108, -6, -1, 0, 2, 3, 10, 42]

```

**問135**

```js

const i = document.getElementById();

i.parentNode.tagName

nodeType[1] = ElementNode;

nodeType[2] = AttributeNode;

nodeType[3] = TextNode;

i.childNodes; //子要素を返す

i.firstChild //最初の子要素

```

**問136**

下のような

```html



  


    


  



```


DOMがある。```#nested```

要素を削除してください

```js

const i = document.getElementById('top');

const f = document.getElementById('nested');

i.removeChild(f);

```

**問137**

nestedの親要素が不明の場合の時nestedを削除してください

```js

const node = document.getElementById('nested');

if (node.parentNode) {

  node.parentNode.removeChild(node);

}

```

**問138**

topの子要素全て削除してください

```js

 const element = document.getElementById('top');

 while (element.firstChild) {

   element.removeChild(element.firstChild);

 }

```

**問139**

下のfooオブジェクトが自身のプロパティとしてbarを持っていないことを示してください

```js

// Object.prototype汚染

Object.prototype.bar = 1;

const foo = {goo: undefined};

foo.bar; // 1

'bar' in foo; // true

```

答え

```js

foo.hasOwnProperty('bar'); // false

foo.hasOwnProperty('goo'); // true

```

**問140**

こちらのfor inループでも汚染された継承されたプロパティも

列挙される

```js

// Object.prototype汚染

Object.prototype.bar = 1;

const foo = {moo: 2};

for(const i in foo) {

console.log(i); // barとmooが両方とも表示される

}

//good

// 継承されているfoo

for(const i in foo) {

    if (foo.hasOwnProperty(i)) {

        console.log(i);

    }

}

```

**問141**

new Mapとnew WeakMapの違いを教えていください

```js

//http://uhyohyo.net/javascript/16_1.html

weakMapは参照元を内部で保持していても他のところに全く関係ない、上書きされるとガーベージコレクションの対象になる

Mapは内部で参照元を保持し自分自身で「含まれるオブジェクト一覧」を扱うメソッドがある為にガーベージコレクションの対象にならない

//weakMapのいいところkeyに対してのobjを汚さないで済む

```

**問142**

[0,0,0]の配列をインデックス1と2を7にした配列にしてください

expect : [0, 7, 7]

```js

const ary = [0,0,0];

ary.fill(7,1)

//[0, 7, 7]

```

**問143**

このような

```css

h3:after {

  content:'';

}

```

スタイル定義されている

h3:after(擬似要素)のcontentプロパティにアクセスしてください

```js

const h3 = document.querySelector('h3');

const result = getComputedStyle(h3, ':after').content;

```

**問144**

少なくとも400pxあるビューポートに対してスタイルを制御したい際のif文を書いてください

```js

if(window.matchMedia('(min-width:400)').matches){

/* 少なくとも400ピクセル幅のあるビューポート */

}else {

/* 400ピクセル幅に満たないビューポート       */

}

```

**問145**

こちらの```const numObj = 12345.6789;```

を小数点以下を丸めてください

期待する結果

//12346

```js

const numObj = 12345.6789;

numObj.toFixed();

//12346

```

**問146**

こちらの

```js

const thing = 'global';

function foo(){

  console.log(thing);

  if(true){

    const thing = 'local';

    console.log(thing);

  }

}

foo();

```

のconsole.logはそれぞれ何を出力するか答えなさい。またそうなる理由を説明してください

```js

const thing = 'global';

function foo(){

  console.log(thing);

  if(true){

    const thing = 'local';

    console.log(thing);

  }

}

foo();

//undefined

//local

//この記述をすると関数内宣言内での変数宣言は巻き上げられてjavascriptは下のように解釈をするから

const thing = 'global';

function foo(){

  const thing;//巻き上げ

  console.log(thing);

  if(true){

    thing = 'local';

    console.log(thing);

  }

}

foo();

```

**問147**

先程のfoo()を実行した際に期待する値が出力されるようにしてください

```js

const thing = 'global';

function foo(){

  console.log(thing);

  if(true){

    const thing = 'local';

    console.log(thing);

  }

}

foo();

//block scope。変数スコープがブレース{}の中に閉じる

```

**問148**

div要素をnodeListとして取得し、Arrayのメソッドで「配列の様なオブジェクト」から配列に変換してください

```js

const likeArray = document.querySelector('div');

const turnArrayFun = function(obj){

    return [].map.call(obj, function(obj){

          return obj;

    })

}

turnArrayFun(likeArray);

```

**問149**

下記のようなDOMがある

```html



  (1)

  既存の内容



```


この「既存の内容」より前(1)に```
子要素
```を挿入してください。但しdocument.writeやinnerHTMLは使わないものとする。


```js

const target = document.querySelector('div#target');

const html = '
子要素
';

target.insertAdjacentHTML('afterbegin',html);


//https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML

```

**問150**

こちら

```html

(1)



  既存の内容

  (2)



(3)

```


上記問題と同じDOM構造でそれぞれtargetより前に挿入(1)、「既存の内容より弟」位置に挿入(2)、targetより後に挿入(3)する記述をしてください

```js

const target = document.querySelector('div#target');

const html = '
子要素
';

const position =

beforebegin//(1)

beforeend//(2)

afterend //(3)

target.insertAdjacentHTML(position,html);

```


問151〜問200

**問151**

下記

```js

const key = 'greeting';

const objA = {};

objA[key] = 'おはよう';

objA.greeting

//'おはよう'

```

をECMAScript2015を意識した省略記述してください

```js

const key = 'greeting';

const objA = {

  [key] : 'おはよう'

};

objA.greeting

```

**問152**

こちらの記述

```js

const objA = {

 add: function(a,b){

  return a + b;

 }

}

objA.add(2,5);

//7

```

を省略記述してください

```js

const objA = {

 add(a,b){

  return a + b;

 }

}

objA.add(2,5);

//7

```

**問153**

上記の問題のadd関数をobjA内でアロー関数で記述してください

```js

const objA = {

 add: (a,b)=>{

  return a + b;

 }

}

objA.add(2,5);

//7

```

**問154**

このような

```js

const array = ['shibuya','shinjuku','ebisu','shinagawa','tokyo','ueno','ikebukuro'];

```

配列がある。

変数aに'shinjuku'、bに'ikebukuro'が代入されるように簡潔に記述してください

```js

const array = ['shibuya','shinjuku','ebisu','shinagawa','tokyo','ueno','ikebukuro'];

const [,a,,,,, b] = array;

a

//"shinjuku"

b

//"ikebukuro"

```

**問155**

このような

```js

const obj = {

 name : 'kenji',

 twon: 'shibuya'

}

```

objを変数name、twonに代入して出力してください

```js

const obj = {

 name : 'kenji',

 twon: 'shibuya'

}

const {name, twon} = obj;

name

//"kenji"

twon

//"shibuya"

```

**問156**

const name = 'KenjiMorita';

のKとMだけをそれぞれ変数a,ｂに入れてください

```js

const name = 'KenjiMorita';

const [a,,,,,b] = name;

```

**問157**

変数

```js

const a = 1;

const b = 'goodby';

```

のaを'goodby'、bを

1として出力されるようにしてください(変数のSwap)

```js

const a = 1

const b = 'goodby'

b = [a, a = b][0];

a

//'goodby'

b

//1

```

**問158**

上記(問157)と同じ事をECMAScript2015ライクに簡潔に記述してください

```js

const a = 1;

const b = 'goodby';

[a,b] = [b, a]

["goodby", 1]

//http://qiita.com/gaogao_9/items/18b20ad9b76c9c81b5fa#_reference-4b73dec38a62a3fb0ab7

```

**問159**

こちら```const input = [0,[1,2,3],4,5,[6]];```を```[0,1,2,3,4,5,6]```となるようにしてください

```js

 //展開演算子(スプレッド演算子)

const input = [0,[1,2,3],4,5,[6]];

const inputB = [input[0],...input[1],input[2],input[3],...input[4]];

inputB

//[0,1,2,3,4,5,6]

```

**問160**

下記のような

```html



  outer

  
inner



```


に対してload時に#innerのtextを任意の文字列に変えるようにしください。なおwindow.onloadは使わないようにする。

```js

document.addEventListener('DOMContentload',function(){

 const target = document.getElementById('inner');

 target.textContent('fafa');

},false)

//’load'はHTMLの全てのloadが終わったタイミングで発火。

//'DOMContentload'はDOM解析が終わってDOMに触れるようになったら発火。

//この場合'DOMContentload'を使用。画像が読み込まれる前に実行されて高速。だが画像幅に対してのレイアウト変更をするようであれば'load'

//[参照](http://qiita.com/gaogao_9/items/ec2b867d6941173fd0b1#_reference-1aa15cfa5c1cf1f77a86)

```

**問161**

このような

```js

addeventListener('DOMcontentLoad',function(){something},[true,false])

```

イベントリスナーの第三引数のフラグは何か説明してください

```html

useCapture設定。

例えばclickイベントを親と子、両方に設定している場合、親にtrue設定すると子供(内側)をclickすると親が先に発火(キャプチャフェーズ)、続い///て子供となる。useCaptureによって発生するイベントの順番が変わる。

defalutはfalse

**イベントフェーズ**

[キャプチャフェーズ](ルート要素から発生要素を探しに行く)

[ターゲットフェーズ](発生用をを検出する)

バグリングフェーズ(ルート要素を辿っていく)

see //http://qiita.com/hosomichi/items/49500fea5fdf43f59c58

```

**問162**

このような

```html



    
some1

    


some2

    
some3



```


DOMがある。classAより子供のdiv要素のみ取得してください

```js

const classA = document.getElementsByClassName('classA');

const result = Array.prototype.filter.call(classA,function(classA){

 return classA.nodeName === 'DIV'

});

result instanceof Array

```

**問163**

このような

```html









```


for文でNodeListを使うのを避けるため、

DOMのspanタグの分だけ取得してNodeListをArrayに変えてください。

```js

const tag = document.getElementsByTagName('span');

const array = Array.prototype.slice.call(tag);

console.log(array instanceof Array );

```

**問164**

このようなODMがある

```html



  


    

    1st Link

  

    



    


      2link

    

    


      3link

    

    5th



```


XPathを使ってidがmainのdiv、classにcontentを含むp要素の3番目hrefが

「3link」を出力してください

```js

const result = document.evaluate(

  '//div[@id="main"]/p[contains(@class,"content")][3]/a[starts-with(@href,"http://example.com")]',

  document,

  null,

  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,

  null

);

console.log(result.snapshotLength); //1

const elem = result.snapshotItem(0);

console.log(elem.innerHTML);

//evalute([path:string],[Node],[null],[XPathResultObject:Type],[null])

//第3(名前空間URLを返す関数)、5引数(既存のXPathResultオブジェクト)はnullで問題ない。

//evaluteメソッド第４引数の値と返値の関係

ANY_TYPE :0

NUMBER_TYPE :1

STRING_TYPE :2

BOOLEAN_TYPE :3

UNORDERED_NODE_ITERATOR_TYPE :4

ORDERED_NODE_ITEERATOR_TYPE :5

UNORDERED_NODE_SNAPTHOT_TYPE :6

ORDERED_NODE_SNAPSHOT_TYPE :7

ANY_UNORDERED_NODE_TYPE :8

FIRST_ORDERED_NODE_TYPe :9

参照//パーフェクトJavaScript

```

**問165**

こちら

```html



  click here!



```


clickをしたらclass名がfoo-beforeに変わるtoggleStyleを実装をしてください

```js

const target = document.getElementById('target');

target.onclick = function toggleStyle() {

  this.classList.toggle('foo-after');

  this.classList.toggle('foo-before');

}

```

**問166**

 " fafa fafa eee "のような最初と最後に空白があるような文字列に対して、それらを含めない配列を返してください

```js

 " fafa fafa eee ".trim().split(" ");

 //["fafa", "fafa", "eee"]

```

**問167**

"abcdefg"のような文字列をインデックスと値が取れるオブジェクトに変更してください

期待する結果。

{0:a,1:b,2:c,3:d,4:e,5:f,6:g}

```js

const str = "abcdefg";

const obj = Object.prototype.valueOf.call(str)

obj

//{0:a,1:b,2:c,3:d,4:e,5:f,6:g}

```

**問168**

"abcdefg"のような文1文字づつの要素となる配列に変更してください

期待する結果

["a", "b", "c", "d", "e", "f", "g"]

```js

const str2 = "abcdefg";

const arry = Array.prototype.slice.call(str2);

arry

//["a", "b", "c", "d", "e", "f", "g"]

```

**問169**

"apple banana orenge"のような文字列を空白で区切り、それそれの「単語」をObjectのkey値として取得できるようにしてください。

期待する結果。

{0: "apple", 1: "banana", 2: "orenge"}

```js

const string = "apple banana orenge";

const arrayed = string.split(" ");

const obj ={};

arrayed.forEach(function(elem,i){

     obj[i] = elem;

});

obj

//{0: "apple", 1: "banana", 2: "orenge"}

//Map

const string = "apple banana orenge";

const arrayed = string.split(" ");

const map = new Map();

const obj ={};

arrayed.forEach(function(elem,i){

     map.set(i,elem);

})

map

//{0: "apple", 1: "banana", 2: "orenge"}

//entries

const string = "apple banana orenge";

const arrayed = string.split(" ");

const newarray =[];

for(value of arrayed.entries()){

     newarray.push(value)

}

const map = new Map(newarray)

map

//{0: "apple", 1: "banana", 2: "orenge"}

```

**問170**

add()を実行した際 3 、add(2)としたら 4 add(2,3)を実行したら 5 が返ってくる関数addを定義してください

```js

//デフォルトパラメータ

function add(a = 1, b = 2){

 return a + b;

}

add();// 3

add(2);//4

add(2,3)//5

```

**問171**

こちらのような

```

if(condition){

    dosomething();

}

```

conditionがtrueの時に実行したい関数があった場合、端的に記述してください

```js

condition && dosomething();

```

**問172**

こちらは

```

for (const i=0; i<5; i++) {

    setTimeout(function(){

        console.log(i);

    }, 1000 * (i+1));

}

```

1秒ごとに1からインクリメントされた値が出力されることを期待していますが、実際は5が5回出力されます。

理由を教えて下さい。

```js

各タイムアウトはコピーではなく元のiを参照します。

したがって、forループはiが5になるまで増分し、

その後タイムアウトが実行され、

iの現在の値（5）が使用されます。

for (const i=0; i<5; i++) {

    const temp = i;

    setTimeout(function(){

        console.log(temp);

    }, 1000 * (i+1));

}

ブロックはスコープを作成せず、

変数の初期化はスコープの先頭に吊り下げられるため、

これも機能しません。

実際、前のブロックは次のものと同じです

const temp;

for (const i=0; i<5; i++) {

    temp = i;

    setTimeout(function(){

        console.log(temp);

    }, 1000 * (i+1));

}

iをコピーする方法はいくつかあります。

最も一般的な方法は、

関数を宣言し、iを引数として渡すことによってクロージャを作成することです。

ここでは、これを自己呼び出し関数として実行します。

for (const i=0; i<5; i++) {

    (function(num){

        setTimeout(function(){

            console.log(num);

        }, 1000 * (i+1));

    })(i);

}

JavaScriptでは、

引数は値によって関数に渡されます。

数値、日付、文字列などのプリミティブ型は基本的にコピーされます。

関数内でそれらを変更しても、外部スコープには影響しません。

オブジェクトは特別です。

内部関数がプロパティを変更した場合、

その変更はすべてのスコープに反映されます。

これに対するもう1つのアプローチはletを使うことです。

for (let i=0; i<5; i++) {

    setTimeout(function(){

        console.log(i);

    }, 1000 * (i+1));

}

```

**問173**

右の様な```{name: 'hogehoge',age: 80}```を別の変数「obj2」に代入したい。

Objectを参照渡しすると代入先の値が変わるとオリジンの値も変わります。originに影響のない新しいオブジェクトとしてオリジンと同じ値をもつインスタンスを生成してください。

またorigin.name='oo'としても「obj2.nameが'hogehoge'」で変わらないことを確認してください

```js

//一例

const origin = {name: 'hogehoge',age: 80};

const obj2 = JSON.parse(JSON.stringify(origin));

obj2

//Object {name: "hogehoge", age: 80}

origin.name = "oo"

//"oo"

obj2.name

//"hogehoge"

```

**問174**

こちらを使って、

```js

function getKey(k) {

  return `a key named ${k}`;

}

```

オブジェクトobjのプロパティkeyから上記getKey関数に'enabled'文字列を渡してcallし、objのキーがa keynamed enabled、値がtrueになるようなobjの作りにしてくだささい

期待する結果:```{id: 5, name: "San Francisco", a key named enabled: true}```

```js

// bad

const obj = {

  id: 5,

  name: 'San Francisco',

};

obj[getKey('enabled')] = true;

// good

const obj = {

  id: 5,

  name: 'San Francisco',

  [getKey('enabled')]: true,

};

```

**問175**

以下の様な

```js

const name = 'kenji morita';

const address = 'shibuya';

const obj = {

 name : name,

 morita: morita,

 episodeTheree: 3,

 mayTheForth: 4,

 address: address,

}

```

objの宣言をショートハンドを使ってなおしてください

```js

const obj = {

 name,

 episodeTheree: 3,

 mayTheForth: 4,

 address,

}

obj// {name: "kenji morita", episodeTheree: 3, mayTheForth: 4, address: "shibuya"}

```

**問176**

document上に何個かある```class='foo'```を配列の様なオブジェクトからnodeオブジェクトに

```js

const foo = document.querySelector('.foo');

const nodes = Array.from(foo);

```

**問177**

```

[[0, 1], [2, 3], [4,5]]

```

をフラットにしてください

期待する値:[0, 1, 2, 3, 4, 5]

```js

let flat = {};

[[0, 1], [2, 3], [4,5]].reduce((pre, current, index, arry) => {

 let flatten = pre.concat(current);

 flat[index] = flatten;

 return flatten

})

flat

//[0, 1, 2, 3, 4, 5]

//other

[...[0, 1], ...[2, 3], ...[4,5]]

//[0, 1, 2, 3, 4, 5]

```

**問178**

下記の関数式としての宣言は

```js

// bad

const foo = function () {

};

```

なぜ好ましくないとされているか答えてください

```js

//コールスタックに識別しやすくされている

//アロー関数が使える

// good

function foo() {

}

```

**問179**

こちらの

```js

if (currentUser) {

  function test() {

    console.log('Nope.');

  }

}

```

は何が悪いか答えてください。また修正してください

```js

 //A function declaration is not a statement

 //関数宣言はステートメントではありません

let test;

if (currentUser) {

  test = () => {

    console.log('Yup.');

  };

}

see http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97

```

**問180**

こちらの

```js

function concatenateAll() {

  const args = Array.prototype.slice.call(arguments);

  return args.join('');

}

```

渡ってきたすべての引数を結合して文字列として返す上記を端的に書き換えてください

```js

function concatenateAll(...args) {

  return args.join('');

}

```

**問181**

こちらはアンチパターンです。

```js

function f1(obj) {

  obj.key = 1;

};

```

なぜだかお答えください

```js

//Why? Manipulating objects passed in as parameters can cause unwanted variable side effects in the original caller.

パラメータとして渡されたオブジェクトを操作すると、元の呼び出し側で不要な変数副作用を引き起こす可能性があります。

function f2(obj) {

  const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;

};

```

**問182**

下記のような

```js

const foo = a ? a : b;

const bar = c ? true : false;

const baz = c ? false : true;

```

不必要な3項演算子を避けて同じ意味を簡潔に書いてください

```js

const foo = a || b;

const bar = !!c;

const baz = !c;

```

**問183**

こちらの記述

```js

const foo = {clark: 'kent'};

```

spaceをeslintのobject-curly-spacing や

jscsのrequireSpacesInsideObjectBracketsで良いとされている書き方に変更してください

```js

const foo = { clark: 'kent' };

```

**問184**

第一引数にaddress,第二引数にtyoume、第三引数にbanchをとりそれらの渡ってきた値をそれぞれ要素とする1つの配列として返すだけの関数createAddressに

defaultPrameterとして第二引数に「address + -1」、第三引数に「tyoume + '-10'」として設定してください。

```js

function createAddress(address, tyoume = address +  '-1', banch = tyoume + '-10'){

 return [address, tyoume , banch];

}

createAddress('meguro')

//['meguro', 'meguro-1', 'meguro-1-10']

```

**問185**

f()を実行すると6が返ってくる関数を実装してください。

但しfは引数にx,y,zを持ち、xはデフォルトで1、yは2で、zはObjectDestructuringとしてkeyとvalueにzにを持ちデフォルトでzの値は3とする

```js

function f([x, y] = [1,2], {z: z} = {z: 3}){

 return x + y + z;

}

f()

//6

```

**問186**

こちらを使って

```js

const people = [

{ name: "ken",

  family: {

   mother: "jone Smith"

  },

 age: 24

},

{ name: "jun",

  family: {

   mother: "jone jun"

  },

 age: 27

}];

```

下記のような

。

```js

//Name ken, Mother: jone Smith

//Name jun, Mother: jone jun

```

出力になるように実装してください。

```js

const people = [

{ name: "ken",

  family: {

   mother: "jone Smith"

  },

 age: 24

},

{ name: "jun",

  family: {

   mother: "jone jun"

  },

 age: 27

}];

for (const {name: n, family: {mother : f}} of people){

 console.log("Name " + n + ", Mother: " + f);

}

//Name ken, Mother: jone Smith

//Name jun, Mother: jone jun

```

**問187**

こちら

```js

const metadata = {

 title: 'Scratchpad',

 translations: [

  {

    locale: 'de',

    localization_tags: [],

    last_edit: '2016-07-18',

    url: 'kenjimorita.jp',

    title: 'JavaScript'

   }

 ],

  url: 'kenjimorita.jp/JavaScript'

};

```

のtitleをenglishTitleとして、translationsの中のtitleをlocalTitleとしてそれぞれ変数に代入してconsole.log出力してください

```js

const metadata = {

 title: 'Scratchpad',

 translations: [

  {

    locale: 'de',

    localization_tags: [],

    last_edit: '2016-07-18',

    url: 'kenjimorita.jp',

    title: 'JavaScript'

   }

 ],

  url: 'kenjimorita.jp/JavaScript'

};

const {title: englishTitle, translations: [{title: localeTitle}]} = metadata;

console.log(englishTitle, localeTitle);

//'Scratchpad'

//'JavaScript'

```

**問188**

こちらの渡ってきたoptionの値をデフォルト設定している書き方

```js

function drawES5Chart(options) {

  options = options === undefined ? {} : options;

  const size = options.size === undefined ? 'big' : options.size;

  const cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;

  const radius = options.radius === undefined ? 25 : options.radius;

  console.log(size, cords, radius);

}

drawES5Chart({

  cords: { x: 18, y: 30 },

  radius: 30

});

```

をECMAScript2015の書き方に修正してください

```js

function drawES6Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {

  console.log(size, cords, radius);

}

drawES6Chart({

  cords: { x: 18, y: 30 },

  radius: 30

});

// In Firefox, default values for destructuring assignments are not yet implemented (as described below).

// The workaround is to write the parameters in the following way:

// ({size: size = 'big', cords: cords = { x: 0, y: 0 }, radius: radius = 25} = {})

```

**問189**

querySelectorAll('.child')やdocument.getElementsByTagName('div')で取得したNodeListからArrayにする場合の方法を4つ答えてください。

```js

//common

const nodeList = document.querySelectorAll('.child');

//1

Array.from(nodeList);

//2

Array.prototype.slice.call(nodeList);

//3

[...nodeList];

//4

Object.keys(nodeList).forEach(function(key){

  console.log(nodeList[key])//出力

})

```

**問190**

このような```function add (){console.log(this.x) };```関数ある。新たに変数名objのプロパティとしてx、値5で定義した後、addが参照するthisがobjにbindするように呼び出してください。

```js

function add (){console.log(this.x) };

const obj = {x: 5};

add.apply(obj)

//5

```

**問191**

このような```function add (y, z){console.log(this.x, y + z ) };```関数がある。この関数に{x:3}にbindさせて、yは5,zは6となるように実行してください。

```js

//apply

function add (y, z){console.log(this.x, y + z ) };

add.apply({x: 3}, [5, 6])

//call

function add (y, z){console.log(this.x, y + z ) };

add.call({x: 3}, 5, 6)

```

**問192**

下のような記述がある。

```js

const int = 8;

const module = {

 int: 4,

 fn : function(){return this.int;}

}

```

module.fnを別の変数にbindして呼び出し、4を出力してください。

```js

const int = 8;

const module = {

 int: 4,

 fn : function(){return this.int;}

}

module.fn()

//4

const fnn = module.fn

fnn()

//8

//bindして呼び出し

const fnn = module.fn.bind(module)

fnn()

//生成する関数にもともとのthis参照しているオブジェクトを束縛させる必要がある

```

**問193**

したのような記述がある

```js

function list (){

 return Array.prototype.slice.call(arguments);

}

list(2,3,4);

```

このままだと返り値が[2,3,4]になるが、インデックス0番目はかならず数値1がsetされ、その後は呼び出し元の値が続く配列を返す関数にしてください。

```

function list (){

 return Array.prototype.slice.call(arguments);

}

const bindedList = list.bind(null, 1);

bindedList(3,4,5)

//[1, 3, 4, 5]

```

**問194**

```
```がある。

document.createFragmentをつかって```const array = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"];```

がliのtextContentとなるようなDOMを作成してください。


```js

const list = document.getElementById('list');

const fragment = document.createDocumentFragment();

const array = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"];

const newnode = array.forEach(function(elem){

    const li = document.createElement("li");

    li.textContent = elem;

    fragment.appendChild(li);

})

list.appendChild(fragment);

//全てのブラウザで利用可能

//返り値はDocumentFragmentへの参照。メモリ上に存在

//DOMツリーに追加するのではないのでリフローが行われない

```

**問195**

文字列の中で`\n`があったら全てを`
`に置き換える正規表現を表して`replace`してください

```js

str = str.replace(/(?:\r\n|\r|\n)/g, '
');

see: [https://stackoverflow.com/questions/784539/how-do-i-replace-all-line-breaks-in-a-string-with-br-tags](https://stackoverflow.com/questions/784539/how-do-i-replace-all-line-breaks-in-a-string-with-br-tags)

```

**問196**

こちらを{g:3, h:4}それぞれg,hにわりあててください

```js

const {g,h} = {g:3, h:4};

console.log(g,h)

//3, 4

```

**問197**

ローカルストレージとセッションストレージの違いを教えてください.

```js

データの保存のされ方が違う

ローカルストレージ

同じオリジン間で共有されるストレージ。

ブラウザに保存される

localstrageは他のタブ間でもデータが共有される

あるタブで保存されたデータは即座に違うタブで参照できる

ページを更新して残っている

セッションストレージ

ブラウジングコンテキスト(タブ)に保存される

異なるタブなら異なるsessionストレージ

同一タブ内なら保存は維持される

ストレージ内のデータは文字列

ストレージにオブジェクトは渡せない(JSONを使ってください)

```

**問198**

ローカルストレージのkeyとしてfooを値を"fafa"と設定、取得、削除、全てをクリアーにしてください

```js

localStrage.foo = 'fafa';

localStrage.setItem('foo','fafa');

localStrage.getItem('foo');

localStorage.removeItem('foo')

localStorage.clear();

const key = localStorage.key(0)

console.log(key + 'のストレージは' + localStorage[key]);

```

**問199**

```

```

**問200**

```

```

問201〜問250

**問201**

ローカルストレージの値を存在するだけ列挙してください

```js

for (const i = 0; i < localStorage.length; i++){

  console.log(localStorage.key(i))

}

```

**問202**

ローカルストレージに次のようなオブジェクト

```js

const dataObj = {

 'id': 0010,

 'isFavorite': true

}

```

を保存して、取り出してください。

```js

//set

const dataObj = {

    'id' : 0010,

    'isFavorite' : true

}

if (!window.localStorage) {return false};

//safariのプライベートモードでWebStorageが使えない対応

try {

    localStorage.setItem('dataObj', JSON.stringify(dataObj));

} catch(e){

    console.log(e)

}

//get

const getData = JSON.parse(localStorage.getItem('dataObj'));

```

**問203**

こちらのsetTimeoutは実行されない。

```js

function CreateId(id){

 this.id = id;

}

CreateId.prototype.get = function(){

 console.log(this.id);

}

const create = new CreateId(10);

create.get()//10

setTimeout(create.get, 1000);

```

修正してください

```js

//setTimeoutはthisがwindow設定なのでうまくいかない

//オブジェクトのメソッドはオブジェクトに束縛されているものではなく、その時々の実行コンテキスト(呼び出し部分)において実行される

//Fix

//1 bind

setTimeout(create.get.bind(create), 1000);

//2 Arrow Function

setTimeout(()=> {create.get}, 1000);

```

**問204**

こちらの

```js

function Person() {

    const self = this;

    self.age = 0;

    setInterval(function() {

        // The callback refers to the `self` variable of which

        // the value is the expected object.

        self.age++;

    }, 1000);

}

const p = new Person();

p

//{age: 1} //1秒ごとに1足される

```

setInterval内のコールバックをアロー関数で記述してください

```js

function Person() {

    this.age = 0;

    setInterval(() => {

        this.age++; // `this` properly refers to the person object

    }, 1000);

}

const p = new Person();

```

**問205**

こちら

```js

function foo(a, b, c, d){

 console.log([a, b, c, d])

 //or console.log(arguments);

}

foo(1,2,3,4,5)

//[1, 2, 3, 4]

```

のような記述ではなく、RestOperatorを使って渡した実引数を要素にする1つの配列で出力してください。

```js

function foo(...args) {

    console.log(args);

}

foo(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

```

**問206**

こちらはSomeClassコンストラクタにインスタンスメソッドをもたせています。

```js

SomeClass.prototype.someMethod = function (arg1, arg2) {

    ···

};

SomeClass.prototype.anotherMethod = function () {

    ···

};

```

こちらとは違う方法(Object.assignを使った方法)でインスタンスメソッドを定義してください

```js

Object.assign(SomeClass.prototype, {

    someMethod(arg1, arg2) {

        ···

    },

    anotherMethod() {

        ···

    }

});

//Object.assing(Someclass.prorotype, {a: fun, b: fun})//コンストラクタをkeyにもつprototypeオブジェクトを返す

//Object.assing({}, Someclass.prorotype, {a: fun, b: fun})//新たなObjectとして返す

```

**問207**

こちらは値を割り当てられません。

```js

const proto = Object.defineProperty({}, 'prop', {

    writable: false,

    configurable: true,

    value: 123,

});

const obj = Object.create(proto);

obj.prop = 456;

// TypeError: Cannot assign to read-only property

obj.prop

//123

```

valueを書き換えてください

```js

const proto = Object.defineProperty({}, 'prop', {

    writable: false,

    configurable: true,

    value: 123,

});

const obj = Object.create(proto);

Object.defineProperty(obj, 'prop', {value: 456});

console.log(obj.prop); // 456

```

**問208**

下のようなlocation.searchの返り値を想定した文字列がある。

'?id=12345&category=script&isname=true’

こちらのkeyとvalueをオブジェクトにそれぞれ割り当ててください。

期待する結果

 {id: "12345", category: "script", isname: "true"}

```js

const locationsearch = '?id=12345&category=script&isname=true';

const result = {};

locationsearch.substring(1).split("&").forEach(function(ele, i){

  const key =  ele.split("=");

   result[key[0]] = decodeURIComponent(key[1]);

})

```

**問209**

このような[1,1,'a','a']配列がある。

重複している要素をぬいた配列にしてください。

期待する結果

//[1,'a']

```js

const deduped = [1,1,'a','a'].filter(function(x, i, arr){

  return arr.indexOf(x) === i;

})

deduped

//[1,'a']

```

**問210**

このような


DOMの中に2016年8月27日00時00分00秒から9月11日00時00分00秒までセール中が表示されるようにしてください。


```js

const today = new Date();

const myD   = today.getTime();

const start