Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Using typeof operator to get object value type – receiving string instead of array

I have an object where two parameters hold arrays as their values. When I try to output the types of these values using the typeof operator in a loop, for some reason, I always get a string type instead of the actual array value.

const add = "add"
const edit = "edit"
const required = {
  user: [add, edit],
  profile: [edit],
}

for (let p in required) {
  console.log(p, typeof(p))
}
Output:

string
string
Tags:

2

Answers


  1. 0

    This is how you access the array (the value)-

    Object[key] which translates, in your case to required[p].

    (The typeof function logs arrays as 'object')

    const add = "add";
const edit = "edit"
const required = {
  user: [add, edit],
  profile: [edit]
}

for (let p in required) {
  console.log(required[p])
}

for (let p in required) {
  console.log(typeof(required[p]))
}
    Login or Signup to reply.
  2. 0
    • When iterating over an object with a for...in loop, you’re querying its keys.
    const obj = { a: "first", b: "second", c: "third" }
for (let p in obj) {
  console.log(p) // results: a, b, c (keys)
  // can get values with key
  console.log(obj[p]) // results: "first", "second", "third" (values)
}
    • When you collect the values of an object, you get an array where the keys are already the conventional 0, 1, 2, …, and the values are those you provided. In this case, it’s evident that using for...in gives us the keys again.
    const arr = Object.values({ a: "first", b: "second", c: "third" }) // result: ["first", "second", "third"]
for (let p in arr) {
  console.log(p) // results: 0, 1, 2 (indexes)
  // can get values with key
  console.log(arr[p]) // results: "first", "second", "third" (values)
}
    • So now we can see the difference between for...in and for...of. Using for...of gives us the values of the array. However, the original keys of the object are lost here. The question is whether we need them.
    const arr = Object.values({ a: "first", b: "second", c: "third" }) // result: ["first", "second", "third"]
for (let p of arr) {
  console.log(p) // results: "first", "second", "third" (values)
}
    • With for...of, it’s inherently difficult to obtain the keys. However, if you use Object.entries() instead of Object.values() to convert it into an array, the new array will contain both the keys and their values, which you can then retrieve within the for...of loop.
    const arr = Object.entries({ a: "first", b: "second", c: "third" }) // result: [[a, "first"], [b, "second"], [c, "third"]]
for (let p of arr) {
  console.log(p[0]) // results: a, b, c (keys)
  console.log(p[1]) // results: "first", "second", "third" (values)
}

// or can use destructuring assignment instead of p
for (let [key, value] of arr) {
  console.log(key) // results: a, b, c (keys)
  console.log(value) // results: "first", "second", "third" (values)
}

    Example with your object

    const add = "add"
const edit = "edit"
const required = {
  user: [add, edit],
  profile: [edit],
}

// 1. object with "in"
for (let p in required) {
  console.log(p, typeof(p))
  console.log(required[p], typeof(required[p]))
}

// 2. array with "in" (Object.values)
const arr = Object.values(required)
for (let p in arr) {
  console.log(p, typeof(p))
  console.log(arr[p], typeof(arr[p]))
}

// 3. array with "of" (Object.values)
for (let p of arr) {
  console.log(p, typeof(p))
}

// 4. array with "of" (Object.entries)
const arr_with_keys = Object.entries(required)
for (let p of arr_with_keys) {
  console.log(p, typeof(p)) // ["user", ["add", "edit"]]
  console.log(p[0], typeof(p[0])) // "user"
  console.log(p[1], typeof(p[1])) // ["add", "edit"]
}
// or can declare key and value (destructuring assignment)
for (let [key, value] of arr_with_keys) {
  console.log(key, typeof(key))
  console.log(value, typeof(value))
}

    More information

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search