【初心者】あなたがJavaScriptの基礎を習得できているか判断するための練習問題（随時更新）

# はじめに
 ~~随分とおせっかいな煽りタイトルですが~~ プロゲートやドットインストールなどでJavaScriptの基礎を学ぶだけではReactやVueなどのライブラリ・フレームワークなどの学習で躓いてしまうことでしょう。これからReactやVueを学ぶ方向けにJavaScriptの基礎を確認できる問題を用意しました。

[解答](#解答編)は一番下にまとめてあります！

# ターゲット
 - 「JavaScriptの基礎を一通り学んだからReactやVueの勉強に移るか！」と考えている方
 - React,Vueなどの勉強をしているが、「ReactやVueではなくJavaScriptが分かってないよ」と言われてしまった方

# 問題編

## レベル1
### 1-1
下のコードを実行すると何が表示されるか？

```javascript
let name = "TBSten" ;
if(name === "TBSten"){
 console.log("ok");
}else{
 console.log("no");
}
```

### 1-2
下のコードを実行すると何が表示されるか？

```javascript
for(let i = 0;i < 10;i+=2){
  console.log(i);
}
```

### 1-3
下のコードを実行すると何が表示されるか？

```javascript
const user = {
 name:"TBSten",
 old:30,
} ;
if(user >= 18){
 console.log("成人");
}else{
 console.log("子供");
}

```

### 1-4
下のコードを実行すると何が表示されるか？

```javascript
try{
 const x = 100 / 0 ;
 console.log(x);
}catch(e){
 console.log(e);
}
```

## レベル2
### 2-1
下のコードを実行すると何が表示されるか？

```html:index.html
<html>
<head></head>
<body>
  <div id="test">
    TEST-1
  </div>
  TEST-2
</body>
<script src="index.js"></script>
</html>
```

```javascript:index.js
const $test = document.getElementById("test");
console.log( $test.innerHTML ) ;
```

### 2-2
下のコードを実行すると何が起こるか？

```html:index.html
<html>
<head></head>
<body>
  <div id="test">
    TEST-1
  </div>
  TEST-2

  <button id="btn">PUSH</button>

</body>
<script src="index.js"></script>
</html>
```

```javascript:index.js
const $btn = document.getElementById("btn");
const $test = document.getElementById("test");

$btn.addEventListener("click",(e)=>{
 console.log(e.target.innerHTML);
});
```


### 2-3
下のコードを実行すると何が起こるか？

```html:index.html(2-2と同じ)
<html>
<head></head>
<body>
  <div id="test">
    TEST-1
  </div>
  TEST-2

  <button id="btn">PUSH</button>

</body>
<script src="index.js"></script>
</html>
```

```javascript:index.js
const $btn = document.getElementById("btn");
const $test = document.getElementById("test");

$btn.addEventListener("click",(e)=>{
 $test.innerHTML = "CLICKED!" ;
 e.target.disabled = false ;
 console.log("clicked");
});
```

## レベル3
### 3-1
下のコードを実行すると何が表示されるか？

```javascript
const arr = ["a","b","c"] ;
console.log(arr[1]);
console.log(arr[2]);
```

### 3-2
下のコードを実行すると何が表示されるか？
(適宜メソッドなどを調べてもいい)

```javascript
const arr = ["a","b","c"] ;
arr.forEach(e=>{
 console.log("element :"+e);
})
```

### 3-3
下のコードを実行すると何が表示されるか？
(適宜メソッドなどを調べてもいい)

```javascript
const arr = ["a","b","c"] ;
console.log(
 arr.map((e,i)=>{
  console.log(`arr[${i}] = ${e}`);
  return e ;
 })
);
```

### 3-4
下のコードを実行して以下のように表示したい。
（1）～（4）に当てはまるものを答えよ。

```javascript:実行結果
"a"
"b"
"c"
"d"
"e"
```

(適宜メソッドなどを調べてもいい)

```javascript
const arr = ["a","b","c"] ;
arr.（1）("d")
arr.（2）("e")

arr.（3）((e)=>{
 console.log( （4） );
});

```

### 3-5
下のコードを実行すると何が表示されるか？
(適宜メソッドなどを調べてもいい)

```javascript
const arr1 = ["a","b","c"] ;
const arr2 = [1,2] ;
const arr3 = [...arr1,arr2];
console.log(arr3);
```


## レベル4
### 4-1
下のコードを実行すると何が表示されるか？
(適宜メソッドなどを調べてもいい)

```javascript
const ob1 = {
 name:"TBS",
} ;
const ob2 = {
 name:"TBS",
} ;
console.log(ob1 == ob2);
console.log(ob1 === ob2);
```

### 4-2
下のコードを実行すると何が表示されるか？
(適宜メソッドなどを調べてもいい)

```javascript
class User{
 constructor(name,old){
  this.name = name ;
  this.old = old ;
 }
 greet(){
  console.log(`my name is ${ this.name } . `);
  console.log(`i am  ${ this.old } years old . `);
 }
}

const tbsten = new User("TBSten",300) ;
console.log(tbsten);
console.log(tbsten.firstname);
tbsten.greet();

```

### 4-3
下のコードを実行すると何が表示されるか？

```javascript
const ob1 = {
 name:"てすと",
 old:60,
} ;

const ob2 = {
 name:"TBSten",
 point:300,
};
const ob3 = {
 ...ob1,
 ...ob2
};
console.log(ob3);
```


## レベル5
### 5-1
下のコードを実行すると何が表示されるか？
(適宜メソッドなどを調べてもいい)

```javascript
function add(a,b){
  console.log(a,"+",b);
  return a + b ;
}

console.log( add ) ;
console.log( add(1,2) ) ;
console.log( add(10+20,30+40) ) ;

```

### 5-2
下のコードを実行すると何が表示されるか？
(適宜メソッドなどを調べてもいい)

```javascript
function input(name){
 name = "TBSten" ;
}

let name = "" ;
input(name);
console.log(name);

```

### 5-3
下のコードを実行すると何が表示されるか？
(適宜メソッドなどを調べてもいい)

```javascript
console.log( Math.floor(Math.random()*100)+10 );
```

### 5-4
コード1をコード2,3に書き換えたい。（1）～（5）に当てはまるものを答えよ。

```javascript:コード1
function test1(a,b){
 return a+b;
}
console.log( test1(10,20) );
```
```javascript:コード2
const test1 = (a,b)=>{
 （1）
}
console.log( （2） );
```
```javascript:コード3
const test1 = function( （3） ){
 （4）
}
console.log( （5） );
```

### 5-5
下のコードを実行すると何が起こるか？
(適宜メソッドなどを調べてもいい)

```javascript
setInterval(()=>{
 function test(){
  console.log("test");
 }
 test();
},3000);
```

### 5-6
(a)~(e)を実行される順に並べかえよ。
(適宜メソッドなどを調べてもいい)

```javascript
(a)
setInterval(()=>{
 (b)
 function test(){
  (c)
 }
 (d)
},3000);
(e)
```

### 5-7

下のコードを実行すると何が表示されるか？

```javascript

function f1(v){
  console.log("f1",v);
  return v+1;
}
function f2(v){
  console.log("f2",v);
  return v*2;
}
function f3(v){
  console.log("f3",v);
  return v-10;
}
console.log("ans " , f1( f2( f3(30) ) ) );

```


## レベル6
### 6-1
下のコードを実行すると何が表示されるか？
(適宜メソッドなどを調べてもいい)

```javascript
async function test1(){
 return "OK" ;
}
console.log(test1());
```

### 6-2
下のコードを実行すると何が表示されるか？
(適宜メソッドなどを調べてもいい)

```javascript
async function test1(){
 return "OK" ;
}

test1.then((res)=>{
 console.log(res)
})
```

### 6-3
下のコードを実行すると何がおこるか予測しなさい。
(適宜メソッドなどを調べてもいい)

```javascript
(async function(){
 //ユーザー情報をデータベースから取得
 const res = await getUserData();
 console.log(res.name);
})();


```

### 6-4
下のコード中のgetUserData関数の処理内容を推測せよ。

```javascript
function getUserData(){
 return new Promise((res,rej)=>{
  try{
   const res = await fetch("https://test.com/api");
   const json = await res.json();
   res(json);
  }catch(e){
   rej(e);
  }
 });
}
```



# 解答編
### 1-1

```:javascript
ok
```

### 1-2

```:javascript
0
2
4
6
8
```

### 1-3

エラーが発生する。
（5行目で オブジェクト と 数字 を比較演算子で比較しているため）

### 1-4

エラーが表示される。
（2行目で0で割り算しようとしているから）

### 2-1

```:javascript
TEST-1
```

### 2-2

ボタンが押されたときに"PUSH"が表示される。

### 2-3

ボタンが押されたとき、以下の処理が起こる。
 - idが"test"の要素の中が"CLICKED"に書き換わる
 - ボタンがクリックできなくなる
 - "clicked"と表示される

### 3-1

```javascript
b
c
```

### 3-2

```javascript
element :a
element :b
element :c
```

### 3-3

```javascript
arr[0] = a
arr[0] = b
arr[0] = c
["a","b","c"]
```

### 3-4

```javascript
（1） : push
（2） : push
（3） : forEach
（4） : e
```

### 3-5

```javascript
["a","b","c", [1,2] ]
```

### 4-1

```javascript
false
false
```

### 4-2

```javascript
{ name:"TBSten", old:300 }
undefined
my name is TBSten .
i am 300 years old .
```

### 4-3

```javascript
{ name:"TBSten", old:60, point:300 }
```

### 5-1

```javascript
add f(){}
1+2
3
30+70
100
```

※1行目はブラウザによって差異がありますが関数自体が表示されることがポイントです。

### 5-2

```javascript
(空白文字)
```

※何も表示されません

### 5-3

10以上110未満の整数

### 5-4

```javascript
（1） : return a+b ;
（2） : test1(10,20)
（3） : a,b
（4） : return a+b ;
（5） : test1(10,20)
```

### 5-5

3秒に1回"test"と表示される

### 5-6

a, e, b, d
(cは実行されない)

# 5-7

```javascript
f3 30
f2 20
f1 40
ans 41
```

### 6-1

Promiseオブジェクト

### 6-2

```javascript
OK
```

### 6-3

データベースからユーザ情報を取得してユーザ名を表示する

### 6-4

"https://test.com/api" からデータをJSON形式で取得する。



# 終わりに

全問解けたあなた・・・こんな記事見てないでもっと勉強することがあるはずです。

半分くらい解けたあなた・・・この調子でいろいろなライブラリ・フレームワークに触れてみてください！

何も解けなかったあなた・・・察してください