JavaScript関数/オブジェクト/配列

参考資料:https://www.youtube.com/watch?v=KF6t61yuPCY
10.関数
関数の定義
関数のキーワード:function
関数名:sayHello
パラメータ:name

function sayHello(name){
  console.log(`Hello, ${name}`);
}

関数の使用
関数名として使用(パラメータ)

sayHello("Mike");

関数の使用1
function showErrorを定義し、関数showError()を使用します.

function showError(){
  alert('에러가 발생했습니다. 새로고침 해주세요.');
}

showError();

関数の使用状況2-パラメータ
関数の定義時に使用可能なパラメータ
パラメータ付き関数を呼び出すときにパラメータなしで呼び出す(Hello)

function sayHello(name){
  let msg = `Hello`;
  if(name){
    msg += `, ${name}`;
  }
  console.log(msg);
}

sayHello(); // Hello
sayHello('Tom'); // Hello, Tom

関数を利用した3つのグローバル変数、領域変数
グローバル変数(global variable)、関数の外部で変数を宣言する
関数で宣言される変数は、領域変数(localvariable)です.

let msg = "welcome"; //전역 변수(global variable)
console.log(msg) // welcoㅡe

function sayHello(name){
  let msg = "Hello" //지역 변수(local variable)
  console.log(msg + ' ' + name); 
}
sayHello('Mike'); // Hello Mike

console.log(msg) // welcome

使用関数の活用4-default値
関数のパラメータを定義する場合、=シンボルはdefault値を指定できます.

function sayHello(name = 'friend'){ // default 값 지정
   let msg = `Hello, ${name}`;
  console.log(msg);
}

sayHello(); // Hello, friend
sayHello('Jane'); // Hello, Jane

使用関数の活用5-戻り値
関数の戻り値を指定できます
returnを定義していない関数のreturn値はundefinedです.

function add(num1, num2){
  return num1 + num2;
}
const result = add(1, 2);
console.log(result); //3

function showError(){
  alert('에러가 발생했습니다.');
}
const result2 = showError();
console.log(result2); //undefined

整理する
関数は、1つのタスクに集中するために使用されます.
関数の名前と操作を読みやすくするために名前を付けます.
11.関数式、矢印関数
関数宣言
随所に呼び出す

sayHello(); // hoisting 덕분에 함수 선언 전 호출 가능
function sayHello(){ console.log('Hello'); }
sayHello(); // 함수 선언 후 호출 가능

関数式
コードに到達してから呼び出す

let sayHello = function(){ console.log('Hello'); }
sayHello(); // 함수 선언 후 호출 가능

矢印関数
矢印関数を使用して関数定義を減らすことができます
関数キーの減算
=>(矢印関数)記号の挿入
関数で実行されるコードが1行しかない場合は、カッコで置き換えることができます.

let add = function(num1, num2){return num1+num2;}
let add = (num1,num2) => (num1+num2;)

12.オブジェクト
オブジェクトの基本
オブジェクトは括弧で複数の変数を定義できます
オブジェクトにアクセスするときのポイントまたはかっこの使用
オブジェクトを追加するときに等号またはかっこを使用する
オブジェクトの削除時にdeleteキーを使用する

const superman = {
  name:'clark',
  age:33,
}

superman.name //'clark' // dot을 이용한 접근
superman['age'] //33    // 대괄호를 이용한 접근

superman.gender = 'male'; // equal을 이용한 추가
superman['hairColor'] = 'black'; // 대괄호를 이용한 추가

delete superman.hairColor;// delete 키워드를 이용한 삭제

関数を使用したオブジェクトの定義

function makeObject(name, age){
  return {
    name,
    age,
    hobby : 'football'
  }
}

const Mike = makeObject('Mike', 30);
console.log(Mike);

console.log('age' in Mike); //true
console.log('birthday' in Mike); //false

使用

function isAdult(user){
  if(!('age' in user) || //user에 age가 없거나
     user.age < 20){ //20살 미만이면
    return false;
  } 
   return true;
}

const Mike = {
  name : 'Mike',
  age : 30
}

const Jane = {
  name : 'Jane'
}

console.log(isAdult(Mike));
console.log(isAdult(Jane));

文でのinの使用

const Mike = {
  name : 'Mike',
  age : 30
};

for(x in Mike){ //Mike에 있는 key 값들 개수만큼 반복
  console.log(Mike[x]); //"Mike", 30
}

13.オブジェクト(Object)-メソッド、this
メソッドは、オブジェクトプロパティとして割り当てられた関数です.
これはオブジェクトを指します(矢印関数に注意)

let boy = {
 name : 'Mike',
 showName : function(){
   console.log(this.name) //this는 해당 객체를 가리킴
 }
};

let man = boy;
boy = null;
man.showName();

オブジェクトの作成方法で矢印関数を使用しないことをお勧めします.

let boy = {
 name : 'Mike',
 sayThis : () => {
   console.log(this) //화살표 함수에서 this는 window 전역 객체를 가리킴
 }
};

boy.sayThis(); //window

14.アレイ(Array)
順序付きリスト
パターンフィーチャー
配列をかっこで囲み、カンマで区切る
配列順序0から開始
アルファベット、数値、オブジェクト、関数を含めることができます.
length
配列の長さを表す
push/pop
配列の最後に要素を追加/削除
shift/unshift
配列の先頭の追加/削除
forの使用例

let days = ['월', '화', '수'];

for(let index = 0; index < days.length; index++){
  console.log(days[index]); // '월' / '화' / '수'
}

for...使用例

let days = ['월', '화', '수'];

for(let day of days){
  console.log(day); // '월' / '화' / '수'
}