Basics-2

0. template literals : ` ${    } `

const name = 'Richard';
const age = 30;
const job = 'web developer';
const city = 'London';

// without template strings (es5)
html = '<ul><li>name: ' + name + '</li><li>age: ' + age +'</li> <li>job: ' +job+'</li><li>age: '+age+' </li></ul>';

html = '<ul>' + 
        '<li>name: ' + name + '</li>' +
        '<li>age: ' + age + '</li>' +
        '<li>job: ' + job + '</li>' +
        '<li>city: ' + city + '</li>' +
      '</ul>';


function hello(){
  return 'hello';
}
//with template strings (es6)   ${ }
html = `
    <ul>
     <li>name: ${name}</li>
     <li>age: ${age}</li>
     <li>job: ${job}</li>
     <li>city: ${city}</li>

     <li>${10+10}</li>
     <li>${hello()}</li>
     <li>${age > 20 ? 'over 20' : 'under 20'}</li>    
     
    </ul>`;               // ? = then /  : = else

document.body.innerHTML = html;

---

1. Arrays & Array Methods

// create some arrays
const numbers = [43,11,46,23,45,34,4];
const numbers2 = new Array(33,57,13,5,2,55);
const fruit = ['apple', 'banana', 'pear', 'orange'];
const mixed = [22, null, true, undefined, new Date(), {a:1, b:2}];
console.log(mixed);

let val;


//get array length
val = numbers.length;
//check if is array
val = Array.isArray(numbers);
val = Array.isArray('hello');

//get single value
val = numbers[3];

//insert into array
numbers[2] = 100;

//find index of value
val = numbers.indexOf(34);

//mutating arrays 
//add on to end  -> push()
numbers.push(250);
//add on to front -> unshift()
numbers.unshift(0);

//take off from end  -> pop()
numbers.pop();
//take off from front -> shift()
numbers.shift();

//splice values
numbers.splice(1,3);

//reverse
numbers.reverse();


//concatenate array
val = numbers.concat(numbers2);

//sorting arrays
val = fruit.sort();
val = numbers.sort();

// use the "compare function"
//오름차순
val = numbers.sort(function(a,b){
  return a-b;
});

//내림차순
//reverse sort
val = numbers.sort(function(a,b){
  return b-a;
});

//find
function under50(num){
  return num <50;
}
val = numbers.find(under50);

console.log(numbers);
console.log(val);

---

2. Object Literals

const person ={
  firstName: 'mike',
  lastName: 'jonson',
  age: 35,
  hobbies: ['music', 'sports'],
  email: 'mikejonson@gmail.com',
  address: {
    city: 'london',
    country: 'uk',
  },
  getBirthYear: function(){
    return 2021 - this.age;

  }

}

let val
val = person;

//get specific value
val = person.firstName;
val = person['firstName'];
val = person.age;
val = person.hobbies[1];
val = person.address.country;
val = person.getBirthYear();
console.log(val);

const people = [
  {name: 'hane', age:30},
  {name: 'gaga', age:25},
  {name: 'nancy', age:40}

];

for(let i=0; i<people.length; i++){
  console.log(people[i].name);
}

---

3. dates & time

- Date( )

let val;

const today = new Date();
let birthday = new Date('9-16-2000 11:20:00');    // Date('월-일-년 시:분:초')
birthday = new Date('september-16-2000 11:20:00');  
birthday = new Date('9/10/1999');     //Date('월/일/년')
val = today;

console.log(val);        
console.log(typeof val);         //object

 

- .get_____( )

let val;
const today = new Date();

val = today.getMonth();   // 월을 0부터 센다. 주의할것!
val = today.getDate();  // 일은 그대로임
val = today.getDay();   // 일요일 = 0부터 센다
val = today.getFullYear();
val = today.getHours();
val = today.getMinutes();
val = today.getSeconds();
val = today.getMilliseconds();
val = today.getTime();

console.log(val);


let birthday = new Date('12/10/1999');

birthday.setMonth(2);
birthday.setDate(12);
birthday.setFullYear(2021);
birthday.setHours(5);
birthday.setMinutes(50);
birthday.getSeconds(20);

console.log(birthday);       

---

4. if statements & comparison operators

- 느슨한 같음 ==
: 문자형이 달라도 사실상 내용이 같다면 T를 출력함

if(something){
   do something
 }
else {
   do something else
 }


// * 숫자비교할때만 가능하다. 문자비교는 불가능
const id = 100;

//equal to  ==
if(id ==100){
  console.log('correct');
}
else {
  console.log('incorrect');
}                                      //correct출력

// NOT equal to  !=
if(id !=100){
  console.log('correct');
}
else {
  console.log('incorrect');
}                                 //incorrect출력

- 엄격한 같음 ===
: 문자형까지 같아야 T이다

const id = '100';

//equal to value & type  ===  
if(id ===100){
  console.log('correct');
}
else {
  console.log('incorrect');
}                                     //incorrect 출력


// Not equal to value & type  !== 
if(id !==100){
  console.log('correct');
}
else {
  console.log('incorrect');
}                                    //correct 출력  

 

 

- testing if its undefined

//const id = '100';
if(typeof id !== 'undefined'){
  console.log(`the id is ${id}`);       //${} :template literal
}
else{
  console.log('no id');
}

 

- AND : &&

const name = 'richard';
const age = 15;

if(age > 0 && age <12){
  console.log(`${name} is a child`);
}
else if(age>=13 && age<=19){
  console.log(`${name} is a teenager`);
}
else {
  console.log(`${name} is an adult`);
}                                               //richard is a teenager

 

- OR ||

// OR ||
const name = 'richard';
const age = 50;

if(age<16 || age >65){
  console.log(`${name} can not run in race`);
}
else {
  console.log(`${name} is registerd for race`);
}                                                   // richard is registerd for race

 

- Ternary operator    ?  &   : 

const id = 100;
console.log(id === 100 ? 'correct' : 'incorrect');

? => if then  /  : => else

+ if문에서 [] or {}는 안써도 되지만, 쓰는것을 추천함.
 

5. Switch( ) { }

const color = 'yellow';

switch(color){
  case 'red':
    console.log('color is red');
    break;
  case 'blue':
    console.log('color is blue');
    break;
  default:
    console.log('color is not red or blue');
    break;
}

let day;
switch(new Date().getDay()){
  case 0:
    day = 'Sunday';
    break;
  case 1:
    day = 'monday';
    break;
  case 2:
    day = 'tuesday';
    break;
  case 3:
    day = 'wednesday';
    break;
  case 4:
    day = 'thursday';
    break;
  case 5:
    day = 'friday';
    break;
  case 6:
    day = 'saturday';
    break;
}
console.log(`today is ${day}`);