[udemy] javascript

새로고침을 하지 않아도 반응, UI의 변화 등을 코드가 이벤트 혹은 자동적으로 움직일 수 있도록 생명을 불어넣은 것

 

Number

// 1번째 문제
(13 % 5) ** 2
// 2번째 문제
200 + 0 / 0

정답

1. 9

2. NaN

 

변수

let finger = 10;
let mouse = 1;
let eyes = 2;

finger + mouse
// 11

mouse + eyes
// 3

finger = finger - 5;
finger += 5;
finger++;
finger--;
finger
// 10

 

상수

const pi = 3.14159
pi++; //error

 

대소문자를 구별하며 유니코드 글자, $, _, 숫자(0-9)로 구성할 수 있지만, 숫자로 시작할 수는 없습니다 (여기)
Camel 케이스로 주로 사용됨. (예를들어, currentYear, userDate)

 

String (참고)

let msg = "Hello world! this is so fuuny!"
msg.slice(6); // 'world! this is so fuuny!'
msg.slice(13, 17); // 'this'
msg.slice(-1); // '!'

 

Template Literals

let name = 'jaewpark'
`My name is ${name}!!`

 

double equal && triple equal (참고)

null == undefined; // true;
0 == false // true;
1 == 2 // false;
1 == '1' //true;

1 === true // false;
1 === '1' // false;
1 === 1 // true

 

Javascript

index.html

app.js

 

Array (참고)

앞에서 인자를 핸들링 shift, unshift
끝에서 인자를 핸들링 push, pop

 

indexOf : 몇 번째 배열에 존재하는지 return, 없다면 -1을 반환

 

 

Object literal (참고)

객체는 key, value 값이 있고 key를 이용하여 value 값을 가져올 수 있다.
위의 사진과 같이 존재한다면, object.foo를 입력하면 'bar'가 출력하게 된다.

객체 수정

for ... of (참고)

 

forEach (참고)

const number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

number.forEach(function (el) {
  console.log(el)
})

// forEach랑 동일한 동작
for (let el of numbers) {
  console.log(el)
}

--------------------------------------------------------
const movies = [
  {
    name: A,
    score: 100
  },
  {
    name: B,
    score: 90
  },
  {
    name: C,
    score: 97
  }
]

movies.forEach(function (movies) {
  console.log(`${movies.name} - ${movies.score}점`)
})

 

map (참고)

: 값의 변화를 가지고 새로운 배열로 만들 때 주로 사용

const numbers = [1, 4, 9, 16];

const map1 = numbers.map(x => x * 2);

const doubles = numbers.map(function(num) {
  return num * 2;
});

// 더 다양한 방법은 참고 사이트를 통해 익숙해지기

 

객체 for문

Object.values(bowlingScores) 를 scores 저장하고 length 확인하여 평균 값도 구할 수 있다.

 

 

 

Method (참고)

this (참고)

 

try / catch (참고)

실행할 코드블럭을 표시하고 예외(exception)가 발생(throw)할 경우의 응답을 지정

try {
   throw "myException"; // generates an exception
}
catch (e) {
   // statements to handle any exceptions
   logMyErrors(e); // pass exception object to error handler
}

 

arrow function (참고)

const rollDie = () => (Math.floow(Math.random() * 6) + 1)

const materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

console.log(materials.map(material => material.length));

 

setTimeout, setInterval (참고1) (참고2)

setTimeout(() => {console.log("첫 번째 메시지")}, 5000);
setTimeout(() => {console.log("두 번째 메시지")}, 5000);

let timerId = setInterval(() => alert('째깍'), 2000);

 

Array.prototype.filter() (참고)

const movies = [
  {
    title: "Sharknado",
    score: 35,
    year: 2013
  },
  {
    title: "13 Going on 30",
    score: 70,
    year: 2004
  },
  {
    title: "Parasite",
    score: 95,
    year: 2019
  }
]

const notGoodMovies = movies.filter(m => m.score < 80)

 

 

Array.prototype.every(), some() (참고)

:  배열 안의 모든(하나라도) 요소가 주어진 판별 함수를 통과하는지 확인

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));

-------------------------------------------------------------

const array = [1, 2, 3, 4, 5];

const even = (element) => element % 2 === 0;

console.log(array.some(even));

 

Array.prototype.reduce() (참고)

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);
// expected output: 10

 

매개 변수

function greet(person, msg = "Hey there", punc = '!') {
  console.log(`${msg}, ${person}${punc}`)
}

greet("Jack") // Hey there, Jack!
greet("Olaf", "Hello", "!!!") // Hello, Olaf!!!

 

spread (참고)

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers)); // expected output: 6

const newNumbers = [...numbers, 4, 5, 6]; // [1, 2, 3, 4, 5, 6]

function raceResults(gold, silver, ...everyoneElse) {
  console.log(`GOLD MEDAL : ${gold}`)
  console.log(`SILVER MEDAL : ${silver}`)
  console.log(`AND THANKS TO : ${everyonElse}`)
}

 

객체 분리

const user = {
  email: 'jaewpark@ae.kr',
  password: 'HelloPOSTIN&',
  city: 'seoul'
  likeNumber: 23
}

const { city, likeNumber } = user;

likeNumber // 23;