TIL-20220627

__flow__·2022년 6월 26일

목록 보기

3/49

JavaScript

(MDN) Conditional (ternary) operator

condition ? exprIfTrue : exprIfFalse

var age = 26;
var beverage = (age >= 26) ? "Beer" : "Juice";
console.log(beverage); // "Beer"

let greeting = person => {
  let name = person ? person.name : `stranger`
  return `Howdy, ${name}`
}

console.log(greeting({name: `Alice`})); // "Howdy, Alice"
console.log(greeting(null)); // "Howdy, stranger"

falcy -> null, undefined, 0, "", NaN

(MDN) constructor

The constructor method is a special method of a class for creating and initializing an object instance of that class.

class Polygon {
	constructor() {
    	this.name = 'Polygon';
    }
}

const poly1 = new Polygon();

console.log(poly1.name);
// expected output: "Polygon"

A constructor enables you to provide any custom initialization that must be done before any other methods can be called on an instantiated object.

If you don't provide your own constructor, then a default constructor will be supplied for you. If your class is a base class, the default constructor is empty:

constructor() {}

If your class is a derived class, the default constructor calls the parent constructor, passing along any arguments that were provided:

constructor(...args) {
  	super(...args);
}

However, if you provide your own constructor, and your class derives from some parent class, then you must explicitly call the parent class constructor using suepr.

There can be only one special method with name constructor in a class. Having more than one occurence of a constructor method in a class will throw a SyntaxError error.

(MDN) setInterval()

The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.

This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval().

var intervalID = setInterval(
  mycallBack, 500, 'Parameter 1', 'Parameter 2'
);

"this" problem을 알고 있어야 함 (arrow function, execution context 개념을 알고 있어야 함)

setInterval대신 setTimeout의 recursive call을 활용 할 줄 알아야 됨 -> 왜? 실행시간이 딜레이 시간보다 길 경우 계속 queue 되는데, 엄격하게 interval time이 보장되야되는 경우가 아니라면 setInterval 굳이 쓸 필요 없음 그리고 실제로 정확히 그 딜레이가 되진 않음.

Lit

(Documentation) Templates -> Conditionals

render() {
  return this.userName
  	? html`Welcome ${this.userNmae}`
  	: html`Please log in <button>Login</button>`;
}

(Documentation) Templates -> Lists

static properties = {
  	colors = {},
};

constructor() {
  super();
  this.colors = ['red', 'green', 'blue'];
}

render() {
	return html`
		<ul>
			#{this.colors.map((color) => 
				html`<li style="color=${color}">${color}</li>`
  		</ul>
  	`;
}

CSS

(MDN) Pseudo-classes

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s)

In contrast to pseudo-classes, pseudo-elements can be used to style a specific part of an element.

/* Any button over which the user's pointer is hovering */
button:hover {
	color: blue;
}

Links

__flow__

fullcycle(fullstack), python/javascript, keepflowin, he/him

이전 포스트

TIL-20220625

다음 포스트

TIL-20220627

TIL

TIL-20220625

TIL-20220628

0개의 댓글