{"id":25230634,"url":"https://github.com/kenmori/javascript","last_synced_at":"2025-10-26T07:32:32.579Z","repository":{"id":22992827,"uuid":"26343295","full_name":"kenmori/JavaScript","owner":"kenmori","description":"自分自身の確認テストのためJavaScript問題集をREADME上で更新しています","archived":false,"fork":false,"pushed_at":"2024-07-21T20:44:40.000Z","size":21415,"stargazers_count":33,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-07-21T22:14:53.514Z","etag":null,"topics":["es6","exercises","javascript"],"latest_commit_sha":null,"homepage":"https://kenjimorita.jp/category/javascript/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kenmori.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-11-07T23:44:42.000Z","updated_at":"2024-07-21T20:43:58.000Z","dependencies_parsed_at":"2024-05-01T15:07:04.250Z","dependency_job_id":"3484e1e6-052e-4472-98e5-ee6c8bff2957","html_url":"https://github.com/kenmori/JavaScript","commit_stats":null,"previous_names":[],"tags_count":49,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenmori%2FJavaScript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenmori%2FJavaScript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenmori%2FJavaScript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenmori%2FJavaScript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kenmori","download_url":"https://codeload.github.com/kenmori/JavaScript/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238289982,"owners_count":19447509,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es6","exercises","javascript"],"created_at":"2025-02-11T12:00:49.388Z","updated_at":"2025-10-26T07:32:27.193Z","avatar_url":"https://github.com/kenmori.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JavaScript練習問題集\n\n![JavaScript](https://kenjimorita.jp/wp-content/uploads/2017/06/image3-1024x755.jpeg)\n\n**更新情報**\n\n```txt\n・constをletに修正、問題を追加(2024/9/27)\n・問題を追加(2024/7/20)\n・問題を追加(2024/4/12)\n・リファクタリング(2023/4/22)\n・Decoratorsに関する問題を追加(2020/6/6)\n```\n\nこちらは[よしもと芸人もりたけんじ](https://profile.yoshimoto.co.jp/talent/detail?id=3871)が自身のテストとして作ったJavaScript練習問題集です。([TypeScript練習問題はこちら](https://gist.github.com/kenmori/8cea4b82dd12ad31f565721c9c456662))\n\n[X](https://twitter.com/terrace_tech)\n\n**前提**\n\n※この問題集は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\u0026evaluate=true\u0026lineWrap=false\u0026presets=es2015%2Ces2015-loose%2Ces2016%2Ces2017%2Clatest%2Creact%2Cstage-2\u0026experimental=false\u0026loose=false\u0026spec=false\u0026code=%5B1%2C2%2C3%5D.map(n%20%3D%3E%20n%20%2B%201)%3B\u0026playground=true)、ECMAScript2015,2016,2017,2018,2019, 2020, 2021, 2022, 2023, 2024, 2025が使える環境で試されることを想定しています\n\n※表記揺れは鋭意解消中。\n\n※答えはあくまで１つの記述です。\n\n※以下に示す問題の答えがあなたの考えた答えより冗長な書き方かもしれません。\n適宜置き換えていただけたらと思います。\n\n・答えが見えてしまっているのは都度操作させないためです。\n\n※・プルリク歓迎です。修正依頼は[こちら](https://twitter.com/terrace_tech)のDMからお願いします。\n*★を押していただけたら今後もやる気出ます。よろしくお願いします。\n\n※[blog/JavaScript](https://kenjimorita.jp/category/javascript/)\n\n※[X](https://twitter.com/bukotsunikki)\n\n※[GitHub](https://github.com/kenmori)\n\n※English [here](https://github.com/kenmori/javascript/blob/master/JavaScriptPractice)\n\n## JavaScript問題集\n\n\u003cdetails\u003e\u003csummary\u003e問1〜問50\u003c/summary\u003e\n\n**問1**\n\n```const a = { a: 'a' }```と```const b = { b: 'b' }```\nをマージした```c```\nを出力してください\ne.g```{ a:'a', b:'b' }```\n\n```js\nconst a = { a: 'a' };\nconst b = { b:'b'};\nconst c = Object.assign({}, a, b);\nc //{a: 'a', b: 'b'}\n\n//Object.assign(target, ...sources)\n//・戻り値はtargetオブジェクト\n//・sroucesオブジェクトの挙可能で自分が所有するプロパティのみtargetにコピーされる\n//・prototypeに定義し直したい場合、Object.getOwnPropertyDescriptorとObject.definePropertyを使う\n//・プロパティが書き込み不可の場合TypeErrorが発生。targetオブジェクトは変更されない\n//・Object.assignはsources値がnull、undefinedの場合例外を投げない\n\n別解\nconst c = {...a, ...b}\n```\n\n**問2**\n\n```js\nconst arry = ['aa','bb','cc','dd','ee','ff','gg'];\n```\n\nのdd,ee,ffを新たな配列として返してください\n\n```js\nconst newArry = arry.slice(-4,-1);\n//or\nconst newArry = arry.slice(3,-1);\n```\n\n**問3**\n\n['a','b’] の要素をconsole出力してください e.g ```'a'```と```'b'```\n\n```js\nconst arry = ['a','b'];\narry.forEach(function(elem,i){\n console.log(elem)\n})\n//'a'\n//'b'\n```\n\n**問4**\n\n```['a', 'b']```の各要素にindex値を足した文字列を出力してください```e.g 'a0'```と```'b1'```\n\n```js\nconst arry = ['a','b'];\narry.forEach(function(ele,i){\n console.log(ele + i)\n})\n//'a0'\n//'b1'\n```\n\n**問5**\n\n```任意の変数名の[1,2]```を定義して配列かどうかを評価してください\ne.g true\n\n```js\nArray.isArray(arry) //true\n//arry instanceof Array //true\n//instanceof比較は継承しているオブジェクトのインスタンス比較なので\n// aryy instanceof Objectでもtrueが返ってくる\n```\n\n**問6**\nこちら\n\n```js\n//1\nif (typeof x === 'undefined') {\n ???\n}\n\n//2\nif(x === undefined){\n ???\n}\n```\n\n変数xが定義されていない場合上の1、2は実行されますか?\n\n```\n//1は実行される\n//2は実行されない(ReferenceError)\n\n//typeofは変数が存在しない場合エラーは投げない。\n//ただこのような値の存在チェックは避けるべき\n//グローバル上の値のチェックはfor in\n```\n\n**問7**\n\nこちら\n\n```js\n//1\nlet x;\nif (x === void 0) {\n}\n\n//2\n// 直前まで y は宣言されていない\nif (y === void 0) {\n}\n```\n\n1,2はそれぞれ実行されますか\n\n```\n//1は宣言はされているが値が割り当てられていない場合です。\n//実行される\n\n\n//2は宣言されていない場合です。\n//実行されない\n\n//void 0 は確実にundefindeを返すことが保証されています\n//undefinedはただのglobal変数なので\nundefined = \"foo\";\nundefined;\n//'foo'\nで代入でき、保証はされていない\n\ne.g:\nundefined = 1;\nconsole.log(!!undefined); //true\nconsole.log(!!void(0)); //false\n\n```\n\n**問8**\n\n下記\n\n```js\nconst obj = {\n key: 'aa',\n key2: 'bb'\n}\n```\n\nの中のkeyとvalueを自身のプロパティのみ全て出力しなさい\n\n```js\nconst obj = {\n key: 'aa',\n key2: 'bb'\n}\nfor (key in obj){\n if(obj.hasOwnProperty(key)){\n   console.log(key, obj[key])\n  }\n}\n//key aa\n//key2 bb\n\n//or use Object.values, Object.keys\n```\n\n**問9**\n\nこちらの ['a', 'b', 'c'] 配列の中の全ての要素を結合し、1つの文字列として出力してください。\n\n```js\nconst array = ['a', 'b', 'c'];\narray.join(\"\");\n//'abc'\n\n//other\nconst array = ['a', 'b', 'c'];\nlet str = '';\nconst count = array.length;\nfor(let i= 0; i \u003c count; i++){\n  str += array[i];\n}\nstr\n//'abc'\n```\n\n**問10**\n\nこちら\n\n```js\nx = 43\nlet y = 3\n```\n\nの2つの変数。deleteできるのはどちらですか？\n\n```js\ndeleteは暗黙に定義された場合は変数は削除できるが、\nconst(let) や function文中の変数はnon-configurableであり削除できない\n\n//globaleオブジェクト\nx = 43;\ndelete x\n//true //暗黙に定義されたglobale変数なので\n\n//var宣言\ndelete y\nfalse //削除できない\n\n//関数宣言文の中でのdelete\nfunction f(){\n const z = 44;\n delete z;\n console.log(z)\n}\nf()\n//44 //削除されていない\n\n【配列の要素の削除】\n1\nlet color = ['red', 'blue', 'green'];\n//要素として存在する状態にするが値は未定義\ncolor[1]= undefined;\ncolor\n//[\"red\", undefined, \"green\"]\nif(1 in color){console.log('実行されてます')}\n//実行されてます\n\n2\nlet color = ['red', 'blue', 'green'];\ndelete color[1]\n//true\ncolor.length//削除しても配列の長さには影響しない\n\n//3\n//配列の一部ではなくなります\nif(1 in color){console.log('実行されてます')}\n//出力されない(1との違いに注意してください)\n\n//\nfunction Foo(){}\nFoo.prototype.bar = 42;\nlet foo = new Foo();\ndelete foo.bar;\n//true\n\n//trueを返すがプロトタイプから継承してオブジェクトに存在するプロパティは削除できない\nfoo.bar\n//42\n\n//プロトタイプ上でプロパティを削除\ndelete foo.prototype.bar;\nfoo.bar \n//undefined\n\n```\n\n**問11**\n\n```js\nlet arry =[\n  {id:1,name:'morita'},\n  {id:2,name:'kenji'},\n  {id:4,name:'uro'},\n  {id:3,name:'ken'}\n  ];\n```\n\nをid番号が若い順にソートしたオブジェクトを含む配列を出力してください\n\n```js\nlet arry =[\n  {id:1,name:'morita'},\n  {id:2,name:'kenji'},\n  {id:4,name:'uro'},\n  {id:3,name:'ken'}\n];\narry.sort(function(a,b){\n return a.id \u003e b.id\n})\n\n//先に位置させたい時はaが'正'をになるように返します\n\n//other\narry.sort(function(a,b){\n if(a.id \u003e b.id) return 1;\n if(a.id \u003c b.id) return -1;\n});\n\n/*\n[\n  {id:1, name:'morita'},\n  {id:2, name:'kenji'},\n  {id:3, name:'ken'},\n  {id:4, name:'uro'}\n]\n*/\n```\n\n**問12**\n\n```a, b```の変数はデフォルトとしてaは5、bは7を持ち、aに1を代入してconsole出力してください。\n\n```js\nconst [a=5, b=7] = [1];\nconsole.log(a, b);\n//1 7\n\n//other\nconst {a = 5, b = 7} = {a: 1}\n```\n\n**問13**\n\nnext()を実行しただけ返り値が1増える関数を定義してください\n\n```js\nconst setUp = function(){\n  let count = 0;\n  return function(){\nreturn (count += 1);\n  }\n};\nconst next = setUp();\nnext();//1\nnext();//2\nnext();//3\n```\n\n**問14**\n\nfun(1,2,3)を実行したら引数が全て配列で返る関数funを定義しなさい\n[参照](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)\n\n```js\nfunction fun(){\n return Array.from(arguments)\n}\nfun(1,2,3)//[1.2,3]\n\n//other\nfunction fun (...arg){\n  return arg;\n}\nfun(1,2,3)\n//[1,2,3]\n```\n\n**問15**\n\n配列\n\n```\nconst array = ['a1','a2','a3','a4','a5']\n```\n\nの0〜2番目の要素をそれぞれ\n\n```\nred, green, yellow\n```\n\nに置き換えて配列にしてください。また実行した際の返り値を教えてください\n\n```js\nconst array = ['a1','a2','a3','a4','a5']\n//インデックス0から2つの要素を削除\narray.splice(0,2, 'red', 'green','yellow');\n//[\"a1\", \"a2\"]\n\n//返り値:['a1', 'a2']\narray\n//['green', 'red', 'yellow', 'a3', 'a4', 'a5']\n```\n\n**問16**\n\n```\nconst array = ['a1','a2','a3','a4','a5']\n```\n\nのインデックス2〜4の要素を取り出し、\n配列として出力しなさい。\n実行された後のarrayの要素を教えてください\n\n```js\nconst array = ['a1','a2','a3','a4','a5']\nconst newArray = array.slice(1,4);\nnewArray\n//['a2', 'a3', 'a4']\narray\n//['a1','a2','a3','a4','a5']\n```\n\n**問17**\n\n```js\nconst array = ['a1','a2','a3','a4','a5']\n```\n\nの全ての要素を\"/\"で結合した文字列を出力し、さらにその文字列を'/'区切りで配列に直してください\n\n```js\nconst array = ['a1','a2','a3','a4','a5']\narray.join('/').split('/');\n```\n\n**問18**\n\n配列```['おはよう','こんにちは','おやすみなさい']```の要素がランダムに出力される関数を書いてください。(配列に要素が追加される事を仮定してたものにしてください)\n\n```js\nconst array = ['おはよう','こんにちは','おやすみなさい'];\nconst greeting = array[Math.floor(Math.random() * array.length)]\ngreeting\n//おはよう or こんにちは or おやすみなさい\n```\n\n**問19**\n\nObject.createで空のオブジェクトを作成し、値が1のプロパティpを出力してください\n\n```js\nconst obj = Object.create({}, {p: {value: 1}});\nobj.p //1\n```\n\n**問20**\n\nコンストラクタWhoの初期化時に'morita'(String)を渡しインスタンスプロパティnameに代入、\nインスタンスメソッドgetNameの返り値がWho.prototype.name値になるいわゆる「classのようなもの」を作成してください\n※インスタンスメソッドはprototypeに代入してください\n\n```js\nfunction Who(name){\n this.name = name;\n};\nWho.prototype.getName = function(){\n console.log('Myname is ' + this.name);\n};\nlet o = new Who('morita');\no.getName()\n```\n\n**問21**\n\n浅いコピー(shallow copy)と深いコピー(deep copy)の違いを説明してください\n\n```js\n//**shallow copy**\n//プロパティ値や要素値だけのコピーでその先の参照まではコピーしない\n//例\nlet arr = [{x : 2}];//オブジェクト参照をもつ配列\nlet arr2 = [].concat(arr);//要素をコピー\narr2[0].x = 123;//変数arr2から見える要素の参照先オブジェクトを変更。\narr[0].x//変数arrから変更が見える(shallowだから)\n//123\n\n//**deep copy**\n//コピー元とコピー先が別のオブジェクトを参照していること。プロパティが別のオブジェクトを参照していれば参照崎のオブジェクトも含めてコピーします。deepcopyが必要な場面はない。自分で実装する必要がある。パーフェクトP199\n\n```\n\n**問21**\n\n下記\n\n```js\nlet array = ['e','a','k','B','c'];\narray.sort();\n```\n\nを実行した結果を答えてください\n\n```js\n['B', 'a', 'c', 'e', 'k']\n\n//note 順番は文字エンコーディングによって決まる\n//要素に数値があった場合文字列に置き換えられる\n```\n\n**問22**\n\n上記の配列を大文字小文字区別なく順番通りにしてください。期待する値```['a','B','c', 'e','k']```\n\n```js\nlet array = ['e','a','k','B','c'];\narray.sort(function(a,b){\n return a.toUpperCase() \u003e b.toUpperCase() ? 1 : -1 ;\n});\n\n//['a', 'B', 'c', 'e', 'k']\n```\n\n**問23**\n\nこのような```[20,100,3,35,0]```\n\n比較する配列の要素が数値の場合、「降順」にsortしてください\n期待する結果```[100, 35, 20, 3, 0]```\n\n```js\nlet numArray = [20,100,3,35,0];\nnumArray.sort(function(a,b){\n return b - a;\n});\n[100, 35, 20, 3, 0]\n\n//昇順の場合\nreturn a - b\n```\n\n**問24**\n\n文字列\n'10'をNumber型にし、型判定し、数値かどうか評価後、文字列に変換してください\n\n```js\nlet a = +'10';\ntypeof a\n//number\nisNaN(a);\n//false\na.toString();\n//'10'\n\n//other\nlet a = parseInt('10', 10);\n```\n\n**問25**\n\nカーリー化されたadd(1)(2)もしくはadd(1,2)\nを実行した際両方とも返り値3になる関数を定義しなさい。p85\n\n```js\nfunction add(x, y){\n if(typeof y == 'undefined'){//部分適用\n  return function(y){\nreturn x + y\n  }\n }\n //完全適用\n return x + y\n}\nadd(1)(2) //3\nadd(1,2) //3\n```\n\n**問26**\n\nクロージャーを使ったファクトリー関数。\n\n```js\nconst fafa = Factory('morita');\nfafa.introduce()\n//'morita'\n```\n\n上記のような実行をしたら渡したname(ここではmorita)が表示されるメソッドintroduceを持つファクトリー関数を定義しなさい。\n\n```js\nfunction Factory(name){\n function getName(){\n  return name;\n };\n return {\n  introduce : function(){\n    console.log(getName());\n   }\n }\n};\nconst fafa = Factory('morita');\nfafa.introduce()\n//morita\n```\n\n**問27**\n関数```sayHi```に自分の名前を引数で渡した際に```hello!yourname```、何も渡さない場合```hello!```\nと返す関数を作成し、それをapplyで実行してください。また\napplyの第一引数にnullを渡す場合とオブジェクトを渡す場合のそれぞれのthisは何を指しますか答えてください\np83\n\n```js\nlet sayHi = function(name){\n return 'hello!' + (name ? name : '');\n};\nsayHi('kenji');\nsayHi();\nsayHi.apply(null,['kenji']);//関数呼び出し\nlet greeting = {\n  sayHi: function(name){\n    return 'hello!' + (name ? name : '');\n  }\n};\n//メソッド呼び出し\ngreeting.sayHi.apply(greeting,['kenji']);//渡す\ngreeting.sayHi.apply(greeting);//渡さない\n\n\n//関数呼び出しの場合thisはwindowを指し、nullを渡す、\n//メソッド呼び出しの場合thisはオブジェクトを指しオブジェクトの参照を渡す\n```\n\n**問28**\n\n```js\nlet obj = {x : 2, y: 3};\n```\n\nこのobjをプロパティ追加不可、削除変更は可能にし、プロパティ追加不可か否かの判定メソッドでtrueが返る事を確認した後、objのkeyを列挙してください。\n\n```js\nlet obj = {x : 2, y: 3};\nObject.preventExtensions(obj);\nObjcet.isExtensible(obj);//true\nObject.key(obj);\n//['x', 'y']\n```\n\n**問29**\n\nこちら```let obj = {}``` と等価をObjctメソッドで生成してください\n\n```js\nlet obj = Object.create(Object.prototype);\n\n```\n\n**問30**\n\nこちら\n\n```js\nlet obj = {x : 2, y: 3}\n```\n\nと等価をObjectメソッドで生成してください\n\n```js\nlet obj = Object.create(Object.prototype, {\n   x : {value: 2, writable: true, enumerable: true, configurable: true},\n   y : {value: 3, writable: true, enumerable: true, configurable: true}\n})\n```\n\n**問31**\n\nこちら\n\n```js\nconst obj = { x : 2}\n```\n\nの属性を出力してください\n\n```js\nObject.getOwnPropertyDescriptor(obj, 'x');\n// {\n//  configurable: false,\n//  enumerable: false,\n//  value: 2,\n//  writable: false\n//.fseventsd/}\n```\n\n**問31**\n\nこちら\n```const obj2 = {x : 2};```にObjectメソッドを用いてプロパティ```y```、値```2```、```プロパティ追加可能```を定義して、Objectメソッドで情報(値と属性)を返してくださいP149\n\n```js\nlet obj2 = {x : 2};\nObject.defineProperty(obj2, 'y', {value: 3, enumerable: true});\n//[object Object] {\n//  x: 2,\n//  y: 3\n//}\n\nObject.getOwnPropertyDescriptor(obj2, 'y')\n// {\n//  configurable: false,\n//  enumerable: true,\n//  value: 3,\n//  writable: false\n//}\n```\n\n**問32**\n\n実引数の数を出力、第一引数を出力する関数fを実行してください\n\n```js\nfunction f(){\n console.log(arguments.length)\n console.log(arguments[0])\n}\nf(2)\n//1\n//2\n```\n\n**問33**\n\n```js\nlet arr = ['2','23','0','16'];\n```\n\nを小さい順にソートしてください。その後ソートをできないようにread-onlyにしてください\n\n```js\nlet arr = ['2','23','0','16'];\narr.sort(function(a,b){ return a - b ;});\n//['0', '2', '16', '23']\nObject.freeze(arr);\n//['0', '2', '16', '23']\narr.sort();\n//.fseventsd/'Cannot assign to read only property '1' of [object Array]'\n```\n\n**問34**\n\n```let arr = [3,4,5];```をconcat以外で新たな配列として```arr2```にコピーしてください。その後```arr2[0]= 123```を代入するとarrは何を出力するか答えなさい\n\n```js\nlet arr = [3,4,5];\nlet arr2 = arr.slice(0, arr.length);\narr2\n//[3, 4, 5]\narr2[0] = 123;\narr\n//[3, 4, 5]//変数arrから変更は見えない(要素をコピーしているから)\narr2\n//[123, 4, 5]\n\n\n//別解\n\nlet arr2 = arr.map(ele =\u003e ele);\narr2\n//[3, 4, 5]\n```\n\n**問35**\n\nこちらは2つのパラメーターを足して返すgetSum関数です。\n\n```js\nconst getSum = (a, b) =\u003e a + b\n```\n\nこのパラメーターに何もわたってこなかった場合Errorをスローすようにしてください\n期待する結果\ngetSum(10) //throws b is not defined\ngetSum(undefined, 10) //throws a is not defined\n\n```js\nconst _err = function(message) {\n    throw new Error(message);\n}\nconst getSum = (a = _err('a is not defined'), b = _err('b is not defined'))=\u003e a + b\ngetSum(10) //throws b is not defined\ngetSum(undefined, 10) //throws a is not defined\n\ngetSum(10, 20);\n//30\n```\n\n**問36**\nstrict modeの代表的な制約を挙げて説明してください。\n\n```\n- 暗黙のグローバル変数の禁止\n(標準モードではvarを伴わず変数に値を割り当てると現在のスコープに関係なくグローバルオブジェクトにその名前のプロパティを追加してしまう。strictモードでは明示的にエラーになる)\n- 関数内でthis参照がグローバルオブジェクトを参照しない\n\n- NaN、Infinity、undefinedのグローバル変数を読み込み専用\n\n- 重複のプロパティ名とパラメータ名を禁止\n\nリテラルでのオブジェクト生成時同じ名前を持つプロパティを複数定義する場合や、関数に同じ名前を持つパラメータを複数与える場合標準モードでは後に定義されたものが優先されますがstrictモードではこのようなコードを実行する際にエラーが発生します。\n'use strict';\n\n//オブジェクト生成時にエラー//標準モードで実行する場合は後に定義されたものが反映される\n\nconst object = {\n  prop1 : 100,\n  prop1 : 200\n}\n\n//関数定義字にエラー発生\n\nfunction func(val, val){\n  console.log(val);\n}\nfunc(1, 2);\n//2\n\n\nパラメータとargumentsがそれぞれ独立\n。\n標準モードでは関数にパラメータを設定している場合、関数本体におけるパラメータの名前を持つ変数はパラメータの一にあるargumentsオブジェクトの要素のエイリアスとして定義されていました\n。つまり最初のパラメータとargument[0]は、名前は異なるものの、その実体は同じものでした。\nstrictモードではこれが変更されパラメータとargumentsは独立した存在として扱われるようになり、それぞれ個別の引数が割り当てられます。\n(function (param){\n  'use strict';\n  //引数がプリミティブ型の場合はStrictモードと標準モードで動作がことなる。\n\n  pram = 'param';\n  console.log(param, arguments[0]);\n  //'param'\n  //(標準モードの場合)\n  'param' 'param'\n\n  arguments[0] = 'arg';\n  console.log(param, arguments[0]);\n  //'param' 'arg';\n  //標準モードの場合 'arg' 'arg'\n  })('引数') //関数に文字列を渡して実行\n\n但し、引数がオブジェクトの場合はパラメータとargumentsに同じオブジェクトへの参照が格納されるためプロパティへのアクセスは事実上同じものへのアクセスとなります。\n\narguments オブジェクトへの値の割り当ての禁止\n\n関数実行時に与えられた引数はarguments変数に格納されます。Strictモードではこのargumentsオブジェクトに別の新たなオブジェクトを割り当てることができません。\n'use strict';\n\n//arguments変数を別の値で置き換えることができない\n\n(function(){\n  //SyntaxErrorが発生\n\n  arguments = [100, 200, 300];//別の値でまるまる置き換えている。。\n\n  })();\n\n  //argumentsへの要素の追加や変更は可能\n\n  (function(){\n    //要素の置き換え\n    arguments[0] = 200;\n    要素の追加\n    arguments[1] = 300;\n    console.log(arguments[0], arguments[1]);\n    //200, 300\n    })()\n\n    - arguments.calleeアクセスの禁止\n\n再帰などの目的で関数内でその関数自身にアクセスする必要がある場合にはarguments.calleeではなく、関数名を使って呼び出します。関数式を使用する場合は無名関数にするのではなく、その関数に名前を与えておく必要があります。\n8進数リテラルの禁止\n\n'use strict';\n//8進数リテラルを使用するとsyntaxError\n//標準モードで実行する場合はあoctに数値8が割り当てられる。\nconst oct = 010;\n\n- Functionオブジェクトのcallerプロパティのアクセス禁止\n\nブロック内の関数分の禁止\n\n\n'use strict';\n//ブロック内部の関数宣言はsyntaxError\nif(true) {\n  function func(val){return  val;}\n}\n\n//ブロック内部での関数式の定義は問題なし\n\nif(true){\n  val fun = function(val) {return val};\n}\n\n\ndelateによる変数や関数の削除の禁止\n\n標準モードでは演算対象が削除できない変数や関数であっても暗黙的に失敗していた。strictモードではエラーを発生させる。Configurable属性にfalseが設定されている再設定不可プロパティの削除時もエラーが発生します。\n\n- with文の禁止\n使用するとSyntaxErrorが発生する\n\n- evalが新しいシンボルを作らない\n-\nevalコードが独自のスコープで動作する。標準モードでevalに文字列を渡してコードを実行するとそのコードは呼び出しているスコープ上で動作する。つまりevalの実行中に宣言された変数は呼び出したスコープに定義される。\n\nstrictモードではevalで実行されるコードが自身のスコープを持ちます。このスコープから外側のスコープにある変数にはアクセスできますが外側のスコープに変数を定義することはできません。関数スコープと同じです。\n\n\n//'use strict'は複数のstrictモード記述のあるjsファイルの結合されて本番のファイルを構成している場合先頭のファイルの先頭部に置いた'use strict'文によって結合されたスクリプト全体がstrictモードになりその結果コードが誤作動するという事例があった。\nある関数がstrictモードで動作するかの判定は呼び出し時のスコープではなく、定義されたスコープで行われる。Strictモードのコード内で呼び出しても標準モードで定義された関数は標準モードで実行される。argumentsとevalを使っているか？使っていたらそこがstrictモードかどうかを確認しましょう。※scriptタグはタグ単位でスクリプトの実行環境を生成する。そのため\u003cscript\u003eタグごとにモードの選択をする。Strictモード内で\u003cscript\u003eタグを動的に生成する場合も新しく生成されたタグ内のScriptは指示序文を与えなければ標準モードで動作します。node.jsのrequire()で呼び出すコードは呼び出し元の指示序文に影響されません。strictでも呼び出すコードのコンテクストが標準モードならそのコードは標準モードで動作する\n\n//strictモードの即時実行関数\n\n(function(){\n  'use strict';\n  //loose関数の中身はStrictモードではエラーが発生するコード\n  loose();\n  })()\n  function loose(){\n    //varを忘れて、8進数リテラルを使用\n    a = 010;\n  }\n\n  //loose関数は標準モードで動作するため、aがグローバルオブジェクトのプロパティとして追加されている\n  console.log(a);\n  //8\n\n//thisの値にnullやundefinedが競ってされていた場合標準モードではthisはこれらの代わりにグローバルオブジェクトを参照する。strictモードではこの強制的な変換は行われずthisにはそれぞれの値がそのまま格納される。this値にプリミティブ値が競ってされた場合標準モードではそのthisはプリミティブ値の型に対応するプリミティブラッパー型オブジェクトを参照するがstrictはこの型変換もしない。\n```\n\n**問37**\nfor in文に関する注意点を3つ挙げてください\n\n```\n- プロパティを列挙する順序がオブジェクトリテラルと配列リテラルで違う\n- 列挙できないプロパティがある(Array.lengthなど)\n- プロトタイプ継承したプロパティも列挙する\n```\n\n**問38**\n\nDOM上にあるdivをnodeListに変換して配列に格納してください\n\n```js\nconst nodelist = [...document.querySelectorAll('div')];\n```\n\n**問39**\n配列```const arr = ['f','o','x','k'];```をインデックス順に出力させてください\n\n```js\nconst arr = ['f','o','x','k'];\nfor(let j of arr){\nconsole.log(j)\n}\n\n\n//別解\n\nconst arr = ['f','o','x','k'];\narr.forEach(function(ele){\n console.log(ele);\n }\n)\n```\n\n**問40**\nまたイテレーターを使い順番に出力してください\n\n```js\nconst arr = ['f', 'o', 'x', 'k'];\nconst eArr = arr[Symbol.iterator]();\neArr.next().value //f\neArr.next().value //o\neArr.next().value //x\neArr.next().value //k\n```\n\n**問41**\n\n配列```['a', 'b', 'c', 'd', 'e']```\nのインデックス2番目に'morita'という要素を加えなさい。期待する結果```['a', 'b','morita', 'c', 'd', 'e']```\n\n```js\nletarry = ['a', 'b', 'c', 'd', 'e'];\narry.splice(2, 0 , 'morita');\narry\n//['a', 'b','morita', 'c', 'd', 'e']\n```\n\n**問42**\nこれ```const o = {};```と同じ意味を持つコードをObjectのAPIを使って生成してください\n\n\n```js\nconst o = Object.create(Object.prototype);\n```\n\n**問43**\n{p: 42}となるようなオブジェクトをObjectメンバを使って生成してください\n\n```js\no = Object.create({}, {p: {value : 42}});\n```\n\n**問44**\n\n1234という数字を文字列に変更後、配列の要素としてインデックス順に格納してください\n\n```js\nconst count = 1234;\nconst ee = count.toString();\nlet arr = [];\nfor(let i = 0; i \u003c ee.length; i++){\n arr[i] = ee.charAt(i);\n}\nconsole.log(arr)//['1','2','3','4'];\n```\n\n**問45**\n\nこちらは要素が2だったらループを抜けたいのだが期待どうり動かない\n期待する出力\n//0, 1\n\n```\n[0, 1, 2, 3, 4].forEach(function(val, i) {\n  if (val === 2) {\n    // how do we stop?\n    return true;\n  }\n  console.log(val);\n});\n// 0, 1, 3, 4\n```\n\n期待通りになるようにしてください\n\n```js\n//use some\n[0, 1, 2, 3, 4].some(function(val, i) {\n  if (val === 2) {\n    return true;\n  }\n  console.log(val); // your code\n});\n//0, 1\n\n//use for\nconst a = [0, 1, 2, 3, 4];\nfor (let i = 0; i \u003c a.length; i++) {\n  if (a[i] === 2) {\n    break; // stop the loop\n  }\n  console.log(a[i]);\n}\n//0, 1\n```\n\n**問46**\n\n```js\nconst Speaker = {\n say : function(wordsGetter){\n  const words = wordsGetter();\n   alert(words);\n }\n};\nfunction Person(nickname){\n this.nickname = nickname;\n}\n\nPerson.prototype.sayName = function(){\n    self = this;\n    Speaker.say(function(){\n      return self.nickname;\n    });\n};\nconst person = new Person('moriken');\n\nperson.sayName();\n```\n\n[答え2](http://jsbin.com/wacumupuqo/edit?js,console,output)\n\n```js\nconst Speaker = {\n say : function(wordsGetter){\n  const words = wordsGetter();\n   alert(words);\n }\n};\nfunction Person(nickname){\n this.nickname = nickname;\n}\n\nPerson.prototype.sayName = function(){\n    Speaker.say(function(){\n      return this.nickname;\n    }.bind(this));\n};\nconst person = new Person('moriken');\n\nperson.sayName();\n```\n\n**問47**\n\n下記のような\n\n```js\narray = [\n{name: 'kenji', mail:'fafa@eee.com'},\n{name: 'morita', mail: 'kkk@faf.com'}\n]\n```\n\n配列内にある連想配列のkeyとmail値を配列に格納して出力してください\n\n```js\narray = [\n{name: 'kenji', mail:'fafa@eee.com'},\n{name: 'morita', mail: 'kkk@faf.com'}\n];\nlet array2 = [];\narray.forEach(function(Element, ind, array){\n   for(let key in Element){\n    if(key == 'mail'){\n\n  array2.push(Element[key])\n  }\n }\n})\nconsole.log(array2);\n```\n\n**問48**\n配列```let passed = [12, 5, 8, 130, 44]```の要素全てが10以上かどうかを評価してtrueかfalseを返してください。また10以上のものが一つでもあった場合trueを返してください。\n\n```js\nfunction isBigEnough(ele, ind, arry){\n return (ele \u003e= 10);\n};\nconst passed = [12, 5, 8, 130, 44].every(isBigEnough);\npassed //false\n\n```\n\n**問49**\n二次元配列\n\n```\n[['one', 'info@fa'],['two', 'send@fafa'],['three', 'hoso@fafa']\n];\n```\n\nの'two'の値を取得してください\n\n```js\nconst fafa = [['one', 'info@fa'],['two', 'send@fafa'],['three', 'hoso@fafa']\n];\nconst map = new Map(fafa);\nmap.get('two');\n//'send@fafa'\n\n```\n\n**問50**\n問49の変数fafaにインデックス3番目の要素として['four',fafa@eee]の配列を追加してください\n\n```js\nconst fafa = [['one', 'info@fa'],['two', 'send@fafa'],['three', 'hoso@fafa']\n];\nconst map = new Map(fafa);\nmap.set('four', 'fafa@eee');\n```\n\n\u003c/details\u003e\n\u003cdetails\u003e\u003csummary\u003e問51〜問100\u003c/summary\u003e\n\n**問51**\n\n問50の変数fafa内にある要素を出力してください\n//期待する出力\n//['one','info@fa']\n//['two', 'send@fafa']\n//['three', 'hoso@fafa']\n\n```js\nconst fafa = [['one', 'info@fa'],['two', 'send@fafa'],['three', 'hoso@fafa']];\nconst entries = map.entries();\nfor (const entry of entries){\n console.log(entry);\n}\n\n```\n\n**問52**\n\n```'morita kenji'```のような1つ以上の小英字、半角スペース、1つ以上の小英字にマッチした場合、配列['morita kenji']が返るようにしてください。\n\n```js\n//正解例\n/\\w+\\s\\w+/.exec('morita kenji')\n```\n\n**問53**\n\nこのような\n```'It is an important problem'```と```'The import duty is not cheap'```の文字列内```import```にマッチするとbooleanを返す記述をしてください\n\n```js\nconst str = 'It is an important problem';\nconst str2 = 'The import duty is not cheap';\nlet isImport = /.*\\bimport\\b.*/.test(str);\nisImport//false\nlet isImport = /.*\\bimport\\b.*/.test(str2);\nisImport\n//true\n\n//単語の境界線には\\b\n```\n\n**問54**\n\nひらがな全てにマッチ、半角カタカナ全てにマッチ、カタカナ全てにマッチする正規表現を記述してください\n\n```js\n//ひらがな\n[ぁ-ん]\n//カタカナ\n[ァ-ヶ]\n//半角カタカナ\n/^[\\uFF65-\\uFF9F]+$/\n\n//半角以外にmatch\n//[\n^A-Za-z0-9\n]\n\n```\n\n**問55**\n\n「」の中に「ヤッホー!」の文字列が1回以上続く場合にのみマッチする正規表現を書いてください。(！が英単語を構成する文字以外の場合はどうか、また「ヤッホー！」が2回以上3回以下にマッチにはどう書きますか)\n\n```js\nconst str = '「ヤッホー！ヤッホー！」'; /「(ヤッホー！)+」/.exec(str); //['「ヤッホー！ヤッホー！」', 'ヤッホー！']\n\n//メタ文字\nconst str = '「ヤッホー?ヤッホー@」';\n/「(ヤッホー\\W)+」/.exec(str);\n['「ヤッホー?ヤッホー@」', 'ヤッホー@']\n```\n\n**問56**\n\n```正規表現の/(ありがとう|こんにちは｜さようなら)/```と```/ありがとう|こんにちは｜さようなら/```の違いを教えてください。それぞれexecメソッドを使用した際の返り値を教えてください\n\n```js\n//文中に使えるかどうか\n//\nconst str = '彼はありがとうと言った';\n/彼は(ありがとう|こんにちは｜さようなら)と言った/.exec(str);\n//['彼はありがとうと言った', 'ありがとう']\n\n//\nconst str = '彼はありがとうと言った';\n/彼はありがとう|こんにちは｜さようならと言った/.exec(str);\n//['彼はありがとう']\n```\n\n**問57**\n「When」、「Where」、「Who」、「What」、「Why」、「How」の単語のみにマッチする正規表現を書きなさい\n\n```js\nconst str = 'How';\n/Wh(en|ere|o|at|y|)|How/.exec(str);\n```\n\n**問58**\nこちらが\n\n```js\nx = new Boolean(false)\n```\n\nif文の式として渡すと実行されるか答えなさい\n[参照](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean)\n\n```js\nx = new Boolean(false);\nif (x) {\n //実行される\n}\n//undefinedやnull以外のオブジェクトは実行されます\n\n//真偽値オブジェクトは格納されている値がfalseであってもtrueと評価される。\nconst falseValue = new Boolean(false);\nconsole.log(falseValue)//false,真偽値オブジェクトが出力される\nif(falseValue){//真偽値オブジェクトの内容がfalseでもオブジェクト自体は常にtrue値をみなされる\n  //run\n}\n\n\n//もし真偽値でない値を真偽値に変換したいのであればnew演算子を使用せずBoolean()に値を渡してください。Boolean()はプリミティブ値のtrueもしくはfalseを返します。以下は全てfalse\n\nconsole.log(Boolean(0));\nconsole.log(Boolean(-0));\nconsole.log(Boolean(false));\nconsole.log(Boolean(''));\nconsole.log(Boolean(undefined));\nconsole.log(Boolean(null));\n\n\n//以下は全てtrue\n\nconsole.log(Boolean(1789));\nconsole.log(Boolean('false'));//'false'という文字列は真偽値プリミティブのfalseとは異なる\n\nconsole.log(Boolean(Math);\nconsole.log(Boolean(Array()));\n\n//see: 開眼!Javascirpt(O'REILLY)\n```\n\n**問59**\n\n```js\nmyFalse = new Boolean(false);\ng = new Boolean(myFalse);\n```\n\n上記のコードはtrueかfalseか\n\n答え\n\n```js\nmyFalse = new Boolean(false);\ng = new Boolean(myFalse);\ng//true\n//Boolean オブジェクトの初期値としてオブジェクトを指定した場合、それが値が false の Boolean オブジェクトであっても、新しい Boolean オブジェクトは true の値を持ちます\n```\n\n**問60**\n\n```\nundefined == null\n```\n\nの真偽値は何か\n\n```js\nif (undefined == null){\n  //run\n}\n//実行されます\n```\n\n**問61**\n関数iiを実行すると返り値で関数を受け取り、その関数に引数'home'を渡し実行すると'my home'と返ってくるクロージャーを作ってください\n\n```js\nconst ii = function(){\n  const pp = 'my ';\n  return function(value){\n    console.log(pp + value);\n  }\n}\nconst kk = ii();\nkk('home');\n//my home\n```\n\n**問62**\n今の時間、何時何分何秒を表してください\n\n```js\nconst now = new Date();\nconst nowtime = '今' + now.getHours() + '時' +  now.getMinutes() + '分' + now.getSeconds() + '秒';\nnowtime\n//'今23時49分56秒'\n```\n\n**問63**\nこちら\n\n```js\nfunction getSomething(){\n  return {\n    first: 1,\n    second: 2,\n    third: 3\n  }\n}\n```\n\nの関数で返しているオブジェクトのfirst,second,thirdのvalue値をそれぞれ\nfirst,second,thirdに代入してください\n\n```js\nfunction getSomething(){\n  return {\n    first: 1,\n    second: 2,\n    third: 3\n  }\n}\nconst { first, second, third } = getSomething();\nfirst\n//1\nsecond\n//2\nthird\n//3\n```\n\n**問64**\n\n**問65**\n\n文字列```'fafafakenjifafafa'```に```'kenji'```が含まれているかどうかの真偽値を出力してください\nexpect //true\n\n```js\nconsole.log('fafaeeekenjifa'.includes('kenji'));\n//true\n```\n\n**問66**\n\n文字列'repeat'を2回繰り返した結果を出力してください\n\nexpect //'repeatrepeat'\n\n```js\nconsole.log('repeat'.repeat(2));\n//'repeatrepeat'\n```\n\n**問67**\n\n文字列```foo```をイテレーターを使い```['f','o','o']```となるようにしてください。\n\n```js\nconst chars = [];\nfor (let n of 'foo'){\n chars.push(n);\n}\nconsole.log(chars);//['f','o','o']\n```\n\n**問68**\n\nIteratableからIteratorを取得、要素を出力していきして「要素がもうない意」の```{value: undefined, done: true}```を出力してください\n\n```js\nconst arr = ['ooo', 'eee'];\n\nconst Iterator = arr[Symbol.iterator]();\nconsole.log(Iterator.next()); // { done: false, value: 'ooo'}\nconsole.log(Iterator.next()); // { done: false, value: 'eee' }\nconsole.log(Iterator.next()); //{ done: true, value: undefined }\n```\n\n**問69**\n\n文字列'foo'を```['f','o','o']```と出力してください\n\n```js\n//スプレッドオペレータ\nconst arr = [...'foo'];\nconsole.log(arr);\n```\n\n**問70**\n\n文字列```morita```の1文字目```m```を変数```index0```に代入、2文字目```o```を```index1```に代入、残りを配列```rest```の各要素として出力してください\n\n```js\n//分割代入\nconst [index0, index1, ...rest] = 'morita';\nconsole.log(index0,index1, rest);\n//'m'\n//'o'\n//['r', 'i', 't', 'a']\n```\n\n**問71**\n\n```foo(1, 2, 3, 4, 5, 6)```を実行したら1がfirst、2がsecond、残りが配列の要素になるような ```foo```を定義してください\n\n```js\n//レストパラメータ\nfunction foo(first, second, ...rest){\n console.log('first', first);\n console.log('second', second);\n console.log('rest', rest);\n}\n\nfoo(1,2,3,4,5,6);\n```\n\n**問72**\n\n配列```arr = [1, 2, 3]```にArray#concatを使わずに```arr2 = [4, 5, 6]```を結合させ```[1, 2, 3, 4, 5, 6]```となるようにしてください\n\n```js\n//スプレッドオペレータ\n\nconst arr2 = [4, 5, 6];\nconst arr = [1, 2, 3, ...arr2];\nconsole.log(arr);//[1, 2, 3, 4, 5, 6]\n```\n\n**問73**\n\n下記のようなあるファイル(module.js)で記述した\n\n```js\nconst foo = 'foo';\nfunction bar(){};\nclass Baz{\n  baz(){}\n}\n```\n\nを別のファイル(import.js)にexport、個別のメンバとして読み込む記述を示してください。また「module」という別名で全てのメンバを取得する記述も示してください\n※module.jsとimport.jsは同階層にあるものとする\n\n```js\n//読み込まれる側\nconst foo = 'foo';\nfunction bar(){};\nclass Baz{\n  baz(){}\n}\nexport {foo, bar, Baz};\n\n//読み込む側\n//メンバ毎にインポート\nimport {foo, bar, Baz} from './module';\n//console.log(foo);\n//bar();\n//new Baz();\n\n//インポートする変数名の指定\nimport {foo as poo} from './module';\nconsole.log(poo)\n\n//モジュールまとめてインポート\nimport * as from './module';\n//console.log(module.foo)\n\n```\n\n**問74**\n\n```const obj = {foo: foo, bar: bar}```\nオブジェクトのkeyとvalueが等しい場合の記述\nをせよ\n\n```js\nconst obj = {foo: foo, bar: bar};\nconst obj = {foo, bar};\n```\n\n**問75**\n\n下のように\n\n```\nconst key = 'foo';\nconst obj = {};\nobj[key] = 0;\nobj[key + '_bar'] = 1;\n```\n\n書いていた記述をECMAScript2015の記述で書いてください\n\n```js\nconst key = 'foo';\nconst obj = {\n  [key] : 0,\n  [key + '_bar'] : 1\n}\n\n//common\nconsole.log(obj.foo, obj.foo_bar);\n//0, 1\n\n```\n\n**問76**\n\n下記\n\n```js\nfunction ff(){\n  return 'kenji';\n}\n```\n\nのような関数をconsole.log内からテンプレートリテラルを使って出力してください\n\n期待する出力 my name is kenji\n[参照](https://gist.github.com/kuu/b7eb679a3ad48d980ed3)\n\n```js\nfunction ff(){\n  return 'kenji';\n}\nconsole.log(`my name is ${ff()}`);\n//my name is kenji\n```\n\n**問77**\n\n変数a,bにそれぞれ1,2を代入してください\n\n```\nlet [a, b] = [1, 2];\n```\n\n**問78**\n\n文字列 ```line1```と```line2```を改行てconsole.log出力してください\n\n```js\nconsole.log(`line1\nline2\n`);\n```\n\n**問79**\n\n```js\nconst long = '30px';\nconst weight = '40px';\n\nfunction tag(strings, ...values){\n  //console.log(strings);['身長','で、体重は','です']\n  return `m:${values[0]}、p:${values[1]}`; };\n\nconst str1 = tag`身長${long}で、体重は${weight}です`; console.log(str1);\n```\n\n**問80**\n\nユーザー定義関数funを作り、実行時の引数として、オブジェクトkeyにa,b。値をそれぞれ1,4として加算して返してください\n\n```js\nfunction fun({a, b}){\n  return a + b;\n}\nfun({a: 1, b: 4});//5\n```\n\n**問81**\n\n```const aa = [['morita', 'kenji', 'keiko'],['morita', 'kenji', 'keiko']```\n\n全てのaaにある多次元配列の全ての要素に文字列'san'を付け加えて一つの配列として出力してください\n\n```js\n\n```\n\n**問82**\n\nmapとforEachの違いは何か答えてください\n\n```js\n//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).\n\n//ref\nhttp://stackoverflow.com/questions/3034392/what-use-does-the-javascript-foreach-method-have-that-map-cant-do\n\n//map\n//新しいarrayを返す\n\nconst a = [{ val: 1 }, { val: 2 }, { val: 3 }];\nconst uu = a.map(function(el) {\n    el.val++;\n    return el.val\n});\na//[{ val: 2 }, { val: 3 }, { val: 4 }]\nuu//[2, 3, 4]\n\n//forEach\nconst a = [{ val: 1 }, { val: 2 }, { val: 3 }];\na.forEach(function(el) {\n    el.val++;\n    console.log(el.val);\n});\n//2\n//3\n//4\n\n//実行するだけ\n//forEachならこんなことも\n\n//forEachが配列の要素を編集して配列で返すには\n//\nconst a = [1,2,3],\n    b = [];\na.forEach(function(el) {\n    b.push(el+1);\n});\n\n// b is now [2,3,4], a is unchanged [1, 2, 3]\n\nconst a = [1, 2, 3];\nconst b = a.map(function(elem){\n  return  elem + 1;\n});\nb// [2, 3, 4]\na// [1, 2, 3]\n\n\n//メソッドを実行\ncats.forEach(function(cat) {\n    cat.meow(); // nicer than cats[x].meow()\n});\n\n\nconst oo = [2,3,4,5,6];\nconst aa = oo.map(function(x){\n    return x + 1;\n});\naa //[3, 4, 5, 6, 7]\n\n//forEach\nそれぞれの配列の要素に対して何かしたいとき\nconst oo = [2,3,4,5,6];\nconst aa = oo.forEach(function(x){\n    return x + 1;\n});\naa// undefined\n\n//forEachは元の配列を変更できる\n\n//map\n元の配列を変更せず変換やcopyをしたいとき\n```\n\n**問83**\n\n```[{name: 'kenji'},{name: 'morita'}]```の要素のvalueを次のように書き出してください(文字列'san'を付けています)e.g```['kenjisan', 'moritasan']```\n\n```js\nconst aa = [{name: 'kenji'},{name: 'morita'}];\nconst result = aa.map(function(ele, i){\n   return ele.name + 'san';\n});\nresult//['kenjisan', 'moritasan']\n\n```\n\n**問84**\n\n問83と同じ事をforEachでしてください\n\n```js\nconst aa = [{name: 'kenji'},{name: 'morita'}];\nconst arry = [];\naa.forEach(function(ele, i){\n      for (const key in ele){\n           arry.push(ele[key] + 'san')\n      }\n});\narry//['kenjisan', 'moritasan']\n```\n\n## Objects\n\n**問85**\n\n```js\nconst atom = {\n  value: 1,\n  addValue: function (value) {\n    return atom.value + value;\n  },\n};\n```\n\n上記object-shorthandを使って書き換えてください\n\n```js\n//ok\nconst atom = {\n  value: 1,\n  addValue(value) {\n    return atom.value + value;\n  },\n};\n```\n\n**問86**\n\nこちらのobjをkey内でメソッド呼び出しされているのをコンピューティッドプロパティを使って書き換えてください\n\n```js\nfunction getKey(k) {\n  return `a key named ${k}`;\n}\n\nconst obj = {\n  id: 5,\n  name: 'San Francisco',\n};\nobj[getKey('enabled')] = true;\n\n//ok\nfunction getKey(k) {\n  return `a key named ${k}`;\n}\nconst obj = {\n  id: 5,\n  name: 'San Francisco',\n  [getKey('enabled')]: true,\n};\n```\n\n**問87**\n\n下記のようなURLのファイルパスごとに配列に格納してください\n\n```js\nconst filepath = location.pathname.substring(1).split('/');\nfilepath;\n\n//['kenmori', 'Angular2_TypeScript', 'tree', 'master', 'angular2-quickstart']\n//https://github.com/kenmori/Angular2_TypeScript/tree/master/angular2-quickstart```\n\n```\n\n**問88**\n\n下記のようなobj内のkeyと値が一緒の際できるshorthandで記述してください\n\n```js\nconst lukeSkywalker = 'Luke Skywalker';\n\n// bad\nconst obj = {\n  lukeSkywalker: lukeSkywalker,\n};\n\n//ok\nconst obj = {\n  lukeSkywalker,\n};\n\n```\n\n**問89**\n\n下記のようなある配列itemsの要素をコピーしている記述をspreadArrayを使って簡潔に記述してください\n\n```js\nconst len = items.length;\nconst itemsCopy = [];\nlet i;\n\nfor (i = 0; i \u003c len; i++) {\n  itemsCopy[i] = items[i];\n}\nconst itemCopy = [...items];\n```\n\n**問90**\n\nwindowオブジェクトを7つ答えてください\n\n```\nnavigator\nlocation\nhistory\nscreen\nframes\ndocument\nparent, top, self\n```\n\n**問90**\n\n下のようにuserというnameとidをプロパティで持ったオブジェクトを再割り当てやマルチプルなobjectを扱う際に簡潔な書き方にしてください\n\n```js\nfunction add (user){\n  const name = user.name;\n  const id = user.id;\n  return `${name} ${id}`;\n}\n\n```\n\n答え\n\n```js\n//ベター\nfunction add (user) {\n  const { name, id } = user;\n  return `${name} ${id}`;\n}\n//best\nfunction add ({name, id}){\n  return `${name} ${id}`;\n}\n```\n\n**問91**\n\n```const aaa = [['oo','oo1'], ['ll','ll2']];```このような多次元配列のインデックス0番目だけを出力してください\n\n```js\nconst aaa = [['oo','oo1'], ['ll','ll2']];\naaa.forEach(function(ee){\n  ee.filter(function(eee, i){\n  if(i == 0){\n      console.log(eee);\n    }\n  });\n});\n//oo ll\n```\n\n**問92**\n\nArray destructuringとして簡潔に記述してください。\nシャローコピーとディープコピーの違いを教えてください。また\n```const aa = ['oo', 'll'];```\naaをbbにシャローコピーしてbb[0]に任意の文字列を代入し、aa[0]の参照する値が変わらないことを確認してください\n\n```js\n//concat\nconst aa = ['oo', 'll'];\nconst arry = [];\nconst bb = arry.concat(aa);//shallow copy\nbb[0] = 'kk';\naa//['oo', 'll']\nbb//['kk', 'll']\n\n//slice\nconst aa = ['oo', 'll'];\nconst bb = aa.slice(0, aa.length);\nbb[0] = 'kk';\naa//['oo', 'll']\nbb//['kk', 'll']\n\n//bad\n//spliceは破壊的メソッド(元参照を変える)\nconst aa = ['oo', 'll'];\nconst bb = aa.splice(0, aa.length);\nbb//['oo', 'll']\naa//[]\n```\n\n**問93**\n\n```const aa = ['oo', 'll'];```をbbにコピーしてaaは['kk', 'jj'];が挿入されるようにしてください。期待する結果\n\nbb//['oo', 'll'];\naa//['kk', 'jj'];\n\n```js\nconst aa = ['oo', 'll'];\nconst bb = aa.splice(0, aa.length, ['kk','jj'])\nbb//['oo', 'll'];\naa//['kk', 'jj'];\n```\n\n**問94**\n\nこのような配列\n```const aa = ['ii', 'jj', 'kk'];```がある。'jj'要素を削除するために\ndeleteを使った場合とspliceを使った場合の違いは何か。それがわかるコードを書いてください\n\n```js\ndeleteは削除されたインデックスを残す。spliseは間を詰める。\nconst aa = ['ii', 'jj', 'kk'];\ndelete aa[1];\naa//['ii', undefined, 'kk']\nconst aa = ['ii', 'jj', 'kk'];\naa.splice(1,1);\naa//['ii', 'kk']\n```\n\n**問95**\n\n```const text = 'key and value';```このような文字列を単語毎に配列の要素として格納してください\n//期待する結果\n//['key','and','value']\n\n```js\nconst text = 'key and value';\nconst arraytext = ii.match(/\\w+/g);\narraytext\n['text', 'and', 'value']\n```\n\n**問96**\n\n```const text = 'abc def ghi jkl';```の空白の直前の文字をグループ化してカンマ文字の後ろに移動させなさい。\n\n期待する文字列\n'ab,cde,fgh,ijkl'\n\n```js\nconst text = 'abc def ghi jkl';\ntext.replace(/(.)\\s/g,',$1');\n'ab,cde,fgh,ijkl'\n\n//or\n\nconst text = 'abc def ghi jkl';\ntext.replace(/(.)\\s/g,function(m0, m1){\n   return ',' + m1\n});\n'ab,cde,fgh,ijkl'\n```\n\n**問97**\n\n```const array = ['aa','bb','cc','dd','ff'];```\nこのような配列の要素'bb'の前に'ff'を移動させて ```['aa','ff','bb','cc','dd']```このような配列を完成させてください\n\n\n```js\narray.splice(1,0,array.splice(4,1)[0])\n//array\n//['aa','ff','bb','cc','dd']\n\n```\n\n**問98**\n\nnullの比較についてそれぞれtureかfalseか答えてください\n\n```js\nnull \u003c 1\nnull \u003e 1\nnull \u003c -1\nnull \u003e -1\n\nnull \u003c 0\nnull \u003c= 0\nnull \u003e= 0\nnull \u003e 0\nnull == 0\nnull === 0\n\n//Anser\nnull \u003c 1 //ture\nnull \u003e 1 //false\nnull \u003c -1 //false\nnull \u003e -1 //true\n//数値コンテキストではnullは0と解釈されるため、1より小さく、-1より大きい。\nnull \u003c 0 //false\nnull \u003c= 0 //true\nnull \u003e= 0 //true\nnull \u003e 0 //false\nnull == 0 //false\nnull === 0 //false\n//0以下であるが0より小さくはない。\n//0以上であっても0より大きくはない。\n```\n\n**問99**\n\nこちらの2つのif分の条件式の違いを教えてください\n\n```js\nif('a' in obj)\nif(obj.a)\n\n\n**in演算子の場合**\nobjにキーaが存在する場合(undefinedでも)trueを返す\nif('a' in obj)は実行される\n\n**obj.aの場合**\nundefinedの場合falseを返す\nif(obj.a)が存在しても未定義だと実行されない\n```\n\n**問100**\n\n``` const arr = [ 10, 20 ]; ```においてarr[2]が存在しないことを確認してください\n\n```js\n2 in arry;\n```\n\n\u003c/details\u003e\n\u003cdetails\u003e\u003csummary\u003e問101〜問150\u003c/summary\u003e\n\n**問101**\n\n```const string = '-9';```を数値に変換してください\n\n```js\nstring - 0\n//-9\n\n//別解\n//+string\n//-9\n```\n\n**問102**\n\nsliceとsubstringの違いを教えてください\n\n```js\n//引数に-を与えた際に違いが出ます\n\nconst str = 'あいうえお';\nstr.length\nstr.slice(0,-2)\n//'あいう'\n//0からインデックス最後の文字を-1とし後ろから数える\n\nconst str = 'あいうえお';\nstr.substring(0, -2);\n//'\n//負の数字は0とみなす。\n//0から0を取得するので空文字を返す\n\n//sliceは開始位置が終了位置以上だと空文字を返す\n\nconst str = 'あいうえお';\nstr.slice(1,1)\n//'\n\n//「い」を取得したい場合\nconst str = 'あいうえお';\nstr.slice(1,2)\n'い'\n\n//substringの場合\n//開始位置が終了位置より大きいと交換されて解釈される\n\nconst str = 'あいうえお';\nstr.substring(1,-3);\n//substring(-3,1)と解釈され負の数は0と見なされ\n//substring(0,1)と同等の処理をする\n\n//'あ'\n```\n\n**問103**\n\n次のような文字列```abcdefg```のcとeそれぞれを大文字にしてください\n\n```js\nconst str = 'abcdefg';\nconst replaced = str.replace(/[ce]/g,function(str){\n return str.toUpperCase();\n});\n//replaced 'abCdEfg'\n```\n\n**問104**\n\n次のような文字列をvar str = 'こんにちは';\nconst name = 'もりたさん';\n連結し'いい天気ですね'を付け足した新しい文字列を生成してください\n\n期待する結果```'こんにちはもりたさんいい天気ですね'```\n\n連結してもstrは元の文字列のママなことを確認\nstr\n//こんにちは\n\n```js\nconst str = 'こんにちは';\nconst name = 'もりたさん';\nconst newstr = str.concat(name, 'いい天気ですね');\nnewstr\n'こんにちはもりたさんいい天気ですね'\n\nstr //こんにちは\n\n//String.concatのパフォーマンスについて\n//https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/concat\n```\n\n**問105**\n\ntargetがnullかundefinedのときのみの判定がtrueになる条件式を書いてください\n\n```js\ntarget == null\n```\n\n**問106**\n\nこちら\n\n```js\nconst value = 0;\nconst target = value || 10\ntarget\n//10\n```\n\nはvalueが0の時falseになり10が返る。0の際も代入されるようにしてください\n\n```js\nconst value = 0;\nconst target = (value !== undefined) ? value : 10;\nvalue\n//0\n```\n\n**問107**\n\n配列arrayが空ならfalseが返るようにしてください\n\n```js\nconst array = [];\narray.length !== 0\n//false\n```\n\n**問108**\nこちらは自身のプロパティが定義されていない場合falseが返ることを期待しているがtrueが返る\n\n```js\nconst obj = {};\nobj ? true : false;\n```\n\n自身のプロパティを持っていない場合falseが返るようにしてください\n\n```js\nconst obj = {};\nObject.keys(obj).length != 0 ? true : false;\n//false\n```\n\n**問109**\n\nforでループさせるのとforEachで処理する際の違いを教えてください\n\n```js\n//forは構文\n//returnで返り値を返し、その関数処理を終える\n\n//forEachはメソッド。受け取った関数を全ての要素に処理するまで終えない。returnしても次の要素に処理が移るのみ\n\n//配列のどれか一つが条件を満たす評価をしたい場合Array.someがある\nfunction isBigEnough(element, index, array) {\n  return (element \u003e= 10);\n}\nconst passed = [2, 5, 8, 1, 4].some(isBigEnough);\n// passed は false\npassed = [12, 5, 8, 1, 4].some(isBigEnough);\n// passed は true\n```\n\n**問110**\n\nこの``` const arry = ['a','b','c']; ``` の列挙可能なプロパティと不可能なプロパティを出力してください\n\n期待する結果\n``` ['0','1','2','length'] ```\n\n答え\n\n```js\nconst arr = ['a','b','c'];\nconsole.log(Object.getOwnPropertyNames(arr));\n//['0','1','2','length']\n```\n\n**問111**\n\nオブジェクトoに対してaという値が'morita'、列挙可能、削除可能、書き換え可能なプロパティを作成してください\n\n```js\nlet o = {};\nObject.definedProperty(o,'a',{\n  value: 'morita',\n  writable: true,\n  configurable: true,\n  enumerable: true,\n});\n```\n\n**問112**\n\n下のlib/math.jsに入っている1と2を別のファイルで使えるようにして\n受け取る方app.jsも記述してください\n\n```js\n//lib/math.js\n//1\nfunction sum(x, y) {\n  return x + y;\n}\n//2\nconst pi = 3.141593;\n```\n\n```js\n//lib/math.js\nexport function sum(x, y) {\n  return x + y;\n}\nexport const pi = 3.141593;\n\n//app.js\nimport * as math from 'lib/math';\nimport {sum, pi} from 'lib/math';\n//e.g.\nmath.sum(x, y){\n    console.log(math.pi);\n    return x + y;\n}\nsum(1, 3)\n```\n\n**問113**\n\n```['morita','kenji','fafafa']```の要素 ```'fafafa'```のインデックスを返してください。\n期待する値 2\n\n```js\n['morita','kenji','fafafa'].findIndex(x =\u003e x == 'fafafa')\n//2\n```\n\n**問114**\n\n配列```['A','B','C']```を配列の0番目のインデックス値になるようにしてください\nexpect [['A'],['B'],['C']]\n\n```js\n//better\n['A','B','C'].map(x =\u003e Array.of(x));\n\n//best\n['A','B','C'].map(x =\u003e [x])\n\n//http://www.2ality.com/2014/05/es6-array-methods.html\n```\n\n**問115**\n\n配列```['a', 'b', 'c']```のインデックス1番だけを文字列'kenji'に変えてください\n\n```js\n['a', 'b', 'c'].fill('kenji', 1, 2);\n//['a','kenji','c']\n\n//http://www.2ality.com/2014/05/es6-array-methods.html\n```\n\n**問116**\n\n配列```[6, -5, 8]```を0未満の要素だけ出力してください\n\n```js\nconst i = [3, 0, 6, -1].find(x=\u003e x \u003c 0);\nconsole.log(i)\n//-1\n```\n\n**問117**\n\ngen.next().valueを実行すると値が1づつ返ってくるようなGenerator関数を作り、1,2,3と出力してください\n\n```js\nfunction* idMaker(){\n    const index = 0;\n    while(true)\n        yield index++;\n}\n\nconst gen = idMaker();\n\nconsole.log(gen.next().value); // 0\nconsole.log(gen.next().value); // 1\nconsole.log(gen.next().value); // 2\n```\n\n**問118**\n\nラッパーオブジェクトとは何ですか？教えてください。\n//解答は理解していてある程度どういうものか答えられればいいものとします\n\n```js\n//回答例\n\n//trueなどのプリミティブ値のプロパティにアクセスするとjavascirptはプリミティブ値に対応するコンストラクタからラッパーオブジェクトを作り、そのラッパーオブジェクトのプロパティやメソッドにアクセスできるようになる。(「オブジェクトのように」あつかうことができる。)作られたラッパーオブジェクトはオブジェクトへのアクセスが終わると破棄されて元のプリミティブ値に戻します。\n例えば下記は文字列オブジェクトから文字列を生成しています。\nconst string = new String('foo');\nstring.length;//3 オブジェクトがもつプロパティにアクセスできます。\nconst string = 'foo'//プリミティブ値として代入\nstring.length //3 文字列プリミティブをオブジェクトとしてアクセス。同じ3を出力していますが内部的に一時的にラッパーオブジェクトを呼び、オブジェクトにアクセス。その後破棄しています\n\nよく「javascriptは全てがObjectである」と言われるのはこのため\n\n//プリミティブ値・・・文字列,数値,真偽値などtypeofの評価でObjectを返さないそれら\n\n```\n\n**問119**\n\nnullとundefinedの違いを教えてください\n\n```js\n//nullはプロパティは設定しているものの、値の初期値としてなんらかの理由で値が入っていないことを明示する際にnullを入れる。変数やプロパティにがその時点で利用不可能にするためにnullを明示的に入れる\n\n//undefinedは存在自体がない\n```\n\n**問120**\n\n変数fafaの値がnullかどうかを確認してください\n\n```js\nconst fafa = null;\nconsole.log(typeof fafa)//Object\nconsole.log(fafa == undefined)//等値演算子ではtrueになってしまう\nconsole.log(fafa === null);//true //同値演算子を使う\n\n//等値演算子ではnullとundefinedはtrueになってしまうことに注意してください。\n```\n\n**問121**\n\nプリミティブ型と参照型の同値比較の違いを教えてください。\n\n```js\n//プリミティブ型の同値比較は文字通り同じ値かどうかが評価される。\n\n//参照型同士の同値比較は同じオブジェクトを参照しているかどうかが評価される。オブジェクトの代入は参照先の代入であることが理解できればok(参照渡し)\n\n```\n\n**問122**\n\ndiv要素を10個作ってidがparentの子要素として追加してください\n\n```js\n//bad\nconst parent = document.getElementById('parent');\nfor(let i = 0; i \u003c 10; i++){\n  const child = document.createElement('div');\n  parent.appendChild(child);;\n}\n\n//good\nconst fragment = document.createDocumentFragment();\nfor(let i = 0; i \u003c 10; i++){\n  const child = document.createElement('div');\n  fragment.appendChild(child);\n}\n\ndocument.getElementById('parent').appendChild(fragment);\n```\n\n**問123**\n\nXHTMLにscriptタグで記述する際のCDATAタグをどのように書くか教えてください。またもしそれを書かない場合の実体参照、\n``` \u003e ``` と ``` \u003c ``` をどのように書くか教えてください。また、\u0026と'、'はそれぞれエスケープ文字でどのように書きますか？\n\n```js\n//CDATAタグ\n\u003cscript\u003e\n\u003c![CDATA[\n  //something...\n    ]]\u003e\n\u003c/script\u003e\n\n//タグ\u003ch2\u003eの書き方\n\u0026lt;h2\u0026gt;\n\n//「'」シングルクウォート\n\u0026quot;\n\n//「＆」アンパサンド\n\u0026amp;\n```\n\n**問124**\n\n実体参照に直すscriptを書いてください\n\n```js\n//参照\n//http://stackoverflow.com/questions/17966089/how-to-replace-and-with-lt-and-gt-with-jquery-or-js\n```\n\n**問125**\n\n次の文章中の\n\n```\n My name is Taro Suzuki and I am a researcher at ABC.\n```\n\n小文字のaで始まる英単語にのみマッチする正規表現を書いてください。1文字の場合もマッチの対象で\n\n```js\nconst str7 = 'My name is Taro Suzuki and I am a researcher at ABC.';\n\n //str.match(/\\ba.*\\b/); これだと大文字と次の単語にmatchしてしまう\nconsole.log(str7.match(/\\ba\\w*\\b/g));\n//['and','am','a','at']\n\n//\\sa\\w*\\sだと\\sは文字の先頭や末尾にはマッチしないので、文章の先頭や末尾にある英単語が対象から外れてしまうことに注意してください。\n```\n\n**問126**\n\n```\u003cp\u003e```や```\u003cimg src=\"fafafa\"\u003e```などタグにマッチする正規表現を作ってください。またタグ名だけを抜き取ったものも教えてください。\n\n期待する値\"\u003cimg class='fafafa'\u003e\"\n※\u003c/ではじまる閉じタグは除外\n\nタグ名のみ\n```p``` や ```img``` ※いろいろあると思うので答えは一例とさせていただきます\n\n```js\nconst str3 = '\u003cimg src=\"fafa.com\"\u003e'\nconst str4 = '\u003cp\u003e'\nconst reg2 = /\u003c(\\S+)(\\s+.+)?\u003e/;//キャプチャあり\nconst reg3 = /\u003c(?:\\S+)(?:\\s+.+)?\u003e/;//キャプチャさせない\nconst re2 = str3.match(reg2);\nconst re3 = str3.match(reg3);\nconst re4 = str4.match(reg2);\nconsole.log(re2);\n//['\u003cimg src=\"fafa.com\"\u003e','img','src=\"fafa.com\"']\nconsole.log(re2[0]);\n//\u003cimg src=\"fafa.com\"\u003e\nconsole.log(re3);\n//['\u003cimg src=\"fafa.com\"\u003e']\n\nconsole.log(re3[0]);\n//\u003cimg src=\"fafa.com\"\u003e\nconsole.log(re4);\n//['\u003cp\u003e','p',null]\nconsole.log(re4[0]);\n//\u003cp\u003e\n```\n\n**問127**\n\n下のこちらを使い\n\n``` const myRe=/ken*/g; const str2 = 'fafakenfafkenji'; ```\n\n文字列の中のkenだけをexecメソッドを使いマッチした文字を全て出力、マッチした文字列の後のインデックスを同時に出力してください\n\n```js\nconst myRe=/ken*/g;\nconst str2 = 'fafakenfafkenji';\nlet array;\nwhile ((array = myRe.exec(str2)) !== null) {\n let msg = array[0] + ' を見つけました。';\n  msg += '次のマッチは ' + myRe.lastIndex + ' からです。';\n  console.log(msg);\n}\n//https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec\n```\n\n**問128**\n\n次の``` const string3 = 'washable reasonable accessible assemble answerable'; ```\n\nこちらの文字列,\n「able」で終わる英単語の前の部分([able]を除いた部分)にマッチする正規表現を書きなさい。期待する結果\n\n```\n['wash','reason','answer']\n```\n\n```js\nconst string3 = 'washable reasonable accessible assemble answerable';\nconst reg5 = /\\b\\w+(?=able\\b)/g;\nconsole.log(string3.match(reg5));\n//['wash','reason','answer']\n```\n\n**問129**\n\nこちらの文字列\n\n```\nconst nen1 = 'ケンジは昭和55年生まれの35歳であり、ケンジの母は昭和22年生まれの64歳である'\n```\n\nを使い、後ろに「年」および数字以外の文字が続く1桁以上の数字にマッチする正規表現を書いてください\n\n期待する結果\n\n```\n['35','64']\n```\n\n```js\nconst nen1 = 'ケンジは昭和55年生まれの35歳であり、ケンジの母は昭和22年生まれの64歳である'\nconst reg6 = /\\d+(?![年\\d])/g;\nconsole.log(nen1.match(reg6));\n//['35','64']\n//see:正規表現書き方ドリル(技術評論社)\n\n//※ 一番最初に見つけたマッチだけが欲しい場合、execの方がいいかもしれません\n//see: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match\n```\n\n**問130**\n\n下のような文字列```const str222 = 'わたしの名前は「もりた」です。あだなは「もりけん」です';```\nのカギ括弧内とその文字列にマッチするような正規表現を書いてください\n\n['「もりた」','「もりけん」']\n\n```js\nconst str = 'わたしの名前は「もりた」です。あだなは「もりけん」です';\n\nconst re = /「(.+?)」/ig;\nconst result = str.match(re);\nconsole.log(result);\n//['「もりた」','「もりけん」']\n\n```\n\n**問131**\n\n上記の文字列を使ってexecメソッドを使い文字列とし2つとも出力してください\n\n期待する結果\n//「もりた」「もりけん」\n\n```js\nconst str222 = 'わたしの名前は「もりた」です。あだなは「もりけん」です';\nconst re222 = /「(.+?)」/ig;\nlet result;\nwhile ((result = re222.exec(str222)) !== null){\n  console.log(result[0],'ここ')\n}\n\n```\n\n**問132**\n\n下記の文字列の「客」という文字の部分ともうひとつある同じ文字である場合のみマッチする正規表現を作成してください\n\n```\n○あの客はよく柿食う客だ\n×あの客はよく柿食う人だ\n○あの友達はよく柿食う友達だ\n×あの親友はよく柿食う友達だ\n```\n\n```js\n//解答例\nconst str5 = 'あの客はよく柿食う客だ';\nconst res5 =str5.match(/あの(.+)はよく柿食う\\1だ/);\nconsole.log(res5[0]);\n//あの客はよく柿食う客だ\n\n//※[0]にはマッチした箇所が、この場合[1]にはキャプチャが入る\n```\n\n```js\nconst str5 = 'あの客はよく柿食う客だ';\nconst res5 =str5.match(/あの(.+)はよく柿食う\\1だ/);\nconsole.log(res5[0]);\n```\n\n**問133**\n\n次のタグ\n\n```js\nconst tag = '\u003cdiv\u003e\n    \u003ch1\u003ekenjimorita.jp\u003c/h1\u003e\n\u003c/div\u003e';\n//\u003c1\u003e\u003c2\u003ekenjimorita.jp\u003c/3\u003e\u003c/4\u003e\n```\n\nの1と4、2と3が同じ場合にtrue、違う場合はfalseを返す正規表現を書いてそれぞれ出力し確認してください\n\n```js\n\nconst tag = '\u003cdiv\u003e\u003ch1\u003ekenjimorita.jp\u003c/h1\u003e\u003c/div\u003e';\nconsole.log(/\u003c(\\w+)\u003e\u003c(\\w+)\u003ekenjimorita.jp\u003c\\/\\2\u003e\u003c\\/\\1\u003e/.test(tag))\n//true\n\nconst tag2 = '\u003cdiv\u003e\u003ch1\u003ekenjimorita.jp\u003c/h1\u003e\u003c/div\u003e';\nconsole.log(/\u003c(\\w+)\u003e\u003c(\\w+)\u003ekenjimorita.jp\u003c\\/\\2\u003e\u003c\\/\\1\u003e/.test(tag2))\n//false\n```\n\n**問134**\n\nこちらの\n\n```\n[2, 3,-1, -6, 0, -108, 42, 10].sort();\n```\n\nsortは正しくsortされない。コンパレータ関数を渡して正しい順序として出力してください。\n\n```js\n\n[2, 3,-1, -6, 0, -108, 42, 10].sort(function(x, y){\nif(x \u003c y) return -1;\nif(y \u003c x) return 1;\nreturn 0;\n});\n//[-108, -6, -1, 0, 2, 3, 10, 42]\n\n```\n\n**問135**\n\n```js\nconst i = document.getElementById();\ni.parentNode.tagName\n\nnodeType[1] = ElementNode;\nnodeType[2] = AttributeNode;\nnodeType[3] = TextNode;\ni.childNodes; //子要素を返す\ni.firstChild //最初の子要素\n```\n\n**問136**\n\n下のような\n\n```html\n\u003cdiv id='top' align='center'\u003e\n  \u003cdiv id='nested'\u003e\n    \u003cdiv\u003e\u003cp\u003e\u003ca\u003e\u003c/a\u003e\u003c/p\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nDOMがある。```#nested```\n要素を削除してください\n\n```js\nconst i = document.getElementById('top');\nconst f = document.getElementById('nested');\ni.removeChild(f);\n```\n\n**問137**\n\nnestedの親要素が不明の場合の時nestedを削除してください\n\n\u003chttps://developer.mozilla.org/ja/docs/Web/API/Node/removeChild\u003e\n\n```js\nconst node = document.getElementById('nested');\n\nif (node.parentNode) {\n  node.parentNode.removeChild(node);\n}\n```\n\n**問138**\n\ntopの子要素全て削除してください\n\n```js\n const element = document.getElementById('top');\n\n while (element.firstChild) {\n   element.removeChild(element.firstChild);\n }\n```\n\n**問139**\n\n下のfooオブジェクトが自身のプロパティとしてbarを持っていないことを示してください\n\n```js\n// Object.prototype汚染\nObject.prototype.bar = 1;\nconst foo = {goo: undefined};\n\nfoo.bar; // 1\n'bar' in foo; // true\n```\n\n答え\n\n```js\nfoo.hasOwnProperty('bar'); // false\nfoo.hasOwnProperty('goo'); // true\n```\n\n**問140**\n\nこちらのfor inループでも汚染された継承されたプロパティも\n列挙される\n\n```js\n// Object.prototype汚染\nObject.prototype.bar = 1;\n\nconst foo = {moo: 2};\nfor(const i in foo) {\nconsole.log(i); // barとmooが両方とも表示される\n}\n\n//good\n// 継承されているfoo\nfor(const i in foo) {\n    if (foo.hasOwnProperty(i)) {\n        console.log(i);\n    }\n}\n```\n\n**問141**\n\nnew Mapとnew WeakMapの違いを教えていください\n\n```js\n//http://uhyohyo.net/javascript/16_1.html\nweakMapは参照元を内部で保持していても他のところに全く関係ない、上書きされるとガーベージコレクションの対象になる\nMapは内部で参照元を保持し自分自身で「含まれるオブジェクト一覧」を扱うメソッドがある為にガーベージコレクションの対象にならない\n//weakMapのいいところkeyに対してのobjを汚さないで済む\n```\n\n**問142**\n\n[0,0,0]の配列をインデックス1と2を7にした配列にしてください\nexpect : [0, 7, 7]\n\n```js\nconst ary = [0,0,0];\nary.fill(7,1)\n//[0, 7, 7]\n```\n\n**問143**\n\nこのような\n\n```css\n\u003cstyle\u003e\nh3:after {\n  content:'';\n}\n\u003c/style\u003e\n```\n\nスタイル定義されている\nh3:after(擬似要素)のcontentプロパティにアクセスしてください\n\n```js\nconst h3 = document.querySelector('h3');\nconst result = getComputedStyle(h3, ':after').content;\n```\n\n**問144**\n\n少なくとも400pxあるビューポートに対してスタイルを制御したい際のif文を書いてください\n\n```js\nif(window.matchMedia('(min-width:400)').matches){\n/* 少なくとも400ピクセル幅のあるビューポート */\n}else {\n/* 400ピクセル幅に満たないビューポート       */\n}\n```\n\n**問145**\n\nこちらの```const numObj = 12345.6789;```\nを小数点以下を丸めてください\n\n期待する結果\n//12346\n\n```js\nconst numObj = 12345.6789;\nnumObj.toFixed();\n//12346\n```\n\n**問146**\n\nこちらの\n\n```js\nconst thing = 'global';\nfunction foo(){\n  console.log(thing);\n  if(true){\n    const thing = 'local';\n    console.log(thing);\n  }\n}\nfoo();\n```\n\nのconsole.logはそれぞれ何を出力するか答えなさい。またそうなる理由を説明してください\n\n```js\nconst thing = 'global';\nfunction foo(){\n  console.log(thing);\n  if(true){\n    const thing = 'local';\n    console.log(thing);\n  }\n}\nfoo();\n//undefined\n//local\n\n//この記述をすると関数内宣言内での変数宣言は巻き上げられてjavascriptは下のように解釈をするから\nconst thing = 'global';\nfunction foo(){\n  const thing;//巻き上げ\n  console.log(thing);\n  if(true){\n    thing = 'local';\n    console.log(thing);\n  }\n}\nfoo();\n```\n\n**問147**\n\n先程のfoo()を実行した際に期待する値が出力されるようにしてください\n\n```js\nconst thing = 'global';\nfunction foo(){\n  console.log(thing);\n  if(true){\n    const thing = 'local';\n    console.log(thing);\n  }\n}\nfoo();\n//block scope。変数スコープがブレース{}の中に閉じる\n```\n\n**問148**\n\ndiv要素をnodeListとして取得し、Arrayのメソッドで「配列の様なオブジェクト」から配列に変換してください\n\n```js\nconst likeArray = document.querySelector('div');\nconst turnArrayFun = function(obj){\n    return [].map.call(obj, function(obj){\n          return obj;\n    })\n}\nturnArrayFun(likeArray);\n```\n\n**問149**\n\n下記のようなDOMがある\n\n```html\n\u003cdiv id=\"target\"\u003e\n  (1)\n  \u003cspan\u003e既存の内容\u003c/span\u003e\n\u003c/div\u003e\n```\n\nこの「既存の内容」より前(1)に```\u003cp\u003e子要素\u003c/p\u003e```を挿入してください。但しdocument.writeやinnerHTMLは使わないものとする。\n\n```js\nconst target = document.querySelector('div#target');\nconst html = '\u003cp\u003e子要素\u003c/p\u003e';\ntarget.insertAdjacentHTML('afterbegin',html);\n\n//https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML\n\n```\n\n**問150**\nこちら\n\n```html\n(1)\n\u003cdiv id=\"target\"\u003e\n  \u003cspan\u003e既存の内容\u003c/span\u003e\n  (2)\n\u003c/div\u003e\n(3)\n```\n\n上記問題と同じDOM構造でそれぞれtargetより前に挿入(1)、「既存の内容より弟」位置に挿入(2)、targetより後に挿入(3)する記述をしてください\n\n```js\nconst target = document.querySelector('div#target');\nconst html = '\u003cp\u003e子要素\u003c/p\u003e';\nconst position =\nbeforebegin//(1)\nbeforeend//(2)\nafterend //(3)\ntarget.insertAdjacentHTML(position,html);\n```\n\n\u003c/details\u003e\n\u003cdetails\u003e\u003csummary\u003e問151〜問200\u003c/summary\u003e\n\n**問151**\n\n下記\n\n```js\nconst key = 'greeting';\nconst objA = {};\nobjA[key] = 'おはよう';\nobjA.greeting\n//'おはよう'\n```\n\nをECMAScript2015を意識した省略記述してください\n\n```js\nconst key = 'greeting';\nconst objA = {\n  [key] : 'おはよう'\n};\nobjA.greeting\n```\n\n**問152**\n\nこちらの記述\n\n```js\nconst objA = {\n add: function(a,b){\n  return a + b;\n }\n}\nobjA.add(2,5);\n//7\n```\n\nを省略記述してください\n\n```js\nconst objA = {\n add(a,b){\n  return a + b;\n }\n}\nobjA.add(2,5);\n//7\n\n```\n\n**問153**\n\n上記の問題のadd関数をobjA内でアロー関数で記述してください\n\n```js\nconst objA = {\n add: (a,b)=\u003e{\n  return a + b;\n }\n}\nobjA.add(2,5);\n//7\n```\n\n**問154**\n\nこのような\n\n```js\nconst array = ['shibuya','shinjuku','ebisu','shinagawa','tokyo','ueno','ikebukuro'];\n```\n\n配列がある。\n変数aに'shinjuku'、bに'ikebukuro'が代入されるように簡潔に記述してください\n\n```js\nconst array = ['shibuya','shinjuku','ebisu','shinagawa','tokyo','ueno','ikebukuro'];\nconst [,a,,,,, b] = array;\na\n//\"shinjuku\"\nb\n//\"ikebukuro\"\n```\n\n**問155**\n\nこのような\n\n```js\nconst obj = {\n name : 'kenji',\n twon: 'shibuya'\n}\n```\n\nobjを変数name、twonに代入して出力してください\n\n```js\nconst obj = {\n name : 'kenji',\n twon: 'shibuya'\n}\nconst {name, twon} = obj;\nname\n//\"kenji\"\ntwon\n//\"shibuya\"\n```\n\n**問156**\n\nconst name = 'KenjiMorita';\nのKとMだけをそれぞれ変数a,ｂに入れてください\n\n```js\nconst name = 'KenjiMorita';\nconst [a,,,,,b] = name;\n\n```\n\n**問157**\n\n変数\n\n```js\nconst a = 1;\nconst b = 'goodby';\n```\n\nのaを'goodby'、bを\n1として出力されるようにしてください(変数のSwap)\n\n```js\nconst a = 1\nconst b = 'goodby'\nb = [a, a = b][0];\na\n//'goodby'\nb\n//1\n\n```\n\n**問158**\n\n上記(問157)と同じ事をECMAScript2015ライクに簡潔に記述してください\n\n```js\nconst a = 1;\nconst b = 'goodby';\n[a,b] = [b, a]\n[\"goodby\", 1]\n\n//http://qiita.com/gaogao_9/items/18b20ad9b76c9c81b5fa#_reference-4b73dec38a62a3fb0ab7\n```\n\n**問159**\n\nこちら```const input = [0,[1,2,3],4,5,[6]];```を```[0,1,2,3,4,5,6]```となるようにしてください\n\n```js\n //展開演算子(スプレッド演算子)\nconst input = [0,[1,2,3],4,5,[6]];\nconst inputB = [input[0],...input[1],input[2],input[3],...input[4]];\ninputB\n//[0,1,2,3,4,5,6]\n```\n\n**問160**\n\n下記のような\n\n```html\n\u003cdiv id='outer'\u003e\n  outer\n  \u003cdiv id='inner'\u003einner\u003c/div\u003e\n\u003c/div\u003e\n```\n\nに対してload時に#innerのtextを任意の文字列に変えるようにしください。なおwindow.onloadは使わないようにする。\n\n```js\ndocument.addEventListener('DOMContentload',function(){\n const target = document.getElementById('inner');\n target.textContent('fafa');\n},false)\n\n//’load'はHTMLの全てのloadが終わったタイミングで発火。\n//'DOMContentload'はDOM解析が終わってDOMに触れるようになったら発火。\n//この場合'DOMContentload'を使用。画像が読み込まれる前に実行されて高速。だが画像幅に対してのレイアウト変更をするようであれば'load'\n//[参照](http://qiita.com/gaogao_9/items/ec2b867d6941173fd0b1#_reference-1aa15cfa5c1cf1f77a86)\n```\n\n**問161**\nこのような\n\n```js\naddeventListener('DOMcontentLoad',function(){something},[true,false])\n```\n\nイベントリスナーの第三引数のフラグは何か説明してください\n\n```html\nuseCapture設定。\n例えばclickイベントを親と子、両方に設定している場合、親にtrue設定すると子供(内側)をclickすると親が先に発火(キャプチャフェーズ)、続い///て子供となる。useCaptureによって発生するイベントの順番が変わる。\ndefalutはfalse\n\n**イベントフェーズ**\n\n[キャプチャフェーズ](ルート要素から発生要素を探しに行く)\n[ターゲットフェーズ](発生用をを検出する)\nバグリングフェーズ(ルート要素を辿っていく)\nsee //http://qiita.com/hosomichi/items/49500fea5fdf43f59c58\n```\n\n**問162**\nこのような\n\n```html\n\u003cdiv class='classA'\u003e\n    \u003cdiv\u003esome1\u003c/div\u003e\n    \u003cp\u003e\u003cdiv\u003esome2\u003c/div\u003e\u003c/p\u003e\n    \u003cdiv\u003esome3\u003c/div\u003e\n\u003c/div\u003e\n```\n\nDOMがある。classAより子供のdiv要素のみ取得してください\n\n```js\nconst classA = document.getElementsByClassName('classA');\nconst result = Array.prototype.filter.call(classA,function(classA){\n return classA.nodeName === 'DIV'\n});\nresult instanceof Array\n```\n\n**問163**\nこのような\n\n```html\n\u003cdiv class=\"fafa\"\u003e\u003cspan\u003e\u003c/span\u003e\u003c/div\u003e\n\u003cdiv class=\"fafa\"\u003e\u003cspan\u003e\u003c/span\u003e\u003c/div\u003e\n\u003cdiv class=\"fafa\"\u003e\u003cspan\u003e\u003c/span\u003e\u003c/div\u003e\n\u003cdiv class=\"fafa\"\u003e\u003cspan\u003e\u003c/span\u003e\u003c/div\u003e\n```\n\nfor文でNodeListを使うのを避けるため、\nDOMのspanタグの分だけ取得してNodeListをArrayに変えてください。\n\n```js\nconst tag = document.getElementsByTagName('span');\nconst array = Array.prototype.slice.call(tag);\nconsole.log(array instanceof Array );\n```\n\n**問164**\n\nこのようなODMがある\n\n```html\n\u003cdiv id=\"main\"\u003e\n  \u003cp class=\"content\"\u003e\n    \u003ca class=\"link\" href=\"http://kenjimorita.jp\"\u003e\n    1st Link\n  \u003c/a\u003e\n    \u003cp class=\"dummy\"\u003e\u003c/p\u003e\n    \u003cp class=\"content\"\u003e\n      \u003ca href=\"http://example.com/\"\u003e2link\u003c/a\u003e\n    \u003c/p\u003e\n    \u003cp class=\"content\"\u003e\n      \u003ca href=\"http://example.com/\"\u003e3link\u003c/a\u003e\n    \u003c/p\u003e\n    \u003ca href=\"http://example.com/\"\u003e5th\u003c/a\u003e\n\u003c/div\u003e\n```\n\nXPathを使ってidがmainのdiv、classにcontentを含むp要素の3番目hrefが\u003chttp://example.comから始まるa要素を辿り\u003e\n「3link」を出力してください\n\n```js\nconst result = document.evaluate(\n  '//div[@id=\"main\"]/p[contains(@class,\"content\")][3]/a[starts-with(@href,\"http://example.com\")]',\n  document,\n  null,\n  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,\n  null\n);\n\nconsole.log(result.snapshotLength); //1\nconst elem = result.snapshotItem(0);\nconsole.log(elem.innerHTML);\n\n//evalute([path:string],[Node],[null],[XPathResultObject:Type],[null])\n//第3(名前空間URLを返す関数)、5引数(既存のXPathResultオブジェクト)はnullで問題ない。\n\n//evaluteメソッド第４引数の値と返値の関係\nANY_TYPE :0\nNUMBER_TYPE :1\nSTRING_TYPE :2\nBOOLEAN_TYPE :3\nUNORDERED_NODE_ITERATOR_TYPE :4\nORDERED_NODE_ITEERATOR_TYPE :5\nUNORDERED_NODE_SNAPTHOT_TYPE :6\nORDERED_NODE_SNAPSHOT_TYPE :7\nANY_UNORDERED_NODE_TYPE :8\nFIRST_ORDERED_NODE_TYPe :9\n\n参照//パーフェクトJavaScript\n```\n\n**問165**\n\nこちら\n\n```html\n\u003cdiv id=\"target\" class=\"foo-after\" onClick=\"toggleStyle()\"\u003e\n  click here!\n\u003c/div\u003e\n```\n\nclickをしたらclass名がfoo-beforeに変わるtoggleStyleを実装をしてください\n\n```js\nconst target = document.getElementById('target');\ntarget.onclick = function toggleStyle() {\n  this.classList.toggle('foo-after');\n  this.classList.toggle('foo-before');\n}\n```\n\n**問166**\n \" fafa fafa eee \"のような最初と最後に空白があるような文字列に対して、それらを含めない配列を返してください\n\n```js\n \" fafa fafa eee \".trim().split(\" \");\n //[\"fafa\", \"fafa\", \"eee\"]\n```\n\n**問167**\n\"abcdefg\"のような文字列をインデックスと値が取れるオブジェクトに変更してください\n期待する結果。\n{0:a,1:b,2:c,3:d,4:e,5:f,6:g}\n\n```js\nconst str = \"abcdefg\";\nconst obj = Object.prototype.valueOf.call(str)\nobj\n//{0:a,1:b,2:c,3:d,4:e,5:f,6:g}\n```\n\n**問168**\n\"abcdefg\"のような文1文字づつの要素となる配列に変更してください\n期待する結果\n[\"a\", \"b\", \"c\", \"d\", \"e\", \"f\", \"g\"]\n\n```js\nconst str2 = \"abcdefg\";\nconst arry = Array.prototype.slice.call(str2);\narry\n\n//[\"a\", \"b\", \"c\", \"d\", \"e\", \"f\", \"g\"]\n```\n\n**問169**\n\"apple banana orenge\"のような文字列を空白で区切り、それそれの「単語」をObjectのkey値として取得できるようにしてください。\n期待する結果。\n{0: \"apple\", 1: \"banana\", 2: \"orenge\"}\n\n```js\nconst string = \"apple banana orenge\";\nconst arrayed = string.split(\" \");\nconst obj ={};\narrayed.forEach(function(elem,i){\n     obj[i] = elem;\n});\nobj\n//{0: \"apple\", 1: \"banana\", 2: \"orenge\"}\n\n\n//Map\nconst string = \"apple banana orenge\";\nconst arrayed = string.split(\" \");\nconst map = new Map();\nconst obj ={};\narrayed.forEach(function(elem,i){\n     map.set(i,elem);\n})\nmap\n//{0: \"apple\", 1: \"banana\", 2: \"orenge\"}\n\n//entries\nconst string = \"apple banana orenge\";\nconst arrayed = string.split(\" \");\nconst newarray =[];\nfor(value of arrayed.entries()){\n     newarray.push(value)\n}\nconst map = new Map(newarray)\nmap\n//{0: \"apple\", 1: \"banana\", 2: \"orenge\"}\n```\n\n**問170**\nadd()を実行した際 3 、add(2)としたら 4 add(2,3)を実行したら 5 が返ってくる関数addを定義してください\n\n```js\n//デフォルトパラメータ\nfunction add(a = 1, b = 2){\n return a + b;\n}\nadd();// 3\nadd(2);//4\nadd(2,3)//5\n```\n\n**問171**\n\nこちらのような\n\n```\nif(condition){\n    dosomething();\n}\n```\n\nconditionがtrueの時に実行したい関数があった場合、端的に記述してください\n\n```js\ncondition \u0026\u0026 dosomething();\n```\n\n**問172**\n\nこちらは\n\n```\nfor (const i=0; i\u003c5; i++) {\n    setTimeout(function(){\n        console.log(i);\n    }, 1000 * (i+1));\n}\n```\n\n1秒ごとに1からインクリメントされた値が出力されることを期待していますが、実際は5が5回出力されます。\n理由を教えて下さい。\n\n```js\n各タイムアウトはコピーではなく元のiを参照します。\nしたがって、forループはiが5になるまで増分し、\nその後タイムアウトが実行され、\niの現在の値（5）が使用されます。\n\nfor (const i=0; i\u003c5; i++) {\n    const temp = i;\n    setTimeout(function(){\n        console.log(temp);\n    }, 1000 * (i+1));\n}\n\n\nブロックはスコープを作成せず、\n変数の初期化はスコープの先頭に吊り下げられるため、\nこれも機能しません。\n実際、前のブロックは次のものと同じです\nconst temp;\nfor (const i=0; i\u003c5; i++) {\n    temp = i;\n    setTimeout(function(){\n        console.log(temp);\n    }, 1000 * (i+1));\n}\n\niをコピーする方法はいくつかあります。\n最も一般的な方法は、\n関数を宣言し、iを引数として渡すことによってクロージャを作成することです。\nここでは、これを自己呼び出し関数として実行します。\n\nfor (const i=0; i\u003c5; i++) {\n    (function(num){\n        setTimeout(function(){\n            console.log(num);\n        }, 1000 * (i+1));\n    })(i);\n}\nJavaScriptでは、\n引数は値によって関数に渡されます。\n数値、日付、文字列などのプリミティブ型は基本的にコピーされます。\n関数内でそれらを変更しても、外部スコープには影響しません。\nオブジェクトは特別です。\n内部関数がプロパティを変更した場合、\nその変更はすべてのスコープに反映されます。\n\nこれに対するもう1つのアプローチはletを使うことです。\n\nfor (let i=0; i\u003c5; i++) {\n    setTimeout(function(){\n        console.log(i);\n    }, 1000 * (i+1));\n}\n```\n\n**問173**\n\n右の様な```{name: 'hogehoge',age: 80}```を別の変数「obj2」に代入したい。\nObjectを参照渡しすると代入先の値が変わるとオリジンの値も変わります。originに影響のない新しいオブジェクトとしてオリジンと同じ値をもつインスタンスを生成してください。\nまたorigin.name='oo'としても「obj2.nameが'hogehoge'」で変わらないことを確認してください\n\n```js\n//一例\nconst origin = {name: 'hogehoge',age: 80};\nconst obj2 = JSON.parse(JSON.stringify(origin));\nobj2\n//Object {name: \"hogehoge\", age: 80}\norigin.name = \"oo\"\n//\"oo\"\nobj2.name\n//\"hogehoge\"\n```\n\n**問174**\n\nこちらを使って、\n\n```js\nfunction getKey(k) {\n  return `a key named ${k}`;\n}\n```\n\nオブジェクトobjのプロパティkeyから上記getKey関数に'enabled'文字列を渡してcallし、objのキーがa keynamed enabled、値がtrueになるようなobjの作りにしてくだささい\n期待する結果:```{id: 5, name: \"San Francisco\", a key named enabled: true}```\n\n```js\n// bad\nconst obj = {\n  id: 5,\n  name: 'San Francisco',\n};\nobj[getKey('enabled')] = true;\n\n// good\nconst obj = {\n  id: 5,\n  name: 'San Francisco',\n  [getKey('enabled')]: true,\n};\n```\n\n**問175**\n\n以下の様な\n\n```js\nconst name = 'kenji morita';\nconst address = 'shibuya';\n\nconst obj = {\n name : name,\n morita: morita,\n episodeTheree: 3,\n mayTheForth: 4,\n address: address,\n}\n```\n\nobjの宣言をショートハンドを使ってなおしてください\n\n```js\nconst obj = {\n name,\n episodeTheree: 3,\n mayTheForth: 4,\n address,\n}\nobj// {name: \"kenji morita\", episodeTheree: 3, mayTheForth: 4, address: \"shibuya\"}\n\n```\n\n**問176**\n\ndocument上に何個かある```class='foo'```を配列の様なオブジェクトからnodeオブジェクトに\n\n```js\nconst foo = document.querySelector('.foo');\nconst nodes = Array.from(foo);\n```\n\n**問177**\n\n```\n[[0, 1], [2, 3], [4,5]]\n```\n\nをフラットにしてください\n期待する値:[0, 1, 2, 3, 4, 5]\n\n```js\nlet flat = {};\n[[0, 1], [2, 3], [4,5]].reduce((pre, current, index, arry) =\u003e {\n let flatten = pre.concat(current);\n flat[index] = flatten;\n return flatten\n})\nflat\n//[0, 1, 2, 3, 4, 5]\n\n//other\n[...[0, 1], ...[2, 3], ...[4,5]]\n//[0, 1, 2, 3, 4, 5]\n```\n\n**問178**\n\n下記の関数式としての宣言は\n\n```js\n// bad\nconst foo = function () {\n};\n```\n\nなぜ好ましくないとされているか答えてください\n\n```js\n//コールスタックに識別しやすくされている\n//アロー関数が使える\n// good\nfunction foo() {\n}\n```\n\n**問179**\n\nこちらの\n\n```js\nif (currentUser) {\n  function test() {\n    console.log('Nope.');\n  }\n}\n```\n\nは何が悪いか答えてください。また修正してください\n\n```js\n //A function declaration is not a statement\n //関数宣言はステートメントではありません\n\nlet test;\nif (currentUser) {\n  test = () =\u003e {\n    console.log('Yup.');\n  };\n}\nsee http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97\n```\n\n**問180**\n\nこちらの\n\n```js\nfunction concatenateAll() {\n  const args = Array.prototype.slice.call(arguments);\n  return args.join('');\n}\n```\n\n渡ってきたすべての引数を結合して文字列として返す上記を端的に書き換えてください\n\n```js\nfunction concatenateAll(...args) {\n  return args.join('');\n}\n```\n\n**問181**\n\nこちらはアンチパターンです。\n\n```js\nfunction f1(obj) {\n  obj.key = 1;\n};\n```\n\nなぜだかお答えください\n\n```js\n//Why? Manipulating objects passed in as parameters can cause unwanted variable side effects in the original caller.\nパラメータとして渡されたオブジェクトを操作すると、元の呼び出し側で不要な変数副作用を引き起こす可能性があります。\n\nfunction f2(obj) {\n  const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;\n};\n```\n\u003chttps://github.com/airbnb/javascript\u003e\n\n**問182**\n\n下記のような\n\n```js\nconst foo = a ? a : b;\nconst bar = c ? true : false;\nconst baz = c ? false : true;\n```\n\n不必要な3項演算子を避けて同じ意味を簡潔に書いてください\n\n```js\nconst foo = a || b;\nconst bar = !!c;\nconst baz = !c;\n```\n\n**問183**\n\nこちらの記述\n\n```js\nconst foo = {clark: 'kent'};\n```\n\nspaceをeslintのobject-curly-spacing や\njscsのrequireSpacesInsideObjectBracketsで良いとされている書き方に変更してください\n\n```js\nconst foo = { clark: 'kent' };\n```\n\n**問184**\n\n第一引数にaddress,第二引数にtyoume、第三引数にbanchをとりそれらの渡ってきた値をそれぞれ要素とする1つの配列として返すだけの関数createAddressに\ndefaultPrameterとして第二引数に「address + -1」、第三引数に「tyoume + '-10'」として設定してください。\n\n```js\nfunction createAddress(address, tyoume = address +  '-1', banch = tyoume + '-10'){\n return [address, tyoume , banch];\n}\ncreateAddress('meguro')\n//['meguro', 'meguro-1', 'meguro-1-10']\n```\n\n**問185**\n\nf()を実行すると6が返ってくる関数を実装してください。\n但しfは引数にx,y,zを持ち、xはデフォルトで1、yは2で、zはObjectDestructuringとしてkeyとvalueにzにを持ちデフォルトでzの値は3とする\n\n```js\nfunction f([x, y] = [1,2], {z: z} = {z: 3}){\n return x + y + z;\n}\nf()\n//6\n```\n\n**問186**\n\nこちらを使って\n\n```js\nconst people = [\n{ name: \"ken\",\n  family: {\n   mother: \"jone Smith\"\n  },\n age: 24\n},\n{ name: \"jun\",\n  family: {\n   mother: \"jone jun\"\n  },\n age: 27\n}];\n```\n\n下記のような\n。\n\n```js\n//Name ken, Mother: jone Smith\n//Name jun, Mother: jone jun\n```\n\n出力になるように実装してください。\n\n```js\nconst people = [\n{ name: \"ken\",\n  family: {\n   mother: \"jone Smith\"\n  },\n age: 24\n},\n{ name: \"jun\",\n  family: {\n   mother: \"jone jun\"\n  },\n age: 27\n}];\nfor (const {name: n, family: {mother : f}} of people){\n console.log(\"Name \" + n + \", Mother: \" + f);\n}\n//Name ken, Mother: jone Smith\n//Name jun, Mother: jone jun\n\n```\n\n**問187**\n\nこちら\n\n```js\nconst metadata = {\n title: 'Scratchpad',\n translations: [\n  {\n    locale: 'de',\n    localization_tags: [],\n    last_edit: '2016-07-18',\n    url: 'kenjimorita.jp',\n    title: 'JavaScript'\n   }\n ],\n  url: 'kenjimorita.jp/JavaScript'\n};\n```\n\nのtitleをenglishTitleとして、translationsの中のtitleをlocalTitleとしてそれぞれ変数に代入してconsole.log出力してください\n\n```js\nconst metadata = {\n title: 'Scratchpad',\n translations: [\n  {\n    locale: 'de',\n    localization_tags: [],\n    last_edit: '2016-07-18',\n    url: 'kenjimorita.jp',\n    title: 'JavaScript'\n   }\n ],\n  url: 'kenjimorita.jp/JavaScript'\n};\nconst {title: englishTitle, translations: [{title: localeTitle}]} = metadata;\nconsole.log(englishTitle, localeTitle);\n//'Scratchpad'\n//'JavaScript'\n\n```\n\n**問188**\n\nこちらの渡ってきたoptionの値をデフォルト設定している書き方\n\n```js\nfunction drawES5Chart(options) {\n  options = options === undefined ? {} : options;\n  const size = options.size === undefined ? 'big' : options.size;\n  const cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;\n  const radius = options.radius === undefined ? 25 : options.radius;\n  console.log(size, cords, radius);\n}\ndrawES5Chart({\n  cords: { x: 18, y: 30 },\n  radius: 30\n});\n```\n\nをECMAScript2015の書き方に修正してください\n\n```js\nfunction drawES6Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {\n  console.log(size, cords, radius);\n}\ndrawES6Chart({\n  cords: { x: 18, y: 30 },\n  radius: 30\n});\n\n// In Firefox, default values for destructuring assignments are not yet implemented (as described below).\n// The workaround is to write the parameters in the following way:\n// ({size: size = 'big', cords: cords = { x: 0, y: 0 }, radius: radius = 25} = {})\n\n```\n\n**問189**\nquerySelectorAll('.child')やdocument.getElementsByTagName('div')で取得したNodeListからArrayにする場合の方法を4つ答えてください。\n\n```js\n//common\nconst nodeList = document.querySelectorAll('.child');\n\n//1\nArray.from(nodeList);\n\n//2\nArray.prototype.slice.call(nodeList);\n\n//3\n[...nodeList];\n\n//4\nObject.keys(nodeList).forEach(function(key){\n  console.log(nodeList[key])//出力\n})\n```\n\n**問190**\nこのような```function add (){console.log(this.x) };```関数ある。新たに変数名objのプロパティとしてx、値5で定義した後、addが参照するthisがobjにbindするように呼び出してください。\n\n```js\n\nfunction add (){console.log(this.x) };\nconst obj = {x: 5};\nadd.apply(obj)\n//5\n```\n\n**問191**\nこのような```function add (y, z){console.log(this.x, y + z ) };```関数がある。この関数に{x:3}にbindさせて、yは5,zは6となるように実行してください。\n\n```js\n//apply\nfunction add (y, z){console.log(this.x, y + z ) };\nadd.apply({x: 3}, [5, 6])\n\n//call\nfunction add (y, z){console.log(this.x, y + z ) };\nadd.call({x: 3}, 5, 6)\n```\n\n**問192**\n\n下のような記述がある。\n\n```js\nconst int = 8;\nconst module = {\n int: 4,\n fn : function(){return this.int;}\n}\n```\n\nmodule.fnを別の変数にbindして呼び出し、4を出力してください。\n\n```js\nconst int = 8;\nconst module = {\n int: 4,\n fn : function(){return this.int;}\n}\nmodule.fn()\n//4\nconst fnn = module.fn\nfnn()\n//8\n\n//bindして呼び出し\nconst fnn = module.fn.bind(module)\nfnn()\n//生成する関数にもともとのthis参照しているオブジェクトを束縛させる必要がある\n```\n\n**問193**\nしたのような記述がある\n\n```js\nfunction list (){\n return Array.prototype.slice.call(arguments);\n}\nlist(2,3,4);\n```\n\nこのままだと返り値が[2,3,4]になるが、インデックス0番目はかならず数値1がsetされ、その後は呼び出し元の値が続く配列を返す関数にしてください。\n\n```\nfunction list (){\n return Array.prototype.slice.call(arguments);\n}\nconst bindedList = list.bind(null, 1);\nbindedList(3,4,5)\n//[1, 3, 4, 5]\n```\n\n**問194**\n```\u003cul id=\"list\"\u003e\u003c/ul\u003e```がある。\ndocument.createFragmentをつかって```const array = [\"Internet Explorer\", \"Mozilla Firefox\", \"Safari\", \"Chrome\", \"Opera\"];```\nがliのtextContentとなるようなDOMを作成してください。\n\n```js\nconst list = document.getElementById('list');\nconst fragment = document.createDocumentFragment();\nconst array = [\"Internet Explorer\", \"Mozilla Firefox\", \"Safari\", \"Chrome\", \"Opera\"];\nconst newnode = array.forEach(function(elem){\n    const li = document.createElement(\"li\");\n    li.textContent = elem;\n    fragment.appendChild(li);\n})\nlist.appendChild(fragment);\n//全てのブラウザで利用可能\n//返り値はDocumentFragmentへの参照。メモリ上に存在\n//DOMツリーに追加するのではないのでリフローが行われない\n```\n\n**問195**\n\n文字列の中で`\\n`があったら全てを`\u003cbr\u003e`に置き換える正規表現を表して`replace`してください\n\n```js\nstr = str.replace(/(?:\\r\\n|\\r|\\n)/g, '\u003cbr\u003e');\n\nsee: [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)\n```\n\n**問196**\nこちらを{g:3, h:4}それぞれg,hにわりあててください\n\n```js\nconst {g,h} = {g:3, h:4};\nconsole.log(g,h)\n//3, 4\n```\n\n**問197**\nローカルストレージとセッションストレージの違いを教えてください.\n\n```js\nデータの保存のされ方が違う\nローカルストレージ\n同じオリジン間で共有されるストレージ。\nブラウザに保存される\nlocalstrageは他のタブ間でもデータが共有される\nあるタブで保存されたデータは即座に違うタブで参照できる\nページを更新して残っている\n\nセッションストレージ\nブラウジングコンテキスト(タブ)に保存される\n異なるタブなら異なるsessionストレージ\n同一タブ内なら保存は維持される\n\n\nストレージ内のデータは文字列\nストレージにオブジェクトは渡せない(JSONを使ってください)\n\n```\n\n**問198**\nローカルストレージのkeyとしてfooを値を\"fafa\"と設定、取得、削除、全てをクリアーにしてください\n\n```js\nlocalStrage.foo = 'fafa';\nlocalStrage.setItem('foo','fafa');\nlocalStrage.getItem('foo');\nlocalStorage.removeItem('foo')\nlocalStorage.clear();\nconst key = localStorage.key(0)\nconsole.log(key + 'のストレージは' + localStorage[key]);\n```\n\n**問199**\n\n```\n```\n\n**問200**\n\n```\n```\n\n\u003c/details\u003e\n\u003cdetails\u003e\u003csummary\u003e問201〜問250\u003c/summary\u003e\n\n**問201**\nローカルストレージの値を存在するだけ列挙してください\n\n```js\nfor (const i = 0; i \u003c localStorage.length; i++){\n  console.log(localStorage.key(i))\n}\n```\n\n**問202**\nローカルストレージに次のようなオブジェクト\n\n```js\nconst dataObj = {\n 'id': 0010,\n 'isFavorite': true\n}\n```\n\nを保存して、取り出してください。\n\n```js\n\n//set\nconst dataObj = {\n    'id' : 0010,\n    'isFavorite' : true\n}\nif (!window.localStorage) {return false};\n//safariのプライベートモードでWebStorageが使えない対応\ntry {\n    localStorage.setItem('dataObj', JSON.stringify(dataObj));\n} catch(e){\n    console.log(e)\n}\n\n//get\nconst getData = JSON.parse(localStorage.getItem('dataObj'));\n\n```\n\n**問203**\n\nこちらのsetTimeoutは実行されない。\n\n```js\nfunction CreateId(id){\n this.id = id;\n}\nCreateId.prototype.get = function(){\n console.log(this.id);\n}\nconst create = new CreateId(10);\ncreate.get()//10\nsetTimeout(create.get, 1000);\n```\n\n修正してください\n\n```js\n//setTimeoutはthisがwindow設定なのでうまくいかない\n//オブジェクトのメソッドはオブジェクトに束縛されているものではなく、その時々の実行コンテキスト(呼び出し部分)において実行される\n//Fix\n\n//1 bind\nsetTimeout(create.get.bind(create), 1000);\n\n//2 Arrow Function\nsetTimeout(()=\u003e {create.get}, 1000);\n```\n\n**問204**\nこちらの\n\n```js\nfunction Person() {\n    const self = this;\n    self.age = 0;\n\n    setInterval(function() {\n        // The callback refers to the `self` variable of which\n        // the value is the expected object.\n        self.age++;\n    }, 1000);\n}\nconst p = new Person();\np\n//{age: 1} //1秒ごとに1足される\n```\n\nsetInterval内のコールバックをアロー関数で記述してください\n\n```js\nfunction Person() {\n    this.age = 0;\n\n    setInterval(() =\u003e {\n        this.age++; // `this` properly refers to the person object\n    }, 1000);\n}\n\nconst p = new Person();\n```\n\n**問205**\n\nこちら\n\n```js\nfunction foo(a, b, c, d){\n console.log([a, b, c, d])\n //or console.log(arguments);\n}\nfoo(1,2,3,4,5)\n//[1, 2, 3, 4]\n```\n\nのような記述ではなく、RestOperatorを使って渡した実引数を要素にする1つの配列で出力してください。\n\n```js\nfunction foo(...args) {\n    console.log(args);\n}\nfoo(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]\n```\n\n**問206**\n\nこちらはSomeClassコンストラクタにインスタンスメソッドをもたせています。\n\n```js\nSomeClass.prototype.someMethod = function (arg1, arg2) {\n    ···\n};\nSomeClass.prototype.anotherMethod = function () {\n    ···\n};\n```\n\nこちらとは違う方法(Object.assignを使った方法)でインスタンスメソッドを定義してください\n\n```js\nObject.assign(SomeClass.prototype, {\n    someMethod(arg1, arg2) {\n        ···\n    },\n    anotherMethod() {\n        ···\n    }\n});\n\n//Object.assing(Someclass.prorotype, {a: fun, b: fun})//コンストラクタをkeyにもつprototypeオブジェクトを返す\n//Object.assing({}, Someclass.prorotype, {a: fun, b: fun})//新たなObjectとして返す\n```\n\n**問207**\n\nこちらは値を割り当てられません。\n\n```js\nconst proto = Object.defineProperty({}, 'prop', {\n    writable: false,\n    configurable: true,\n    value: 123,\n});\nconst obj = Object.create(proto);\nobj.prop = 456;\n// TypeError: Cannot assign to read-only property\nobj.prop\n//123\n```\n\nvalueを書き換えてください\n\n```js\nconst proto = Object.defineProperty({}, 'prop', {\n    writable: false,\n    configurable: true,\n    value: 123,\n});\nconst obj = Object.create(proto);\nObject.defineProperty(obj, 'prop', {value: 456});\nconsole.log(obj.prop); // 456\n```\n\n**問208**\n\n下のようなlocation.searchの返り値を想定した文字列がある。\n'?id=12345\u0026category=script\u0026isname=true’\nこちらのkeyとvalueをオブジェクトにそれぞれ割り当ててください。\n\n期待する結果\n {id: \"12345\", category: \"script\", isname: \"true\"}\n\n```js\nconst locationsearch = '?id=12345\u0026category=script\u0026isname=true';\nconst result = {};\nlocationsearch.substring(1).split(\"\u0026\").forEach(function(ele, i){\n  const key =  ele.split(\"=\");\n   result[key[0]] = decodeURIComponent(key[1]);\n})\n```\n\n**問209**\n\nこのような[1,1,'a','a']配列がある。\n重複している要素をぬいた配列にしてください。\n期待する結果\n//[1,'a']\n\n```js\nconst deduped = [1,1,'a','a'].filter(function(x, i, arr){\n  return arr.indexOf(x) === i;\n})\ndeduped\n//[1,'a']\n\n```\n\n**問210**\nこのような\u003cdiv id='box'\u003e\u003c/div\u003e\nDOMの中に2016年8月27日00時00分00秒から9月11日00時00分00秒まで\u003cspan\u003eセール中\u003c/span\u003eが表示されるようにしてください。\n\n```js\nconst today = new Date();\nconst myD   = today.getTime();\nconst start","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenmori%2Fjavascript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkenmori%2Fjavascript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenmori%2Fjavascript/lists"}