JavaScript Crash Course

Умовні конструкції та об'єкти

2

Зміст:

  1. Умовні конструкції
  2. switch ... case
  3. Об'єкти в JavaScript
  4. Створення та модифікація
  5. Методи для роботи з об'єктами
  6. Використання об'єктів

Умовні конструкції

Умовні оператори в JavaScript

Умовні оператори - це конструкція мови програмування, що забезпечує виконання певної операції (команд/інструкцій) тільки в випадку, якщо умова являється істинною (true)

 

ЯКЩО: (умова)

ТОДІ: виконати дану серію інструкцій

ІНАКШЕ: виконати іншу серію інструкцій

 

Приклади:

const a = 10;
const b = 100;
const c = 3;

// example with if
if (a === 10) {
   console.log("a is equal 10");
}

// example with if..else
if (b > 1) {
   console.log("b is bigger than 1");
} else {
   console.log("b is smaller than 1");
}

// example with else...if
if (c > 1) {
   console.log("c is bigger than 1");
} else if (c == 10) {
   console.log("c is equal 10");
} else {
   console.log("c is smaller than 1");
}

 Тернарний оператор

Використовуються, коли потрібно порівняти значення змінною і в залежності від результату (true/false) виконати тут чи іншу операцію

  Приклад:

const MATH_PI = 3.14;
const radius = 10;
const formula = 'circumference';


// ternary
const result = formula === 'circumference'
	? MATH_PI * (2 * radius)
	: MATH_PI * (radius * radius);

switch...case

switch...case в JavaScript

Оператор багатозначного вибору - це конструкція мови програмування, що дозволяє врахувати більшу кількість умов

 

Приклад:

const day = "1";

switch (day) {
  case "1": {
      console.log("It is Monday");
  } 
  break;
    
  case "2": {
      console.log("It is Tuesday");
  } 
  break;
    
  case "3": {
      console.log("It is Wednesday");
  } 
  break;
    
  default: {
      console.log("It is true");
  } 
}

Об'єкти в JavaScript

Що таке об'єкт в JavaScript?

     Об'єкти JavaScript - це набори властивостей і методів. Властивості об'єктів — це дані, пов'язанні з об'єктом, а методи — функції для опрацювання даних об'єкта. Адресація (посилання) властивостей у сценаріях JavaScript можлива або за назвами, або за номерами.

Приклад:

// Dog object

const dog = {
    name: 'Teddy', // property
    age: 3,
    hasHotDog: true,
    speak: () => console.log("Woof!"), // method
}

console.log("The Dog name is ", dog.name);
console.log("The Dog age is ", dog.age);

if (dog.hasHotDog) {
   console.log("The Dog has Hot Dog");
}

dog.speak()

Створення та модифікація

Як створити об'єкт?

Існує декілька варіантів, як можна створити новий об'єкт

// create with an object literal
const dog1 = { };

// with properties
const dog2 = { 
   friendly: true,
   speak: () => console.log("Woof! Woof!"),
};

// with constructor
const dog3 = new Object();

Розширення об'єкта новими властивостями

const dog = { 
   friendly: true,
   speak: () => console.log("Woof! Woof!"),
};

 // adding new property name
dog.name = "Rex";
// adding new method
dog["run"] = () => console.log("Run");

Редагування властивостей об'єкта

const dog = { 
   name: 'Teddy',
   friendly: true,
   speak: () => console.log("Woof! Woof!"),
   likeCats: false
};

 // adding a new property name
dog.name = "Rex";

// removing a property
delete dog.likeCats;

Методи для роботи з об'єктами

Основні методи для роботи з об'єктами

  • obj.valueOf()  - повертає примітивне значення зазначеного об’єкта

 

  • obj.toString() - повертає рядкове представлення об'єкта

 

  • obj.hasOwnProperty('propName') - повертає логічне значення (true/false), яке вказує, чи містить об’єкт вказану властивість як пряму властивість цього об’єкта, а не успадковується через ланцюжок прототипів

Приклади:

const dog = { 
   friendly: true,
   speak: () => console.log("Woof! Woof!"),
};

// Returns the primitive value of the specified object.
// Result - {friendly: true, speak: ƒ}
dog.valueOf();

// Check, if has property
// Result - true
dog.hasOwnProperty('speak');

// Check, if has property
// Result - false
dog.hasOwnProperty('likesIcecream');

// Get string representation of an object
dog.toString();

Статичні методи Object

  • Object.assign(obj)  - копіює значення всіх перерахованих власних властивостей з одного або декількох вихідних об’єктів на цільовий об’єкт;
  • Object.create(obj) - створює новий об’єкт із зазначеним об’єктом -прототипом та властивостями;
  • Object.entries(obj) - повертає масив, що містить усі пари [ключ, значення] власних перерахованих рядкових властивостей даного об’єкта;
  • Object.freeze(obj)  - заморожує об’єкт. Інший код не може видалити або змінити його властивості
  • Object.keys(obj) - повертає масив, що містить імена всіх власних властивостей даного об’єкта;
  • Object.isFrozen(obj), Object.isExtensible(obj)

...та інші

Приклади Object.assign() 

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

Приклади Object.create() 

const person = {
  isHuman: false,
  printIntroduction: function() {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};

const Mat = Object.create(person);

Mat.name = 'Matthew'; // "name" is a property set on "me", but not on "person"
Mat.isHuman = true; // inherited properties can be overwritten

Mat.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"

Приклади Object.entries() 

const object1 = {
  a: 'somestring',
  b: 42
};

for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

// expected output:
// "a: somestring"
// "b: 42"

Приклади Object.freeze() 

const obj = {
  prop: 42
};

Object.freeze(obj);

obj.prop = 33;
// Throws an error in strict mode

console.log(obj.prop);
// expected output: 42

Приклади Object.keys() 

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]

Використання об'єктів

Де використовуються об'єкти?

Так як об'кти дозволяють групувати певні властивості, їх використовуються для:

- базової конфігурації

- опису об'єкта/предмета/сутності

- набір константних значень

- в функціях-конструкторах

Приклади:

const testConfiguration = { 
   module: 'Users',
   version: '1.0.0',
   submit: () => console.log("Submit action"),
   validate: () => console.log("Validate action"),
};

const testFn = () => {
  if (testConfiguration.module === 'Users') {
    testConfiguration.validate();
    testConfiguration.submit();
  }
}

Приклади:

const dog = { 
   friendly: true,
   speak: () => console.log("Woof! Woof!"),
};

// reuse and extend dog properties for dog Teddy
const Teddy = Object.assign({}, dog);
Teddy.name = 'Teddy';

// reuse and extend dog properties for dog Rex
const Rex = Object.assign({}, dog);
Rex.name = 'Rex';

Q & A

4 JavaScript Crash Course

By Inna Ivashchuk

4 JavaScript Crash Course

  • 508

More from Inna Ivashchuk