5.4 Arguments¶

Warm-up¶

Task 1: Create a regular function that takes one argument and returns it.

function displayArguments(a){
  return a;
}

console.log(displayArguments(4));

The result is: 4

Task 2: Create a regular function that takes four arguments and returns them.

function displayArguments(a, b, c, d){
  return a, b, c, d;
}

console.log(displayArguments(4, 5, 7, 10));

The result is: 10

Array Destructuring¶

Task 3: Check the following code.

function displayArguments(a, b, c, d){
  return [a, b, c, d];
}

var a, b, c, d;
[a, b, c, d] = displayArguments(4, 5, 7, 10);
console.log(a, b, c, d);

The result is: 4 5 7 10

Task 4: The calc function returns an array. Unpack the array values into separate variables.

function calc(n1, n2){
  return [n1 + n2, n1 - n2, n1 * n2, n1 / n2];
}

var res1, res2, res3, res4;
[res1, res2, res3, res4] = calc(5, 8);
console.log(res1, res2, res3, res4);

The result is: 13 -3 40 0.625

Task 5: The calc function returns an array. Unpack the array values into separate variables.

function calc(num1, num2, num3){
  return [num1 * num2, num1 * num3, num2 * num3];
}

var res1, res2, res3;
[res1, res2, res3] = calc(8, 0, 3);
console.log(res1, res2, res3);

The result is: 0 24 0

Task 6: The calc function returns an array. Unpack the array values into separate variables.

function calc(a1, a2, a3, a4, a5, a6, a7, a8){
  return [a1, a2, a3, a4, a5, a6, a7, a8];
}

var res1, res2, res3, res4, res5, res6, res7, res8;
[res1, res2, res3, res4, res5, res6, res7, res8] = calc(10, 20, 30, 40, 50, 60, 70, 80);
console.log(res1, res2, res3, res4, res5, res6, res7, res8);

The result is: 10 20 30 40 50 60 70 80

Task 7: The calc function returns an array. Unpack the array values into 3 separate variables

function calc(a1, a2, a3, a4, a5, a6, a7, a8){
  return [a1, a2, a3, a4, a5, a6, a7, a8];
}

var res1, res2, res3;
[res1, res2, res3] = calc(10, 20, 30, 40, 50, 60, 70, 80);
console.log(res1, res2, res3);

The result is: 10 20 30

Task 8: The calc function returns an array. Unpack the array values into 3 separate variables. Hint: use [res1, res2, ...res3].

function calc(a1, a2, a3, a4, a5, a6, a7, a8){
  return [a1, a2, a3, a4, a5, a6, a7, a8];
}

var res1, res2, res3;
[res1, res2, ...res3] = calc(10, 20, 30, 40, 50, 60, 70, 80);
console.log(res1, res2, res3);

The result is: 10 20 (6) [30, 40, 50, 60, 70, 80]

Task 9: The calc function returns an array. Unpack the array values into 2 separate variables. Hint: use the rest operator.

function calc(a, b, c, d, e, f, g, h){
  return [a * 1 , b * 2, c * 3, d * 4, e * 5, f * 6, g * 7, h * 8];
}

var n1, n2;
[n1, ...n2] = calc(1, 2, 3, 4, 5, 6, 7, 8);
console.log(n1, n2);

The result is: 1 (7) [4, 9, 16, 25, 36, 49, 64]

Task 10: Refer to task 9; unpack the array values into 4 distinct variables.

function calc(a, b, c, d, e, f, g, h){
  return [a * 1 , b * 2, c * 3, d * 4, e * 5, f * 6, g * 7, h * 8];
}

var n1, n2, n3, n4;
[n1, n2, n3, ,..n4] = calc(1, 2, 3, 4, 5, 6, 7, 8);
console.log(n1, n2, n3, n4);

The result is: 1 4 9 (5) [16, 25, 36, 49, 64]

Object Destructuring¶

Task 11: Check the following code.

var obj = {
  a: 1,
  b: 2,
  c: 3
};

var {a, b, c} = obj;
console.log(a, b, c);

The result is: 1 2 3

Task 12: The doSomething function returns an object. Unpack the object values into separate variables.

function doSomething(task1, task2, task3){
  return {t1: task1, t2: task2, t3: task3};
}

var {t1, t2, t3} = doSomething("Meditate", "Be grateful", "Study JS");
console.log(t1, t2, t3);

The result is: Meditate Be grateful Study JS

Task 13: The getMeALaptop function returns an object. Extract the value of ram from the returned object.

function getMeALaptop(p, r, s){
  return {processor: p, ram: r, storage: s}
}

var {ram} = getMeALaptop("i7", "8GB", "2TB");
console.log(ram);

The result is: 8GB

Task 14: The getMeAVideo function returns an object. Extract the title and language values from the returned object.

function getMeAVideo(l, g, c, t, l){
  return {
    length: l,
    host: g,
    category: c,
    title: t,
    language: l
  }
}

var {title, language} = getMeAVideo("30min", "Nawras", "Education", "JS rest operator", "Arabic");
console.log(title, language);

The result is: JS rest operator Arabic

Task 15: The userInfo function returns an object. Extract the firstName, lastName, and email values from the returned object.

function userInfo(f, l, u, e){
  return {
    firstName: f,
    lastName: l,
    username: u,
    email: e
  }
};

var {firstName, lastName, email} = userInfo("Ola", "Rasi", "OlaRasi89", "olaRasi@gmail.com" );
console.log(firstName, lastName, email);

The result is: Ola Rasi olaRasi@gmail.com

Task 16: Check the following code.

function getMeALaptop(p, r, s){
  return {processor: p, ram: r, storage: s}
}

var {processor, ...rest} = getMeALaptop("i7", "8GB", "2TB");
console.log(processor, rest);

The result is: i7 {ram: "8GB", storage: "2TB"}

Task 17: Refer to task 14; extract the host value from the object, and collect the remaining values in the other object.

function getMeAVideo(l, g, c, t, l){
  return {
    length: l,
    host: g,
    category: c,
    title: t,
    language: l
  }
}

var {host, ...other} = getMeAVideo("30min", "Nawras", "Education", "JS rest operator", "Arabic");
console.log(host, other);

The result is: Nawras {length: "Arabic", category: "Education", title: "JS rest operator", language: "Arabic"}

Task 18: Refer to task 15; extract the username and email values from the object, and collect the remaining values in the other object.

function userInfo(f, l, u, e){
  return {
    firstName: f,
    lastName: l,
    username: u,
    email: e
  }
};

var {username, email, ...other} = userInfo("Ola", "Rasi", "OlaRasi89", "olaRasi@gmail.com" );
console.log(username, email, other);

The result is: OlaRasi89 olaRasi@gmail.com {firstName: "Ola", lastName: "Rasi"}

The Arguments Object¶

Task 19: Check the following code.

function displayArguments(a, b, c, d){
  return arguments;
}

var result = displayArguments(4, 5, 7, 10);
console.log(result);

The result is: Arguments(4) [4, 5, 7, 10, callee: ƒ, Symbol(Symbol.iterator): ƒ]

Task 20: Refer to task 19; what is the type of result?

function displayArguments(a, b, c, d){
  return arguments;
}

var result = displayArguments(4, 5, 7, 10);
console.log(typeof result);

The result is: object

Task 21: Refer to task 19; what is the result of result[0], result[1], result[2], result[4]?

function displayArguments(a, b, c, d){
  return arguments;
}

var result = displayArguments(4, 5, 7, 10);
console.log(result[0], result[1], result[2], result[3]);

The result is: 4 5 7 10

Task 22: Re-write task 6 using the argument object.

function calc(a1, a2, a3, a4, a5, a6, a7, a8){
  return arguments;
}

var result = calc(10, 20, 30, 40, 50, 60, 70, 80);
console.log(result[0], result[1], result[2], result[3], result[4], result[5], result[6], result[7]);

The result is: 10 20 30 40 50 60 70 80

Task 23: Create a regular function that takes unlimited number of arguments, and returns them.

function giveMeMore(...values){
  return values;
}

var result = giveMeMore(6, 8, 7, 10, 11);
console.log(result);

The result is: (5) [6, 8, 7, 10, 11]

Task 24: Create a function that takes 5 arguments, it updates the value of the first argument to 105, and it returns the first argument.

function func(arg1, arg2, arg3, arg4, arg5){
  arguments[0] = 105;
  return arguments[0]
}

var result = func(5, 8, 50, 0, 55);
console.log(result);

The result is: 105

Task 25: Create a function that takes unlimited arguments, it updates the value of the ninth argument to arguments[8] * 20, and it returns this argument.

function func(...values){
  arguments[8] = arguments[8] * 20;
  return arguments[8]
}

var result = func(10, 80, 55, 97, 4, 88, 70, 100, 200, 10);
console.log(result);

The result is: 4000