📌
My Docs
React
React
  • General Notes
    • index
    • Review-Of-Previous-Concepts
    • Reiew
    • Spread and Rest
    • Understanding By Example
    • React-Resources
    • Using Web Components in React
    • Thinking in React
    • Hello World
    • REACT ENVIORMENT
    • Components And Props
    • Composition vs Inheritance
    • JSX
    • Advanced
    • Project Examples
    • Node.js versus Next.js - A React Approach
    • Composition vs Inheritance
    • React Components
    • Docs
    • Prerequisites
      • Callbacks
      • Scope
      • Mutability
      • Array-CB-Methods
      • Objects
      • Glossary
    • index
    • Question Set #1:
    • Website
    • Editor Setup
    • Quick Start
    • JavaScript in JSX with Curly Braces
    • Your First Component
    • Reducer
    • Passing Data Deeply with Context
    • Manipulating the DOM with Refs
    • Rendering Lists
    • Choosing the State Structure
    • Tips
  • Udemy React & Redux
    • JSX
    • Modern+React+With+Redux
    • Examples
  • Articles
    • Introduction to React for Complete Beginners
    • A Comprehensive Deep Dive into React
    • Super Simple Intro To React
    • Basic React Tutorial
  • REACT DOCS
    • Shallow Compare
    • Performance Tools
    • Keyed Fragments
    • Test Utilities
    • Code-Splitting
    • Introducing Concurrent Mode (Experimental)
    • Components and Props
    • Concurrent Mode API Reference (Experimental)
    • Conditional Rendering
    • Suspense for Data Fetching (Experimental)
    • Cross-origin Errors
    • Error Decoder
    • Error Boundaries
    • New React App
    • Passing Functions to Components
    • recommended way to structure React projects?
    • Forms
    • Fragments
    • Getting Started
    • Versioning Policy
    • Add-Ons
    • Rules of Hooks
    • Using the State Hook
    • How to Contribute
    • Introducing JSX
    • JSX In Depth
    • Event Pooling
    • Portals
    • Optimizing Performance
    • React Without ES6
    • SyntheticEvent
    • PureRenderMixin
    • ReactDOMServer
    • Profiler API
    • Test Renderer
    • Refs and the DOM
    • Static Type Checking
    • State and Lifecycle
    • Uncontrolled Components
    • Web Components
    • PureRenderMixin
Powered by GitBook
On this page
  • Mutability && Primitive && Reference Examples
  • Dereferencing
  • Arrays
  • Objects

Was this helpful?

  1. General Notes
  2. Prerequisites

Mutability

Mutability && Primitive && Reference Examples

Objects are passed by reference, are mutable, and can be modified by our functions:

function rotateLeft(arr, num) {
    for (let i = 0 ; i < num; i++) {
        let el = arr.pop();
        arr.unshift(el);
    }
}
let myArr = [1, 2, 3, 4, 5,];
rotateLeft(myArr, 2);
console.log(myArr);

Strings are passed by value, are immutable, and a new array is constructedd and returned, because it cannot be changed in place.

function rotateString(str, num) {
    return str.slice(num) + str.slice(0, num);
}

let str = "foobar";
let ret = rotateString(str, 3);
console.log(str);
console.log(ret);

Dereferencing

Arrays

To dereference an array, use let [var1, var2] syntax.

let arr = ['one', 'two', 'three'];

let [first] = arr;
console.log(first);

Objects

To dereference attributes from an object, use let {} syntax.

let me = {
    name: "Ian",
    instruments: ['bass', 'synth', 'guitar'],
    siblings: {
        brothers: ['Alistair'],
        sisters: ['Meghan']
    }
}

let { name, instruments: musical_instruments, siblings: {sisters}} = me;

console.log(sisters);
function printInstruments({ instruments } ) {
    console.log(instruments);
}
printInstruments(me);

function printSiblings({ siblings: {sisters, brothers}}) {
    console.log("Sisters", sisters);
    console.log("Brothers", brothers);
}

printSiblings(me);



//rest parameters
// combines parameters into array

...parameterName

splice is an example of where we've seen this before

let arr = 'my dog has fleas'.split(' ');
arr.splice(3, 1, 'trees')


//spread operator
// take an arrray and spread them into arguments

...argContainer

OR

// take an object or array and spread their elements/attributes into another object or array



function multiply(multiplier, ...theArgs) {
  return theArgs.map(function(element) {
    return multiplier * element
  })
}

let arr = multiply(2, 1, 2, 3)
console.log(arr)




let me = {
    name: "Ian",
    instruments: ['bass', 'synth', 'guitar'],
    siblings: {
        brothers: ['Alistair'],
        sisters: ['Meghan']
    }
}

let countryArr = ['USA', 'Canada', 'UK'];
//me[countries] = countryArr;

let myCountries = {
  'countries': countryArr
};

let newMe = {...me, ...countries}
PreviousScopeNextArray-CB-Methods

Last updated 3 years ago

Was this helpful?