본문 바로가기
Udemy - The web developer camp

JavaScript Arrays

by Hanachoi 2022. 8. 23.

# Arrays Intro

  • Ordered collections of values. It is like a pill box for 7days a week. The main concept here is that there are a bunch of slots and there's an order. 
  • 1) Arrays is a collection of values 2) It is an ordered collection of values.  there are the maing concept.
  • Examples ) List of comments on IG post / Collection of levels in a game / songs in a playlist 
  • In order to creat arrays, we use squrebrakets. [] 
let colors = ['red','orange','yellow'];

// colors []
  • Arrays have length.  Also arrays can have any sort of collections we want. It doesn't have to be homogenous. We can mix everythig up. 

 

#Arrays are Indexed.

  • Each element has a corresponding index(counting starts at 0)
  • You can use this index to access to elements in arrays.
let days = ['tuesday','wednesday','Friday'];

days[1] // tuesday
days[1][0]//t
  • We can use two indexs in a row. 
  • Also, you can update elements in arrays with index. We know its index number and you can update it. 
let colors = ['rad','orange','blue'];

color[0] ='red'; // it will be impacted to typo
  • But, you cannot change particular character in string.
  • You can change value and type.
let firstName = 'colt';

firstName[0] //'c' you cannot change it into capital character with index
  • if you assign something at index[10] and then what is going to happen? There will be empty values between values. and the value you assign will be at [10]th. 
  • The highest index is always one less than its length.

 

 

#Push and pop

  • There are so many methods for arrays. [arrays.prototype.method]
  • Array Methods : Push / Pop/ Shift/ Unshift. These are really common methods.
  • Push : We often see arrays in order and we usually want to add something new at the end of array and maintain that order.
  • You can add somehting like movieline[2] = 'oliver' if you know the index of array. 
let movieline = ['tom','nancy']

movieline.push('oliver');

movieline // 'tom' , 'nancy' , 'oliver'
  • It is very different with string method. You cannnot change string itself by using like to .UpperCase on string. But in this case, array is changed itself. 
  • pop : remove element from the end of array.
let movieline = ['tom','nancy']

movieline.pop()

movieline // 'tom'
  • It is based on stack and queue in computer science structure.

 

#shift and Unshift

  • shift : remove from the beginning of the array. 
let movieline = ['tom','nancy']

movieline.shift()

movieline // 'nancy'


let nextPatron = movieline.shift()

nextPatron = 'tom'
  • unshift : add from start. 
let movieline = ['tom','nancy']

movieline.unshift('oliver');

movieline //  'oliver' ,'tom' , 'nancy'

 

 

#Concat / indesOf / includes / reverse

  • Concat : we call it on one of the arrays concat and then we pass in a second array to concatenate with that initial array and that will make us a new third array. 
let cats = ['blue','kitty'];
let dogs = ['rusty','wyatt'];

cats.concat(dogs) //  ['blue','kitty','rusty','wyatt']
  • I cannot updeate 'cats' but just make a new array. Also because you use cats first, the order will be cats' array come first. 
  • includes() : It is going to tell you if the array includes this or not. It is boolean method.
let cats = ['blue','kitty']

cats.includes('blue') // true
  • IndexOf : you can know what index is in the array. It is the same way of indexOf for string 
  • reverse: It is destructive method. It changes the original array. It reorganizes the order entirely.

 

#slice and splice.

  • slice : a way to get a copy of portion of array. 
  • You can set up start and end. When you just set up the start, it will be copied at that poiint to the end. 
let colors = ['blue','red','yellow','sky','indigo','violet','orange']

colors.slice()  //['blue','red','yellow','sky','indigo','violet','orange']
// you can duplicate the same array 

colors.slice(3) // set up start 'sky','indigo','violet','orange' from start at 3 to the end
colors.slice(5) // 'violet','orange'

colors.slice(0,3) //'blue','red','yellow','sky'
  • Another thing you can do is with negative index if you want last two or three or something.
colors.splice(-2) // 'violet','orange'
  • splice()  : It is similar with slice but has little bit more. This changes the contents of an array by removing or replacing exsting elements and/or adding new elements. 
  • It doesn't make a copy but working in a original array. 
months.splice(start, how many you want to delete , optionally something to insert)
  • starting index is requirement.
colors.splice(5,1) // "indigo"
  • If you just want to add something without deleting anything, you can still use splice. Also add several things at the same time. 
colors.splice(1,0,'red-orange')

colors.splice(3,0,'yellow-green','forestgreen')
  • It is not that common to use splice to insert things in the middle of an array. It is not terribly efficient to update the middle of an array. It is better to update at the end of an array if possible.
  • sort() : sorts an array. But when you use this it is not gonna be numaric sorted. It only compares the first numbers and sort them. ex) //-1, 0,1,2500,34,4500 But you can use function to fix it. 

 

#Triple equal operator and double equal operator in terms of arrays 

  • In JS, it doesn't care about array, so doesn't compare to what's in arrays. we are not comparing to contents. JS doesn't care about what's inside. Even though you compare to two empty arrays like [] === [], it is gonna be false. 
  • what is comparing instead is the references in memory. 메모리참조
[1] === [1] //false
  • when you make a new variable, and if it is a number, there is a cetain amount of space allocated in memory for this number. In fact, every number is going to get a certain amount of space because there is a maximum size for numbers.
  • JS doesn't know how much space it takes up or how much it could take up because it can change and all the stuff. So insteadm what is stored and what's associated here with number in this array is a reference
.99999999999 // 일정갯수를 넘어가면 그냥 1로 저장되어진다.
  • These two arrays are going to be fasle because they have the different reference in memory. It looks the same array but, these are allocated in the different space in memory. 
[1,2,3] === [1,2,3] //false
let nums = [1,2,3];

let numsCopy = nums; // nums and numsCopy are equal in memory 

nums === numsCopy //true. because they have the same reference in Js memory
  • trying to compare arrays in JS is really only thing if you try to check they are the same array if they're the same array, they're referring to th same thing. But it is not going to help us if we're trying to compare the contents.

 

# Arrays and const 

  • When you make an array, you can use const and it's really common to do that because we can still change the contents of our array. What const cares about is that the  variable itself is not reassigned.
const nums = [1,2,3];
  • above this example, what I am storing with NUMS is not the content, it is a reference. SO as long as that reference to the array does not change. If the shell remains the same, the contents can change . I could delete everthing in array, and I could add a thousand new numbers or I could just change the order. 
  • = is arrow point on this and if = is not changed, the reference is still the same. 

 

#Nested Arrays.

  • You can store arrays insdie other arrays.
const colors = [
	['red,'orange'],
    ['blue','sky'],
    ['purple','green']
]
  • Then how can I access 'sky' in arrays?
colors[1][1]  // index of one and then another index in second array

 

'Udemy - The web developer camp' 카테고리의 다른 글

JavaScript Loop  (0) 2022.09.13
JavaScript Object Literals  (0) 2022.09.09
Javascript Making decisions  (0) 2022.08.06
Javascript string  (0) 2022.08.04
JavaScript  (0) 2022.07.30

댓글