JavaScript (type conversion, function, object, array etc)

참고 영상

Declaring variables

• 모든 변수를 const 로 선언 후 추후 변경될 여지가 있는 변수만 let 으로 변경하는 것이 용이
  
  

let

• a block-scoped local variable
• allow to declare variables that are limited to the scope of a block statement or expression on which it's used
• commonly regarded as non-hoisted
• can be changed
  
  

const

• block-scoped constants
• can't be changed through reassignment
• can't be redeclared
• common convention is to use all-uppercase letters
• ex) PI, MAX_NUM, BIRTHDAY etc

Variable

• 변수는 문자와 숫자, $와 _만 사용
• 첫글자는 숫자 사용 불가
• 예약어 사용 불가
• 가급적 상수 (const) 는 대문자로 표기
• 변수명은 읽기 쉽고 이해 용이하게 선언

quotation marks

• single quotation marks('') 사용 시
  double quotation marks("") 로 감싸주는 것이 용이
• single quotation marks('') 내부에 single quote(') 사용하고 싶을 경우 backslash () 사용

Unary operator - typeof

• return a string indicating the type of the operand's value

typeof Null // result: object
typeof Undefined // result: undefined 

Type conversion

• String()
• Number()
  • true / false 를 형변환 시키면 1 / 0 으로 출력
• Boolean()
  • 숫자 0, 빈 문자열 '', null, undefined, NaN -> false

// 주의사항 
- Number(null) // 0 
- Number(undefined) // NaN
- Number(0) // false
- Number('0') // true
- Number('') // false
- Number(' ') // true

Binary logical operators

logical OR(||)

• 모든 값이 false -> false
• true 발견 즉시 평가 중지

logical AND($$)

• 하나라도 false -> false
• false 발견 즉시 평가 중지

Nullish coalescing(??)

• it returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand

Unary operator - logical NOT(!)

• true -> false / false -> true

Equality operator - strict equality(===)

• always considers operands of different types to be different

Function

• a block of code that performs a specific task
• Focus on one task at a time
• name it readable
• name it to understand what it does

// examples
showError
getName 
createUserData
checkLogin 

arrow function

• a shorthand version of the regular function syntax
• don't have their own bindings to this, arguments, or super and should not be used as methods
• can't be used as constructors

// Traditional anonymous function
(function (a, b) {
  return a + b + 100;
});

// Arrow function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

object

• a collection of related data and/or functionality
• type represents one of JS's data types
• used to store various keyed collections and more complex entities

Syntax

const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value,
};

This

• refers to the current object the code is being written inside
• it will be essential when we start using constructors to create more than one object from a single object definition

const penguin = {
  name: ["peng", "dori"],
  age: 6,
  bio() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

Dot notation

• accessed the object's properties and methods using dot notation
• the object name(penguin) acts as the namespace, it must be entered first to access anything inside the object
  • next you write a dot and then the item you want to access

penguin.age;
penguin.bio();

array

• resizable
• can contain a mix of different data types
• not associative arrays
• zero-indexed
• array-copy operations create shallow copies

properties

• push(): adds the specified elements to the end of an array and returns the new length of the array
• pop(): removes the last element from an array and returns that element (change the length of the array)
• shift(): removes the first element from an array and returns that removed elemen (change the length of the array)
• unshift(): adds the specified elements to the beginning of an array and returns the new length of the array

Statement - for...of

• executes a loop that operates on a sequence of values sourced from an iterable object

Syntax

for (variable of iterable)
	statement

example

const array1 = ['penguin', 'cat', 'happy'];
for (const element of array1) {
  console.log(element);
}
// Expected output: "penguin"
// Expected output: "cat"
// Expected output: "happy"

Window.alert()

• to display a dialog with an optional message, and to wait until the user dismisses the dialog

alert()
alert(message)

Window.prompt()

• to display a dialog with an optional message prompting the user to input some text, and to wait until the user either submits the text or cancels the dialog

prompt()
prompt(message)
prompt(message, defaultValue)

Window.confirm()

• to display a dialog with an optional message, and to wait until the user either confirms or cancels the dialog
• parameters: message
• Return value: true / false
• if cancel(false) was selected, return null

confirm(message)