VirtualMind test answers

virtual-mind-answer-a.js

/** New API */
const PlayerService = {
  getPlayerTeam: (playerId) => {
    return new Promise((resolve, reject) => {
      $.ajax({
        url: `/player/${playerId}/team`,
        success: (data) => {
          resolve(data)
        },
        error: (error) => {
          reject(error)
        },
      });
    });
  },
  getPlayers: (teamId) => {
    return new Promise((resolve, reject) => {
      $.ajax({
        url: `/team/${teamId}/players`,
        success: (data) => {
          resolve(data)
        },
        error: (error) => {
          reject(error)
        },
      });
    });
  }
}

// usage
var PlayerDetailsController = {
  playerId: 8,
  showTeammatesClick: async function() {
    const playerTeam = await PlayerService.getPlayerTeam(this.playerId);
    const playerList = await PlayerService.getPlayers(playerTeam.id);
    // Render playerList
    
  }
};

virtual-mind-answer-b.js

// Given the following array of elements:
const newItems = [
  {
    network: 'facebook',
    text: 'post number 1',
  },
  {
    network: 'twitter',
    text: 'some twitter text',
  },
  {
    network: 'gplus',
    text: 'some gplus stuff',
  },
  {
    network: 'facebook',
    text: 'post number 2',
  },
]
// Write a function with this signature:
// (arrayOfItems, aNetwork) => newArray ----------------------------------------------- SOLUTION HERE
function foo(arrayOfItems, aNetwork) {
  // Write code here
  return arrayOfItems.filter(item => item.network === aNetwork).map((item) => ({
    displayName: getNetworkName(aNetwork),
    text: item.text
  }));
}
// Helper function
function getNetworkName(key) {
  const networks = {
    'facebook': 'Facebook',
    'gplus': 'Google +',
    'twitter': 'Twitter',
    'ig': 'Instagram'
  };
  
  if (!networks.hasOwnProperty(key)) return '';
  return networks[key];
}

// That, given an array and a network, transforms the given array into the following structure:

// example:
// foo(newItems, 'facebook')

// outputs:
// finalsItems = [
//   {
//     displayName: 'Facebook'
//     text: 'post number 1'
//   },
//   {
//     displayName: 'Facebook',
//     text: 'post number 2'
//   },
// ]

// foo(newItems, 'gplus')

// outputs:
// finalsItems = [
//   {
//     displayName: 'Google +',
//     text: 'some gplus stuff'
//   }
// ]

// You will need to define your own way to consistently transform `network` into `displayNames`
console.log(foo(newItems, 'facebook'));
console.log(foo(newItems, 'gplus'))

virtual-mind-answer-c.js

// This is a react component that is technically functional,
// but would be very hard to maintain because of it's size.

// It's easier to write tests for smaller components that pass
// data between them. Rewrite this component so that it could be
// rendered from somewhere else by using these lines.

// const checkboxes = [0, 1, 2];

// <Form>
// 	checkboxes.map(id =>
// 		<Checkbox key={id} id={id}/>
// 	)
// </Form>

// or (easier but less impresive)

// <Form checkboxes={checkboxes} />

// If you decide to do the second option you MUST STILL create and
// render a Checkbox Component inside the Form Component

const Checkbox = (props) => {
  const { value, onChange, label = 'Checkbox', name } = props;

  return (
    <div>
      <span>{label}</span>
      <input 
        value={value} 
        onChange={onChange} 
        name={name}
        type="checkbox" />
    </div>
  );
}

const BigForm = () => {
  // get data from somewhere
  const data = [{
    name: 'checkbox-0',
    label: 'Checkbox 0',
    value: false,
  }, {
    name: 'checkbox-1',
    label: 'Checkbox 1',
    value: false,
  }, {
    name: 'checkbox-2',
    label: 'Checkbox 2',
    value: true,
  }];

  const [state, setState] = useState(data);

  const onCheckBoxHandler = (index) => (event) => {
    const newData = [...state];
    newData[index] = event.target.value;
    // do something else with value
    setState(newData);
  }

  return (
    <div className="form">
      <span>Checked boxes: {checked}</span>
      <div className="checkbox-wrapper">
        {state.map((field, index) => {
          return <Checkbox label={`Checkbox ${index}`} name={field.name} value={field.value} onChange={onCheckBoxHandler(index)} />
        })}
      </div>
    </div>
  );
};

ReactDOM.render(
  <BigForm />,
  document.getElementById('container')
);

virtual-mind-answer-d-e-f-g-h.md

D. What kind of language is Javascript? (remember, more than one (or none) options are possible)

• Strongly typed
• Weakly typed
• Dynamic <<<<------- Selection
• Prototype based <<<<------- Selection
• Functional <<<<------- Selection
• Static
• Structured

---

E. Mark which of the following characteristics Javascript presents

• Polymorphism <<<<------- Selection
• Inheritance <<<<------- Selection
• Encapsulation <<<<------- Selection
• Dynamic binding (The ability to switch an object’s method at runtime) <<<<------- Selection
• Open recursion (Characteristic that implies that the “this” reference is dynamically bound) <<<<------- Selection

---

F. Is Javascript Object Oriented?

• Yes <<<<------- Selection
• No

Briefly describe why: Altho is not class-based object oriented, it has features that allows it to be used within the object oriented paradigm, so is a yes for me.

---

G. What does a closure allow in Javascript?

1. Encapsulating code inside the scope of a function. <<<<------- Selection

2. Allows declared variables to be accessible inside child scopes and inaccessible from parent scopes. <<<<------- Selection

3. Allows declared variables to be accessible inside parent scopes and inaccessible from child scopes.

4. Currying <<<<------- Selection

5. Event Bubbling

---

H. How would you deal with global scope in Javascript?:

1. Encapsulating components in functions <<<<------- Selection

2. Using AMD or CommonJS Modules <<<<------- Selection

3. Putting all the components under a same object

4. Using global variables