2020년 6월 17일 수요일

array 활용법


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
const characters = [
  'ironman',
  'black_widow',
  'hulk',
  'captain_america',
  'hulk',
  'thor',
];
 
console.log(characters.indexOf('hulk'));
// 2
console.log(characters.indexOf('batman'));
// -1
 
console.log(characters.includes('hulk'));
// true
console.log(characters.includes('batman'));
// false
 
 
// Array.find는 콜백을 만족시키는 첫 번째 요소의 값을 반환
// Array.filter는 전체 배열을 모두 탐색
const characters = [
  { id: 1name'ironman' },
  { id: 2name'black_widow' },
  { id: 3name'captain_america' },
  { id: 4name'captain_america' },
];
 
function getCharacter(name) {
  return character => character.name === name;
}
 
console.log(characters.filter(getCharacter('captain_america')));
// [
//   { id: 3, name: 'captain_america' },
//   { id: 4, name: 'captain_america' },
// ]
 
console.log(characters.find(getCharacter('captain_america')));
// { id: 3, name: 'captain_america' }
 
 
// Array.some return boolean
const characters = [
  { id: 1name'ironman', env: 'marvel' },
  { id: 2name'black_widow', env: 'marvel' },
  { id: 3name'wonder_woman', env: 'dc_comics' },
];
 
function hasCharacterFrom(env) {
  return character => character.env === env;
}
 
console.log(characters.find(hasCharacterFrom('marvel')));
// { id: 1, name: 'ironman', env: 'marvel' }
 
console.log(characters.some(hasCharacterFrom('marvel')));
// true
 
 
 
 
onst characters = [
  { name'ironman', env: 'marvel' },
  { name'black_widow', env: 'marvel' },
  { name'wonder_woman', env: 'dc_comics' },
];
 
console.log(
  characters
    .filter(character => character.env === 'marvel')
    .map(character => Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
);
// [
//   { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
//   { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
// ]
 
console.log(
  characters
    .reduce((acc, character) => {
      return character.env === 'marvel'
        ? acc.concat(Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
        : acc;
    }, [])
)
// [
//   { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
//   { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
// ]
cs

Converting Object to an Array

Converting Object to an Array

JavaScript Destructuring


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
const organizations = ['Pyke''Black Sun''Kanjiklub''Crimson Dawn'];
const [firstGang, secondGang, thirdGang, fourthGang] = organizations;
 
console.log(firstGang); // Outputs 'Pyke'
console.log(secondGang); // Outputs 'Black Sun'
console.log(thirdGang); // Outputs 'Kanjiklub'
console.log(fourthGang); // Outputs 'Crimson Dawn'
 
// first 2 values as variables the rest as an array
const organizations = ['Pyke''Black Sun''Kanjiklub''Crimson Dawn'];
const [firstGang, secondGang, ...theRest] = organizations;
 
console.log(firstGang); // Outputs 'Pyke'
console.log(secondGang); // Outputs 'Black Sun'
console.log(theRest); // Outputs ['Kanjiklub', 'Crimson Dawn']
 
// default values
const organizations = ['Pyke''Black Sun'];
const [
  firstGang = 'First Order',
  secondGang = 'Resistance',
  thirdGang = 'New Republic'
= organizations;
 
console.log(firstGang); // Outputs 'Pyke'
console.log(secondGang); // Outputs 'Black Sun'
console.log(thirdGang); // Outputs 'New Republic'
 
// 첫 게시물만 다른변수에... 나머진 배열로..
const [starPost, ...otherPosts] = blogPosts;
 
// object 값은 변수에 할당
const planet = {
  name'Hosnian Prime',
  faction: 'New Republic',
  weather: 'Temperate'
};
const { name, faction, weather } = planet;
 
console.log(name); // Outputs 'Hosnian Prime'
console.log(faction); // Outputs 'New Republic'
console.log(weather); // Outputs 'Temperate'
 
// 다른 이름으로 할당
const planet = {
  name'Hosnian Prime',
  faction: 'New Republic',
  weather: 'Temperate'
};
const {
  name: system,
  faction: team,
  weather: conditions
= planet;
 
console.log(system); // Outputs 'Hosnian Prime'
console.log(team); // Outputs 'New Republic'
console.log(conditions); // Outputs 'Temperate'
 
// default values
const planet = {
  name'Hosnian Prime'
};
const {
  name = 'Unknown planet',
  faction = 'Unknown faction',
  weather = 'Unknown conditions'
= planet;
 
console.log(name); // Outputs 'Hosnian Prime'
console.log(faction); // Outputs 'Unknown faction'
console.log(weather); // Outputs 'Unknown conditions'
 
 
// 활용법. 파라미터 기본값
function shipGenerator(options = {}) {
  const {
    cannons = 4,
    engines = 2,
    crew = 10
  } = options; // Default options
  
  return `This ship has ${cannons} cannons, ${engines} engines, and ${crew} crew members.`;
}
 
console.log(shipGenerator({ engines: 10, crew: 20 })); // Outputs 'This ship has 4 cannons, 10 engines and 20 crew members.'
console.log(shipGenerator({ cannons: 0 })); // Outputs 'This ship has 0 cannons, 2 engines and 10 crew members.'
console.log(shipGenerator()); // Outputs 'This ship has 4 cannons, 2 engines and 10 crew members.'
cs