Image for post
Image for post

Object

JavaScript is all about Object. Object class is the most important data type in JavaScript. It is often used to store various keyed collections and more complex entities. Let’s find out 4 object methods that are useful but not known to many of us

1. Object.is()

EC6 added a helper function called Object.is() . Object.is() methods determines whether two values are the same value and is slightly different from the === operator

Differences between === and Object.is()

The method Object.is() works the same as === for almost all intents and purposes, with just 2 key differences

1_ Negative 0

The unusual JavaScript number negative zero -0 is…


Image for post
Image for post

1. How JavaScript different from other languages

1.1) JS is JIT compiled

While other languages (i.e., C, Java, C#) are compiled in advance, JS is interpreted and sometimes compiled at runtime with a just-in-time (JIT) compiler.

JavaScript skips <compiler> && <ByteCode> steps.

Java Example Compile steps below:


Image for post
Image for post

TL;DR

In Object.assign() ,

  • parameter position matters

The target object is determined by the its position in the parameters. Whatever positions 1st in the method’s parameters becomes the target object

  • parameter order matters

The properties are overwritten by other objects that have the same properties later in the parameter order

  • Warning for Deep Clone

If the source value is a reference to an object, it only copies the reference value. Object.assign() copies property values and it does only Shallow Clone, not Deep Clone

0_ [Basic operation] copying properties

The main use case of Object.assign() is to copy all properties from source object to target object

//…


Image for post

Quick Intro to Object.getOwnPropertyNames()

The Object.getOwnPropertyNames() method returns an array of all properties (including non-enumerable property) found directly in a given object

Syntax

Object.getOwnPropertyNames(obj)

Example

Object.getOwnPropertyNames() returns all keys of the object

[ '0', '1', '2' ]
string

Quick Intro to Object.keys()

The Object.keys() method returns an array of a given object’s own enumerable property names, iterated in the same order that a normal loop would

Syntax

Object.keys(obj)

Example

Object.keys returns the same output as Object.getOwnPropertyNames() because every elements in the obj is enumerable

[ '0', '1', '2' ]
string

Finally, Object.getOwnPropertyNames() vs. Object.keys()

Object.getOwnPropertyNames(obj) returns all the properties of the object. Object.keys(obj) returns all enumerable properties.


Object.assign() vs. Object.getOwnPropertyDescriptors()

Image for post

Object.assign()

Defintion

Object.assign method is one of the new features introduced with ECMAScript 2015 (ES6). This method copies the values (of all enumerable own properties) from one or more source objects to a target object

Use Case

It is useful for merging objects or cloning them shallowly.

Example

Object.assign method is useful for merging objects because properties in the target object are overwritten by properties in the sources if they have the same

For example:


localeCompare() & Intl.Collator() enable language sensitive string comparison

Image for post
Image for post

TL;DR

JavaScript native sort method does not work for most of foreign language, which has non-ASCII characters like [‘ą’, ‘ㄱ’, ‘’, ‘д’, ‘e’]

Quick Solution

Using localeCompare()

Using Intl.Collator()

1. Performance

Intl.Collator is better performer than localeCompare

Intl.Collator Object and its compare property is better than localeCompare() in terms of performance for comparing large number of strings

localeCompare()

const a = 'réservé'; // with accents, lowercase
const b = 'RESERVE'; // no accents, uppercase
console.log(a.localeCompare(b));
// expected output: 1

Intl.Collator()

const a = 'réservé'; // with accents, lowercase
const b = 'RESERVE'; // no accents, uppercase
console.log(new Intl.Collator().compare(a, b));//…


Image for post
Image for post

Contents

  • grid-column
  • grid-column (w/ span)
  • grid-template-columns
  • grid-template-columns (w/ repeat)
  • grid-template-rows
  • grid-template-rows (w/ grid-auto-rows)

grid-column

Syntax

grid-column: grid-column-start / grid-column-end

Example


이번 시간에는 청크 분할 요청 (Chunked Request)를 이용해서 대용량파일 전송 속도를 최소 30% 빠르게 올린 경험을 여러분과 함께 공유하고자 합니다

Image for post
Image for post

인트로

저는 TransPerfect라는 회사에서 GlobalLink Share라는 파일 쉐어링 플랫폼을 만들고 있는 프론트엔드 개발자입니다. Dropbox / Google Drive와 비슷한 파일 쉐어링 플랫폼이라고 생각하시면 편하실거 같습니다. GlobalLink Share 또는 GL Share는 1) 로그인이 필요없는 익명 파일 쉐어 2) 게스트 로그인 등의 기능등을 가지고 있고 무제한 파일 사이즈 쉐어를 추구합니다.

개발 스택은 다음과 같습니다

Vue.js / V …


Image for post
Image for post

When to use the Network panel

Network tab or panel in Chrome Devtool is one of the most popular debugging tools that software developers especially Web & Front-End developer can use

The most common use cases for the Network panel are

  • Making sure that resources are actually being uploaded or downloaded at all
  • Inspecting the properties of an individual resource, such as its HTTP headers, content, size, and so on

Intro

I believe that many readers of this article have an experience of using Chrome Devtool at least once. Inspecting the status codes such as 2xx (Success), 4xx Client Error, 5xx Server Error, for example, is one…

GP Lee

Full Stack Engineer (JS, C#, AWS) in NYC. Please follow me on @gpda (Github) or @gpleeda (LinkedIn)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store