๐Ÿ“”
web_study
  • JavaScript
  • ์—˜๋ฆฌ_์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ๋ณธ
      • ํด๋ž˜์Šค ์˜ˆ์ œ์™€ ์ฝœ๋ฐฑํ•จ์ˆ˜
      • ์—ฐ์‚ฐ์ž boolean
      • ํ•จ์ˆ˜ ์ •์˜, ํ˜ธ์ถœ ๊ทธ๋ฆฌ๊ณ  ์ฝœ๋ฐฑ
      • ๋ณ€์ˆ˜ํƒ€์ž…๊ณผ object ์ฐจ์ด์ 
    • JavaScript async ์™€ await
    • JavaScript Promise
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ callback
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ json
    • ์œ ์šฉํ•œ 10๊ฐ€์ง€ ๋ฐฐ์—ด ํ•จ์ˆ˜๋“ค
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐฐ์—ด(array)
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ object
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ (class vs object) ๊ฐ์ฒด์ง€ํ–ฅ ์–ธ์–ด
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•จ์ˆ˜
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—ฐ์‚ฐ.๋ฐ˜๋ณต๋ฌธ
    • ๋ฐ์ดํ„ฐํƒ€์ž…, data types, let vs var, hoisting
    • script async ์™€ defer์˜ ์ฐจ์ด์  ์ฝ˜์†” ์ถœ๋ ฅ
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—ญ์‚ฌ
  • ์ƒํ™œ์ฝ”๋”ฉ
    • ์žฌ๊ท€ํ•จ์ˆ˜
    • ์ •๊ทœ ํ‘œํ˜„์‹
    • ๊ฐ์ฒด์ง€ํ–ฅ
      • ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ
      • ์ƒ์„ฑ์ž์™€ new
      • ์ „์—ญ๊ฐ์ฒด
      • this
      • ์ƒ์†
      • prototype
      • ํ‘œ์ค€ ๋‚ด์žฅ ๊ฐ์ฒด์˜ ํ™•์žฅ
      • object
      • ๋ฐ์ดํ„ฐ ํƒ€์ž…
      • ์ฐธ์กฐ
    • ํ•จ์ˆ˜์ง€ํ–ฅ
      • ์œ ํšจ๋ฒ”์œ„
      • ๊ฐ’์œผ๋กœ์„œ์˜ ํ•จ์ˆ˜์™€ ์ฝœ๋ฐฑ
      • ํด๋กœ์ €
      • arguments
      • ํ•จ์ˆ˜์˜ ํ˜ธ์ถœ
    • UI API, ๋ฌธ์„œ
    • ๋ชจ๋“ˆ
    • ๊ฐ์ฒด
    • ๋ฐฐ์—ด
    • ํ•จ์ˆ˜
    • ๋ฐ˜๋ณต๋ฌธ
    • ์กฐ๊ฑด๋ฌธ
    • ์ˆซ์ž์™€๋ฌธ์ž
    • ๋ณ€์ˆ˜
    • ๋น„๊ต
  • ๋…ธ๋งˆ๋“œ ์ฝ”๋”
    • Getting the Weather part One Geolocation
    • Image Background
    • TO DO List
    • Saving the User Name
    • Clock part One
    • ์กฐ๊ฑด๋ฌธ ( if , else, and, or)
    • evnet handlers
    • Function
    • Objects
    • Arrays
    • Variable(๋ณ€์ˆ˜!)
    • Javascript
  • javascript30
    • Dram Kit
    • clock
    • Css Javascript
    • Array Cardio
    • flex panels
    • type ahead
    • Canvas Draw
    • Speech Synthesis
    • Whack A Mole
  • web standard
    • script ๋ถ€๋ถ„
    • form๋ถ€๋ถ„
    • ์›น์ ‘๊ทผ์„ฑ
    • <meta>
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ_์ด๋ก 
    • ๊ธฐ๋ณธ์ง€์‹(JAVASCRIPT)
    • ๊ธฐ๋ณธ์ง€์‹(CSS)
    • ๊ธฐ๋ณธ์ง€์‹(HTML)
    • ๊ธฐ๋ณธ์ง€์‹(HTTP)
    • Dom
    • ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ํ”„๋ ˆ์ž„์›Œํฌ, ํ”Œ๋กœ๊ทธ์ธ
Powered by GitBook
On this page
  • common
  • filter() - ํŠน์ • ์กฐ๊ฑด์„ ๋งŒ์กฑํ•˜๋Š” ์ƒˆ ๋ฐฐ์—ด ๋งŒ๋“ค๊ธฐ
  • map() - ํ•จ์ˆ˜ ๊ฒฐ๊ณผ๋ฅผ ๋ชจ์•„ ์ƒˆ ๋ฐฐ์—ด ๋งŒ๋“ค๊ธฐ
  • sort() - ์˜ค๋ฆ„์ฐจ๋‚˜ ๋‚ด๋ฆผ์ฐจ๋กœ ๋ฐฐ์—ด ์ •๋ฆฌํ•˜๊ธฐ
  • reudce() - ๋ฐฐ์—ด์˜ ์š”์†Œ ๊ฐ’์„ ๋ˆ„์ ํ•˜์—ฌ ๊ณ„์‚ฐํ•˜๊ธฐ
  • sort()
  • includes()
  • sort()
  • reduce()

Was this helpful?

  1. javascript30

Array Cardio

common

//ํŠน์ • ์กฐ๊ฑด์„ ๋งŒ์กฑํ•˜๋Š” ์ƒˆ ๋ฐฐ์—ด ๋งŒ๋“ค๊ธฐ 
  const inventors = [
    { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
    { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
    { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
    { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
    { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
    { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
    { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
    { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
    { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
    { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
    { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
    { first: 'Hanna', last: 'Hammarstrรถm', year: 1829, passed: 1909 }
  ];

  const people = [
    'Bernhard, Sandra', 'Bethea, Erin', 'Becker, Carl', 'Bentsen, Lloyd', 'Beckett, Samuel', 'Blake, William', 'Berger, Ric', 'Beddoes, Mick', 'Beethoven, Ludwig',
    'Belloc, Hilaire', 'Begin, Menachem', 'Bellow, Saul', 'Benchley, Robert', 'Blair, Robert', 'Benenson, Peter', 'Benjamin, Walter', 'Berlin, Irving',
    'Benn, Tony', 'Benson, Leana', 'Bent, Silas', 'Berle, Milton', 'Berry, Halle', 'Biko, Steve', 'Beck, Glenn', 'Bergman, Ingmar', 'Black, Elk', 'Berio, Luciano',
    'Berne, Eric', 'Berra, Yogi', 'Berry, Wendell', 'Bevan, Aneurin', 'Ben-Gurion, David', 'Bevel, Ken', 'Biden, Joseph', 'Bennington, Chester', 'Bierce, Ambrose',
    'Billings, Josh', 'Birrell, Augustine', 'Blair, Tony', 'Beecher, Henry', 'Biondo, Frank'
  ];

filter() - ํŠน์ • ์กฐ๊ฑด์„ ๋งŒ์กฑํ•˜๋Š” ์ƒˆ ๋ฐฐ์—ด ๋งŒ๋“ค๊ธฐ

    
// Array.prototype.filter()
// 1. Filter the list of inventors for those who were born in the 1500's
// 1500 ๋…„๋Œ€์— ํƒœ์–ด๋‚œ ์ธ๋ฌผ๋งŒ ์ถ”๋ ค์„œ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด ๋งŒ๋“ค๊ธฐ
const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));

console.table(fifteen);

map() - ํ•จ์ˆ˜ ๊ฒฐ๊ณผ๋ฅผ ๋ชจ์•„ ์ƒˆ ๋ฐฐ์—ด ๋งŒ๋“ค๊ธฐ

 // 2. Give us an array of the inventor first and last names
 // ํ•จ์ˆ˜ ๊ฒฐ๊ณผ๋ฅผ ๋ชจ์•„ ์ƒˆ ๋ฐฐ์—ด ๋งŒ๋“ค๊ธฐ (์„ฑ + ์ด๋ฆ„)
 const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
 console.log(fullNames);

sort() - ์˜ค๋ฆ„์ฐจ๋‚˜ ๋‚ด๋ฆผ์ฐจ๋กœ ๋ฐฐ์—ด ์ •๋ฆฌํ•˜๊ธฐ

// 3. Sort the inventors by birthdate, oldest to youngest
// sort() ์˜ค๋ฆ„์ฐจ์ˆœ์ด๋‚˜ ๋‚ด๋ฆผ์ฐจ์ˆœ์œผ๋กœ ๋ฐฐ์—ด ์ •๋ฆฌํ•˜๊ธฐ 
const ordered2= inventors.sort((a, b) => a.year > b.year ? 1 : -1);
console.table(ordered2);

reudce() - ๋ฐฐ์—ด์˜ ์š”์†Œ ๊ฐ’์„ ๋ˆ„์ ํ•˜์—ฌ ๊ณ„์‚ฐํ•˜๊ธฐ

 // 4. How many years did all the inventors live?
 // reudce() - ๋ฐฐ์—ด์˜ ์š”์†Œ ๊ฐ’์„ ๋ˆ„์ ํ•˜์—ฌ ๊ณ„์‚ฐํ•˜๊ธฐ (์ธ๋ฌผ๋“ค์ด ์‚ฐ ํ–‡์ˆ˜)
 const totalYears = inventors.reduce((total, inventor) => {
   return total + (inventor.passed - inventor.year);
 }, 0);

sort()

// 5. Sort the inventors by years lived
// sort() - ๊ฐ€์žฅ ์˜ค๋ž˜ ์‚ฐ ์‚ฌ๋žŒ์€? 
const oldest = inventors.sort(function(a, b) {
 const lastInventor = a.passed - a.year;
 const nextInventor = b.passed - b.year;
 return lastInventor > nextInventor ? -1 : 1;
});
console.table(oldest);

includes()

// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
// includes() -์ด๋ฆ„์— 'de'๊ฐ€ ๋“ค์–ด๊ฐ€๋Š” ์‚ฌ๋žŒ๋งŒ ๋ชจ์•„์„œ ์ƒˆ ๋ฐฐ์—ด๋กœ ๋งŒ๋“ค๊ธฐ
const category = document.querySelector(".mw-category");
const categoryLinks = Array.from(category.querySelectorAll("a"));
const categoryLinksText = categoryLinks.map(link=>link.textContent);
const result = categoryLinksText.filter(text=>text.includes('de'));
// const result = de.filter(text=>text.indexOf("de") !== -1); //ES5
console.log(result);

sort()

// 7. sort Exercise
// Sort the people alphabetically by last name
// sort() - ์ด์šฉํ•˜์—ฌ ์ด๋ฆ„์„ ๊ธฐ์ค€์œผ๋กœ ์•ŒํŒŒ๋ฒณ์ˆœ์œผ๋กœ ๋‚˜์—ด
const alpha = people.sort((lastOne, nextOne) => {
  const [aLast, aFirst] = lastOne.split(', ');
  const [bLast, bFirst] = nextOne.split(', ');
  return aLast > bLast ? 1 : -1;
});
console.log(alpha);

reduce()

// 8. Reduce Exercise
// Sum up the instances of each of these
// reduce()๋ฅผ ํ™œ์šฉํ•ด ์ธ์Šคํ„ด์Šค ๊ฐœ์ˆ˜์„ธ๊ธฐ 
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'pogostick'];

const transportation = data.reduce(function(obj, item) {
  if (!obj[item]) {
    obj[item] = 0;
  }
  obj[item]++;
  return obj;
}, {});

console.log(transportation);
PreviousCss JavascriptNextflex panels

Last updated 3 years ago

Was this helpful?