TIL no.10 Basic JavaScript 2

• argument는 함수 혹은 메서드를 호출할 때, 전달 혹은 입력되는 실제 값, 반면 parameter는 함수 혹은 메서드 정의에서 나열되는 변수 이름
• scope: visibility of variables. 함수 블록 바깥에서 정의되는 global scope이며, 이는 자바스크립트 코드의 어디서나 쓰일 수 있다. 함수 안에서 정의되거나 함수의 파라미터는 local scope이며, 이는 함수 안에서만 쓰일 수 있다.
• 함수에서 return은 함수 바깥으로 값을 내보내는 기능을 한다. 꼭 쓰여질 필요는 없지만 return이 없을 때, 그 함수를 호출하면 코드는 실행되지만 return 값은 undefined.

return이 있을 때
function plusThree(num) {
  return num + 3;
}
var answer = plusThree(5); // 8

return이 없을 때
var sum = 0;
function addSum(num) {
  sum = sum + num;
}
addSum(3); // sum will be modified but returned value is undefined

• 자바스크립트에서는 두 개의 다른 데이터 타입을 비교하기 위해서는 하나의 타입으로 통일시켜야 한다.

== equality operator (type conversion O)
1   ==  1   // true
1   ==  2   // false
1   == '1'  // true
"3" ==  3   // true

=== strict equality operator (type conversion X)
3 ===  3   // true
3 === '3'  // false

!== strict inequality operator (type conversion X)
3 !==  3   // false
3 !== '3'  // true
4 !==  3   // true

> greater than operator (type conversion O)
5   >  3   // true
7   > '3'  // true
2   >  3   // false
'1' >  9   // false

>= greater than or equal to operator (type conversion O)
6   >=  6   // true
7   >= '3'  // true
2   >=  3   // false
'7' >=  9   // false

< less than operator (type conversion O)
2   < 5  // true
'3' < 7  // true
5   < 5  // false
3   < 2  // false
'8' < 4  // false

<= less than or equal to operator (type conversion O)
4   <= 5  // true
'7' <= 7  // true
5   <= 5  // true
3   <= 2  // false
'8' <= 4  // false

• typeof: 변수나 값의 타입을 결정지을 수 있다.

typeof 3   // returns 'number'
typeof '3' // returns 'string'

• &&: logical and operator, ||: logical or operator
• 보통은 if의 조건이 false일 때는 아무것도 일어나지 않는다. else는 if가 false일 때 대안의 코드가 실행되며, else if는 여러 조건을 필요로 할 때 쓰인다.
• if와 else if의 순서는 중요하다. 함수는 위에서 아래로 실행되므로 어떤 걸 먼저 쓰느냐에 주의해야한다.

function foo(x) {
  if (x < 1) {
    return "Less than one";
  } else if (x < 2) {
    return "Less than two";
  } else {
    return "Greater than or equal to two";
  }
}

function bar(x) {
  if (x < 2) {
    return "Less than two";
  } else if (x < 1) {
    return "Less than one";
  } else {
    return "Greater than or equal to two";
  }
}

foo(0) // "Less than one"
bar(0) // "Less than two"

• switch: 선택할 옵션이 많을 때 사용한다. A switch statement tests a value and can have many case statements which define various possible values. Statements are executed from the first matched case value until a break is encountered. case values are tested with strict equality (===). The break tells JavaScript to stop executing statements. If the break is omitted, the next statement will be executed.

switch(lowercaseLetter) {
  case "a":
    console.log("A");
    break;
  case "b":
    console.log("B");
    break;
}

• switch에서는 디폴트 값을 설정할 수 있다. 매칭되는 케이스가 없을 때 디폴트 값이 실행된다. 마치 if/else 문에서 파이널 else라고 생각하면 될 것 같다. 디폴트 선언은 마지막 케이스가 되어야 한다.

function switchOfStuff(val) {
  var answer = "";

  switch (val) {
    case "a":
      answer = "apple";
      break;
    case "b":
      answer = "bird";
      break;
    case "c":
      answer = "cat";
      break;
    default:
      answer = "stuff";
  }

  return answer;
}

• switch에서 케이스들의 결과 값이 동일할 때

switch(val) {
  case 1:
  case 2:
  case 3:
    result = "1, 2, or 3";
    break;
  case 4:
    result = "4 alone";
}

• Returning Boolean Values from Functions

비교를 위해 if/else를 쓰는 경우
function isEqual(a,b) {
  if (a === b) {
    return true;
  } else {
    return false;
  }
}

comparison operator는 boolean값을 리턴힌다
function isEqual(a,b) {
  return a === b;
}

• object는 어레이와 비슷하다. 데이터를 수정하고 데이터에 접근하기 위해서 인덱스를 사용하는 것과는 다르게, 오브젝트에서는 property라고 불리는 것을 통해 접근할 수 있다. 오브젝트는 structured way로 데이터를 저장할 수 있다는 장점이 있다.
  property는 스트링 혹은 숫자로 사용한다. 한 단어일 경우에는 따옴표를 생략할 수 있다. 만약 오브젝트가 모두 non-string property로 이루어졌다면, 자바스크립트가 자동적으로 그들을 스트링으로 만들 것이다.

var anotherObject = {
  make: "Ford",
  5: "five",
  "model": "focus"
};

• object property에 접근하는 방법은 .과 []이 있다. 어레이와 유사하다.

.은 프로퍼티의 이름을 알 때 사용
var myObj = {
  prop1: "val1",
  prop2: "val2"
};
var prop1val = myObj.prop1; // val1
var prop2val = myObj.prop2; // val2

[]은 프로퍼티 이름에 스페이스가 있을 때 사용. 물론 스페이스 없을 때도 사용 가능. 여기서 프로퍼티 이름에는 반드시 따옴표가 있어야함.
var myObj = {
  "Space Name": "Kirk",
  "More Space": "Spock",
  "NoSpace": "USS Enterprise"
};
myObj["Space Name"]; // Kirk
myObj['More Space']; // Spock
myObj["NoSpace"];    // USS Enterprise

[]은 프로퍼티에 접근할 때 변수를 쓰는 경우에도 사용된다.
var dogs = {
  Fido: "Mutt",  Hunter: "Doberman",  Snoopie: "Beagle"
};
var myDog = "Hunter";
var myBreed = dogs[myDog];
console.log(myBreed); // "Doberman"

• object property를 업데이트 할 때에는 . 혹은 []를 쓴다.

Let's change her name from "Coder" to "Happy Coder"
var myDog = {
  "name": "Coder",
  "legs": 4,
  "tails": 1,
  "friends": ["freeCodeCamp Campers"]
};

myDog.name = "Happy Coder";
myDog["name"] = "Happy Coder";

• object propety를 추가할 때도 . 혹은 []를 쓴다.

var ourDog = {
  "name": "Camper",
  "legs": 4,
  "tails": 1,
  "friends": ["everything!"]
};

ourDog.bark = "bow-wow";
outDog["bark"] = "bow-wow";

• object property를 삭제할 때도 . 혹은 []를 쓴다.

var ourDog = {
  "name": "Camper",
  "legs": 4,
  "tails": 1,
  "friends": ["everything!"],
  "bark": "bow-wow"
};

delete ourDog.bark;
delete ourDog["bark"];

• 오브젝트는 키와 밸류의 저장소이다. 마치 사전과 같다. 만약 표로 이루어진 데이터를 가질 때, 값을 찾기 위해 오브젝트를 이용할 수 있다. 스위치나 if/else문 보다 유용하다. 이 방법은 입력값이 특정 범위로 제한될 때 아주 유용하다.

switch statement로 charlie프로퍼티의 값 찾기
function phoneticLookup(val) {
  var result = "";
  
  switch(val) {
    case "alpha":
      result = "Adams";
      break;
    case "bravo":
      result = "Boston";
      break;
    case "charlie":
      result = "Chicago";
      break;
    case "delta":
      result = "Denver";
      break;
    case "echo":
      result = "Easy";
      break;
    case "foxtrot":
      result = "Frank";
  }
  return result;
}

phoneticLookup("charlie");

위보다 훨씬 유용한 object로 값 검색하기.
function phoneticLookup(val) {
  var result = "";
  var lookup = {
    "alpha": "Adams",
    "bravo": "Boston",
    "charlie": "Chicago",
    "delta": "Denver",
    "echo": "Easy",
    "foxtrot": "Frank"
  };
// After converting our case statements into object properties you can make use of the variable `result` to let the function return the correct value.

  result = lookup[val];
  return result;
  
phoneticLookup("charlie");

• 오브젝트 안에 주어진 프로퍼티가 있는지 없는지 .hasOwnProperty(propname)으로 확인할 수 있다. true/false 값을 갖게 된다.

var myObj = {
  top: "hat",
  bottom: "pants"
};
myObj.hasOwnProperty("top");    // true
myObj.hasOwnProperty("middle"); // false

• Accessing Nested Objects: .과 []를 함께 써서 접근한다.

var ourStorage = {
  "desk": {
    "drawer": "stapler"
  },
  "cabinet": {
    "top drawer": { 
      "folder1": "a file",
      "folder2": "secrets"
    },
    "bottom drawer": "soda"
  }
};
ourStorage.cabinet["top drawer"].folder2;  // "secrets"
ourStorage.desk.drawer; // "stapler"

• Accessing Nested Arrays

var ourPets = [
  {
    animalType: "cat",
    names: [
      "Meowzer",
      "Fluffy",
      "Kit-Cat"
    ]
  },
  {
    animalType: "dog",
    names: [
      "Spot",
      "Bowser",
      "Frankie"
    ]
  }
];
ourPets[0].names[1]; // "Fluffy"
ourPets[1].names[0]; // "Spot"