سؤالات مصاحبه استخدامی برنامه نویس جاوا اسکریپت — به همراه جواب

۱۸۸۹ بازدید
آخرین به‌روزرسانی: ۰۷ شهریور ۱۴۰۲
زمان مطالعه: ۵۹ دقیقه
سؤالات مصاحبه استخدامی برنامه نویس جاوا اسکریپت — به همراه جواب

جاوا اسکریپت به عنوان زبان طراحی فرانت‌اند وب، یکی از محبوب‌ترین زبان‌های برنامه‌نویسی دنیا محسوب می‌شود. این محبوبیت در سال‌های اخیر با معرفی واریانت‌های دیگر این زبان از قبیل تایپ اسکریپت و همچنین محیط زمان اجرای Nodejs برای بک‌اند و همچنین انواع مختلف فریمورک‌های فرانت‌اند دوچندان افزایش یافته است. ما در این مطلب از مقالات برنامه‌نویسی بلاگ فرادرس تلاش کرده‌ایم راهنمای جامعی از سؤالات مصاحبه استخدامی برنامه نویس جاوا اسکریپت را گرد هم بیاوریم تا به افرادی که علاقه‌مند به استخدام در چنین مشاغل هستند کمک کرده باشیم، این مصاحبه‌ها را با آمادگی بیشتری سپری کنند.

فهرست مطالب این نوشته

سوالات عمومی

در این بخش سوالات عمومی مرتبط با مصاحبه استخدامی برنامه نویس جاوا اسکریپت را ارائه می‌کنیم.

سوال اول: تفاوت بین undefined و not defined در جاوا اسکریپت چیست؟

سؤال دوم: برای کدام مقدار x نتیجه گزاره‌های زیر یکسان نیست؟

1if( x <= 100 ) {...}
2if( !(x > 100) ) {...}

سؤال سوم: عیب اعلان مستقیم متدها در اشیای جاوا اسکریپت چیست؟

سؤال چهارم: منظور از کلوژر در جاوا اسکریپت چیست؟ (مثال بزنید)

سؤال پنجم: تابعی به نام mul بنویسید که در زمان فراخوانی با ساختار زیر عملکرد صحیحی داشته باشد.

1console.log(mul(2)(3)(4)); // output : 24
2console.log(mul(4)(3)(4)); // output : 48

سؤال ششم: چطور یک آرایه جاوا اسکریپت را خالی کنیم؟

برای نمونه چطور می‌توانیم آرایه زیر را خالی کنیم؟

1var arrayList = ['a', 'b', 'c', 'd', 'e', 'f'];

سؤال هفتم: آرایه بودن یا نبودن یک شیء را چگونه بررسی کنیم؟

سؤال هشتم: خروجی کد زیر چیست؟

1var output = (function(x) {
2  delete x;
3  return x;
4})(0);
5
6console.log(output);

سؤال نهم: خروجی کد زیر چیست؟

1var x = 1;
2var output = (function() {
3  delete x;
4  return x;
5})();
6
7console.log(output);

سؤال دهم: خروجی کد زیر چیست؟

1var x = { foo : 1};
2var output = (function() {
3  delete x.foo;
4  return x.foo;
5})();
6
7console.log(output);

سؤال یازدهم: خروجی کد زیر چیست؟

1var Employee = {
2  company: 'xyz'
3}
4var emp1 = Object.create(Employee);
5delete emp1.company
6console.log(emp1.company);

سؤال دوازدهم: منظور از undefined x 1 در جاوا اسکریپت چیست؟

1var trees = ["redwood", "bay", "cedar", "oak", "maple"];
2delete trees[3];

سؤال سیزدهم: خروجی کد زیر چیست؟

1var trees = ["xyz", "xxxx", "test", "ryan", "apple"];
2delete trees[3];
3console.log(trees.length);

سؤال چهاردهم: خروجی کد زیر چیست؟

1var bar = true;
2console.log(bar + 0);   
3console.log(bar + "xyz");  
4console.log(bar + true);  
5console.log(bar + false);

سؤال پانزدهم: خروجی کد زیر چیست؟

1var z = 1, y = z = typeof y;
2console.log(y);

سؤال شانزدهم: خروجی کد زیر چیست؟

1// NFE (Named Function Expression)
2var foo = function bar() { return 12; };
3typeof bar();

سؤال هفدهم (الف): تفاوت بین اعلان کردن یک تابع به روش‌های زیر کدام است؟

1var foo = function() {
2  // Some code
3}
1function bar () {
2  // Some code
3}

سؤال هفدهم (ب): خروجی کد زیر چیست؟

1bar();
2(function abc(){console.log('something')})();
3function bar(){console.log('bar got called')};

سؤال هجدهم: در چه حالتی تعریف تابع در جاوا اسکریپت hoist نمی‌شود؟

سؤال نوزدهم: خروجی کد زیر چه خواهد بود؟

1var salary = "1000$";
2
3(function () {
4  console.log("Original salary was " + salary);
5
6  var salary = "5000$";
7
8  console.log("My New Salary " + salary);
9})();

سؤال بیستم: تفاوت بین typeof و instanceof چیست؟

سؤال بیست و یکم: طول آرایه انجمنی زیر را محاسبه کنید.

1var counterArray = {
2  A : 3,
3  B : 4
4};
5counterArray["C"] = 1;

سؤال بیست و دوم: تفاوت بین فراخوانی Function, Method و Constructor چیست؟

سؤال بیست و سوم: خروجی کد زیر چه می‌تواند باشد؟

1function User(name) {
2  this.name = name || "JsGeeks";
3}
4
5var person = new User("xyz")["location"] = "USA";
6console.log(person);

سؤال بیست و چهارم: سرویس ورکرها چه هستند و چه زمان استفاده می‌شوند؟

سؤال بیست و پنجم: تفاوت بین متد و تابع در جاوا اسکریپت چیست؟

سؤال بیست و ششم: IIFE چیست و چه فایده‌ای دارد؟

سؤال بیست و هفتم: الگوی سینگلتون را در جاوا اسکریپت توضیح دهید.

سؤال بیست و هشتم: روش‌های مختلف ایجاد اشیا در جاوا اسکریپت کدامند؟

سؤال بیست و نهم: تابعی به نام deepClone بنویسید که یک شیء گرفته و کپی آن را بسازد

1var newObject = deepClone(obj);

سؤال سی‌ام: بهترین روش برای تشخیص مشخصه شیء undefined در JS کدام است؟

سؤال سی‌ و یکم: تابعی به نام Clone بنویسید که شیئی را گرفته و یک کپی از آن را بدون کپی کردن مشخصه‌های عمیق شیء بسازد.

1   var objectLit = {foo : 'Bar'}; 
2	var cloneObj = Clone(obj); // Clone is the function which you have to write 
3	console.log(cloneObj === Clone(objectLit)); // this should return false
4	console.log(cloneObj == Clone(objectLit)); // this should return true

سؤال سی و دوم: promise چیست و چه فایده‌ای دارد؟

سؤال سی و سوم: روش اطمینان از وجود یک کلید در یک شیء جاوا اسکریپت چیست؟

سؤال سی و ‌چهارم: NaN چیست، چرا به آن نیاز داریم و چطور باعث بروز مشکل در صفحه می‌شود؟

سؤال سی و پنجم: باگ کد زیر را تنها با استفاده از ES5 اصلاح کنید

1var arr = [10, 32, 65, 2];
2for (var i = 0; i < arr.length; i++) {
3  setTimeout(function() {
4    console.log('The index of this number is: ' + i);
5  }, 3000);
6}

سؤال سی و ششم: بررسی مقدار یک متغیر در آرایه

سؤال سی و هفتم: بهترین روش برای تشخیص مقدار ارجاعی یک نوع در جاوا اسکریپت کدام است؟

سؤال سی و هشتم: متد Object.create در جاوا اسکریپت چطور عمل می‌کند؟

سؤال سی و نهم: کاربرد توابع سازنده برای ارث‌بری چیست؟

سؤال چهلم: چطور از دستکاری اشیا در جاوا اسکریپت ممانعت کنیم؟

سؤال چهل و یکم: تابع لاگ بنویسید که در لاگ کنسول یک عبارت به ابتدای همه پیام‌ها اضافه کند.

برای نمونه اگر می‌خواهید پیام console.log("Some message") را لاگ کنید، خروجی باید به صورت (your message) Some message باشد.

سؤال چهل و دوم: تابعی بنویسید که رشته را به عنوان لفظ یا شیء تست کند.

برای نمونه می‌توانیم با استفاده از لفظ رشته‌ای و یا با استفاده از تابع سازنده رشته یک رشته متنی تولید کنیم.

1 // using string literal
2 var ltrlStr = "Hi I am string literal";
3 // using String constructor function 
4 var objStr = new String("Hi I am string object");

سؤال چهل و سوم: کاربرد رایج تابع anonymous در جاوا اسکریپت چیست؟

سؤال چهل و چهارم: چطور یک مقدار پیش‌فرض برای پارامتر تعیین کنیم؟

سؤال چهل و پنجم: کد ادغام دو شیء جاوا اسکریپت به روش دینامیک را بنویسید.

فرض کنید دو شیء مانند زیر دارید:

1var person = {
2	name : 'John',
3	age  : 24
4}
5
6var address = {
7	addressLine1 : 'Some Location x',
8	addressLine2 : 'Some Location y',
9	city : 'NewYork'
10} 

تابع ادغامی بنویسید که دو شیء را گرفته و مشخصه‌های شیء دوم را به مشخصه‌های شیء اول اضافه کند.

سؤال چهل و ششم: مشخصه غیر شمارشی در جاوا اسکریپت چیست و چطور می‌توان ساخت؟

سؤال چهل و هفتم: منظور از «اتصال تابع» (Function binding) چیست؟

پرسش‌های کدنویسی

  • ارسال مقادیر با ارجاع یا با مقدار؟

درک این که کدام مقادیر باید به شیوه ارجاعی و کدام یک به شیوه مقداری ارسال شوند، برای یک توسعه‌دهنده جاوا اسکریپت حائز اهمیت بالایی است. به یاد داشته باشید که اشیا شامل آرایه‌ها به صورت ارجاعی ارسال می‌شوند، در حالی که رشته‌ها، مقادیر بولی و اعداد به صورت مقداری ارسال می‌شوند.

سؤال چهل‌ و هشتم: خروجی کد زیر چیست؟

1var strA = "hi there";
2var strB = strA;
3strB="bye there!";
4console.log (strA)

سؤال چهل ‌و نهم: خروجی کد زیر چیست؟

1var objA = {prop1: 42};
2var objB = objA; 
3objB.prop1 = 90;
4console.log(objA) 

سؤال پنجاهم: خروجی کد زیر چیست؟

1var objA = {prop1: 42};
2var objB = objA;
3objB = {};
4console.log(objA)

سؤال پنجاه و یکم: خروجی کد زیر چیست؟

1var arrA = [0,1,2,3,4,5];
2var arrB = arrA;
3arrB[0]=42;
4console.log(arrA)

سؤال پنجاه و دوم: خروجی کد زیر چیست؟

1var arrA = [0,1,2,3,4,5];
2var arrB = arrA.slice();
3arrB[0]=42;
4console.log(arrA)

سؤال پنجاه و سوم: خروجی کد زیر چیست؟

1var arrA = [{prop1: "value of array A!!"},  {someProp: "also value of array A!"}, 3,4,5];
2var arrB = arrA;
3arrB[0].prop1=42;
4console.log(arrA);

سؤال پنجاه و چهارم: خروجی کد زیر چیست؟

1var arrA = [{prop1: "value of array A!!"}, {someProp: "also value of array A!"},3,4,5];
2var arrB = arrA.slice();
3arrB[0].prop1=42;
4arrB[3] = 20;
5console.log(arrA);

پرسش‌های Hoisting

سؤال پنجاه و پنجم: نتیجه دستور console.log(employeeId); چیست؟

  1. Some Value
  2. Undefined
  3. Type Error
  4. ReferenceError: employeeId is not defined

سؤال پنجاه و ششم: خروجی کد زیر چیست؟

1console.log(employeeId);
2var employeeId = '19000';
  1. Some Value
  2. undefined
  3. Type Error
  4. ReferenceError: employeeId is not defined

سؤال پنجاه و هفتم: خروجی کد زیر چیست؟

1var employeeId = '1234abe';
2(function(){
3	console.log(employeeId);
4	var employeeId = '122345';
5})();
  1. '122345'
  2. undefined
  3. Type Error
  4. ReferenceError: employeeId is not defined

سؤال پنجاه و هشتم: خروجی کد زیر چیست؟

1var employeeId = '1234abe';
2(function() {
3	console.log(employeeId);
4	var employeeId = '122345';
5	(function() {
6		var employeeId = 'abc1234';
7	}());
8}());
  1. '122345'
  2. undefined
  3. '1234abe'
  4. ReferenceError: employeeId is not defined

سؤال پنجاه و نهم: خروجی کد زیر چیست؟

1(function() {
2	console.log(typeof displayFunc);
3	var displayFunc = function(){
4		console.log("Hi I am inside displayFunc");
5	}
6}());
  1. undefined
  2. function
  3. 'Hi I am inside displayFunc'
  4. ReferenceError: displayFunc is not defined

سؤال شصتم: خروجی کد زیر چیست؟

1var employeeId = 'abc123';
2function foo(){
3	employeeId = '123bcd';
4	return;
5}
6foo();
7console.log(employeeId);
  1. undefined
  2. '123bcd'
  3. 'abc123'
  4. ReferenceError: employeeId is not defined

سؤال شصت و یکم: خروجی کد زیر چیست؟

1var employeeId = 'abc123';
2
3function foo() {
4	employeeId = '123bcd';
5	return;
6
7	function employeeId() {}
8}
9foo();
10console.log(employeeId);
  1. undefined
  2. '123bcd'
  3. 'abc123'
  4. ReferenceError: employeeId is not defined

سؤال شصت و دوم: خروجی کد زیر چیست؟

1var employeeId = 'abc123';
2
3function foo() {
4	employeeId();
5	return;
6
7	function employeeId() {
8		console.log(typeof employeeId);
9	}
10}
11foo();
  1. undefined
  2. function
  3. string
  4. ReferenceError: employeeId is not defined

سؤال شصت و سوم: خروجی کد زیر چیست؟

1function foo() {
2	employeeId();
3	var product = 'Car'; 
4	return;
5
6	function employeeId() {
7		console.log(product);
8	}
9}
10foo();
  1. undefined
  2. Type Error
  3. 'Car'
  4. ReferenceError: product is not defined

سؤال شصت و چهارم: خروجی کد زیر چیست؟

1(function foo() {
2	bar();
3
4	function bar() {
5		abc();
6		console.log(typeof abc);
7	}
8
9	function abc() {
10		console.log(typeof bar);
11	}
12}());
  1. undefined undefined
  2. Type Error
  3. function function
  4. ReferenceError: bar is not defined

سؤال شصت و پنجم: خروجی کد زیر چیست؟

1(function() {
2	'use strict';
3
4	var person = {
5		name: 'John'
6	};
7	person.salary = '10000$';
8	person['country'] = 'USA';
9
10	Object.defineProperty(person, 'phoneNo', {
11		value: '8888888888',
12		enumerable: true
13	})
14
15	console.log(Object.keys(person)); 
16})();
  1. Type Error
  2. undefined
  3. ["name", "salary", "country", "phoneNo"]
  4. ["name", "salary", "country"]

سؤال شصت و ششم: خروجی کد زیر چیست؟

1(function() {
2	'use strict';
3
4	var person = {
5		name: 'John'
6	};
7	person.salary = '10000$';
8	person['country'] = 'USA';
9
10	Object.defineProperty(person, 'phoneNo', {
11		value: '8888888888',
12		enumerable: false
13	})
14
15	console.log(Object.keys(person)); 
16})();
  1. Type Error
  2. undefined
  3. ["name", "salary", "country", "phoneNo"]
  4. ["name", "salary", "country"]

سؤال شصت و هفتم: خروجی کد زیر چیست؟

1(function() {
2	var objA = {
3		foo: 'foo',
4		bar: 'bar'
5	};
6	var objB = {
7		foo: 'foo',
8		bar: 'bar'
9	};
10	console.log(objA == objB);
11	console.log(objA === objB);
12}());
  1. false true
  2. false false
  3. true false
  4. true true

سؤال شصت و هشتم: خروجی کد زیر چیست؟

1(function() {
2	var objA = new Object({foo: "foo"});
3	var objB = new Object({foo: "foo"});
4	console.log(objA == objB);
5	console.log(objA === objB);
6}());
  1. false true
  2. false false
  3. true false
  4. true true

سؤال شصت و نهم: خروجی کد زیر چیست؟

1(function() {
2	var objA = Object.create({
3		foo: 'foo'
4	});
5	var objB = Object.create({
6		foo: 'foo'
7	});
8	console.log(objA == objB);
9	console.log(objA === objB);
10}());
  1. false true
  2. false false
  3. true false
  4. true true

سؤال هفتادم: خروجی کد زیر چیست؟

1(function() {
2	var objA = Object.create({
3		foo: 'foo'
4	});
5	var objB = Object.create(objA);
6	console.log(objA == objB);
7	console.log(objA === objB);
8}());
  1. false true
  2. false false
  3. true false
  4. true true

سؤال هفتاد و یکم: خروجی کد زیر چیست؟

1(function() {
2	var objA = Object.create({
3		foo: 'foo'
4	});
5	var objB = Object.create(objA);
6	console.log(objA.toString() == objB.toString());
7	console.log(objA.toString() === objB.toString());
8}());
  1. false true
  2. false false
  3. true false
  4. true true

سؤال هفتاد و دوم: خروجی کد زیر چیست؟

1(function() {
2	var objA = Object.create({
3		foo: 'foo'
4	});
5	var objB = objA;
6	console.log(objA == objB);
7	console.log(objA === objB);
8	console.log(objA.toString() == objB.toString());
9	console.log(objA.toString() === objB.toString());
10}());
  1. true true true false
  2. true false true true
  3. true true true true
  4. true true false false

سؤال هفتاد و سوم: خروجی کد زیر چیست؟

1(function() {
2	var objA = Object.create({
3		foo: 'foo'
4	});
5	var objB = objA;
6	objB.foo = 'bar';
7	console.log(objA.foo);
8	console.log(objB.foo);
9}());
  1. foo bar
  2. bar bar
  3. foo foo
  4. bar foo

سؤال هفتاد و چهارم: خروجی کد زیر چیست؟

1(function() {
2	var objA = Object.create({
3		foo: 'foo'
4	});
5	var objB = objA;
6	objB.foo = 'bar';
7
8	delete objA.foo;
9	console.log(objA.foo);
10	console.log(objB.foo);
11}());
  1. foo bar
  2. bar bar
  3. foo foo
  4. bar foo

سؤال هفتاد و پنجم: خروجی کد زیر چیست؟

1(function() {
2	var objA = {
3		foo: 'foo'
4	};
5	var objB = objA;
6	objB.foo = 'bar';
7
8	delete objA.foo;
9	console.log(objA.foo);
10	console.log(objB.foo);
11}());
  1. foo bar
  2. undefined undefined
  3. foo foo
  4. undefined bar

آرایه‌ها

سؤال هفتاد و ششم: خروجی کد زیر چیست؟

1(function() {
2	var array = new Array('100');
3	console.log(array);
4	console.log(array.length);
5}());
  1. undefined undefined
  2. [undefined × 100] 100
  3. ["100"] 1
  4. ReferenceError: array is not defined

سؤال هفتاد و هفتم: خروجی کد زیر چیست؟

1(function() {
2	var array1 = [];
3	var array2 = new Array(100);
4	var array3 = new Array(['1',2,'3',4,5.6]);
5	console.log(array1);
6	console.log(array2);
7	console.log(array3);
8	console.log(array3.length);
9}());
  1. [] [] [Array[5]] 1
  2. [] [undefined × 100] Array[5] 1
  3. [] [] ['1',2,'3',4,5.6] 5
  4. [] [] [Array[5]] 5

سؤال هفتاد و هشتم: خروجی کد زیر چیست؟

1(function () {
2  var array = new Array('a', 'b', 'c', 'd', 'e');
3  array[10] = 'f';
4  delete array[10];
5  console.log(array.length);
6}());
  1. 11
  2. 5
  3. 6
  4. undefined

سؤال هفتاد و نهم: خروجی کد زیر چیست؟

1(function(){
2	var animal = ['cow','horse'];
3		animal.push('cat');
4		animal.push('dog','rat','goat');
5		console.log(animal.length);
6})();
  1. 4
  2. 5
  3. 6
  4. undefined

سؤال هشتادم: خروجی کد زیر چیست؟

1(function(){
2	var animal = ['cow','horse'];
3		animal.push('cat');
4		animal.unshift('dog','rat','goat');
5		console.log(animal);
6})();
  1. ['dog', 'rat', 'goat', 'cow', 'horse', 'cat']
  2. ['cow', 'horse', 'cat', 'dog', 'rat', 'goat']
  3. Type Error
  4. undefined

سؤال هشتاد و یکم: خروجی کد زیر چیست؟

1(function(){
2	var array = [1,2,3,4,5];
3	console.log(array.indexOf(2));
4	console.log([{name: 'John'},{name : 'John'}].indexOf({name:'John'}));
5	console.log([[1],[2],[3],[4]].indexOf([3]));
6	console.log("abcdefgh".indexOf('e'));
7})();
  1. 1 -1 -1 4
  2. 1 0 -1 4
  3. 1 -1 -1 -1
  4. 1 undefined -1 4

سؤال هشتاد و دوم: خروجی کد زیر چیست؟

1(function(){
2	var array = [1,2,3,4,5,1,2,3,4,5,6];
3	console.log(array.indexOf(2));
4	console.log(array.indexOf(2,3));
5	console.log(array.indexOf(2,10));
6})();
  1. 1 -1 -1
  2. 1 6 -1
  3. 1 1 -1
  4. 1 undefined undefined

سؤال هشتاد و سوم: خروجی کد زیر چیست؟

1(function(){
2	var numbers = [2,3,4,8,9,11,13,12,16];
3	var even = numbers.filter(function(element, index){
4		return element % 2 === 0; 
5	});
6	console.log(even);
7
8	var containsDivisibleby3 = numbers.some(function(element, index){
9		return element % 3 === 0;
10	});
11
12	console.log(containsDivisibleby3);	
13})();
  1. [2, 4, 8, 12, 16] [0, 3, 0, 0, 9, 0, 12]
  2. [2, 4, 8, 12, 16] [3, 9, 12]
  3. [2, 4, 8, 12, 16] true
  4. [2, 4, 8, 12, 16] false

سؤال هشتاد و چهارم: خروجی کد زیر چیست؟

1(function(){
2	var containers = [2,0,false,"", '12', true];
3	var containers = containers.filter(Boolean);
4	console.log(containers);
5	var containers = containers.filter(Number);
6	console.log(containers);
7	var containers = containers.filter(String);
8	console.log(containers);
9	var containers = containers.filter(Object);
10	console.log(containers);		
11})();
  1. [2, '12', true] [2, '12', true] [2, '12', true] [2, '12', true]
  2. [false, true] [2] ['12'] []
  3. [2,0,false,"", '12', true] [2,0,false,"", '12', true] [2,0,false,"", '12', true] [2,0,false,"", '12', true]
  4. [2, '12', true] [2, '12', true, false] [2, '12', true,false] [2, '12', true,false]

سؤال هشتاد و پنجم: خروجی کد زیر چیست؟

1(function(){
2	var list = ['foo','bar','john','ritz'];
3	    console.log(list.slice(1));	
4	    console.log(list.slice(1,3));
5	    console.log(list.slice());
6	    console.log(list.slice(2,2));
7	    console.log(list);				
8})();
  1. ['bar', 'john', 'ritz'] ['bar', 'john'] ['foo', 'bar', 'john', 'ritz'] [] ['foo', 'bar', 'john', 'ritz']
  2. ['bar', 'john', 'ritz'] ['bar', 'john','ritz] ['foo', 'bar', 'john', 'ritz'] [] ['foo', 'bar', 'john', 'ritz']
  3. ['john', 'ritz'] ['bar', 'john'] ['foo', 'bar', 'john', 'ritz'] [] ['foo', 'bar', 'john', 'ritz']
  4. ['foo'] ['bar', 'john'] ['foo', 'bar', 'john', 'ritz'] [] ['foo', 'bar', 'john', 'ritz']

سؤال هشتاد و ششم: خروجی کد زیر چیست؟

1(function(){
2	var list = ['foo','bar','john'];
3	    console.log(list.splice(1));		
4	    console.log(list.splice(1,2));
5	    console.log(list);			
6})();
  1. ['bar', 'john'] [] ['foo']
  2. ['bar', 'john'] [] ['bar', 'john']
  3. ['bar', 'john'] ['bar', 'john'] ['bar', 'john']
  4. ['bar', 'john'] [] []

سؤال هشتاد و هفتم: خروجی کد زیر چیست؟

1(function(){
2	var arrayNumb = [2, 8, 15, 16, 23, 42];
3	arrayNumb.sort();
4	console.log(arrayNumb);
5})();
  1. [2, 8, 15, 16, 23, 42]
  2. [42, 23, 26, 15, 8, 2]
  3. [15, 16, 2, 23, 42, 8]
  4. [2, 8, 15, 16, 23, 42]

تابع‌ها

سؤال هشتاد و هشتم: خروجی کد زیر چیست؟

1function funcA(){
2	console.log("funcA ", this);
3	(function innerFuncA1(){
4		console.log("innerFunc1", this);
5		(function innerFunA11(){
6			console.log("innerFunA11", this);
7		})();
8	})();
9}
10	
11console.log(funcA());
  1. funcA Window {...} innerFunc1 Window {...} innerFunA11 Window {...}
  2. undefined
  3. Type Error
  4. ReferenceError: this is not defined

سؤال هشتاد و نهم: خروجی کد زیر چیست؟

1var obj = {
2	message: "Hello",
3	innerMessage: !(function() {
4		console.log(this.message);
5	})()
6};
7	
8console.log(obj.innerMessage);
  1. ReferenceError: this.message is not defined
  2. undefined
  3. Type Error
  4. undefined true

سؤال نودم: خروجی کد زیر چیست؟

1var obj = {
2	message: "Hello",
3	innerMessage: function() {
4		return this.message;
5	}
6};
7	
8console.log(obj.innerMessage());
  1. Hello
  2. undefined
  3. Type Error
  4. ReferenceError: this.message is not defined

سؤال نود و یکم: خروجی کد زیر چیست؟

1var obj = {
2  message: 'Hello',
3  innerMessage: function () {
4    (function () {
5      console.log(this.message);
6    }());
7  }
8};
9console.log(obj.innerMessage());
  1. Type Error
  2. Hello
  3. undefined
  4. ReferenceError: this.message is not defined

سؤال نود و دوم: خروجی کد زیر چیست؟

1var obj = {
2  message: 'Hello',
3  innerMessage: function () {
4  	var self = this;
5    (function () {
6      console.log(self.message);
7    }());
8  }
9};
10console.log(obj.innerMessage());
  1. Type Error
  2. 'Hello'
  3. undefined
  4. ReferenceError: self.message is not defined

سؤال نود و سوم: خروجی کد زیر چیست؟

1function myFunc(){
2	console.log(this.message);
3}
4myFunc.message = "Hi John";
5	
6console.log(myFunc());
  1. Type Error
  2. 'Hi John'
  3. undefined
  4. ReferenceError: this.message is not defined

سؤال نود و چهارم: خروجی کد زیر چیست؟

1function myFunc(){
2	console.log(myFunc.message);
3}
4myFunc.message = "Hi John";
5	
6console.log(myFunc());
  1. Type Error
  2. 'Hi John'
  3. undefined
  4. ReferenceError: this.message is not defined

سؤال نود و پنجم: خروجی کد زیر چیست؟

1function myFunc() {
2  myFunc.message = 'Hi John';
3  console.log(myFunc.message);
4}
5console.log(myFunc());
  1. Type Error
  2. 'Hi John'
  3. undefined
  4. ReferenceError: this.message is not defined

سؤال نود و ششم: خروجی کد زیر چیست؟

1function myFunc(param1,param2) {
2  console.log(myFunc.length);
3}
4console.log(myFunc());
5console.log(myFunc("a","b"));
6console.log(myFunc("a","b","c","d"));
  1. 2 2 2
  2. 0 2 4
  3. undefined
  4. ReferenceError

سؤال نود و هفتم: خروجی کد زیر چیست؟

1function myFunc() {
2  console.log(arguments.length);
3}
4console.log(myFunc());
5console.log(myFunc("a","b"));
6console.log(myFunc("a","b","c","d"));
  1. 2 2 2
  2. 0 2 4
  3. undefined
  4. ReferenceError

شیءگرایی

سؤال نود و هشتم: خروجی کد زیر چیست؟

1function Person(name, age){
2	this.name = name || "John";
3	this.age = age || 24;
4	this.displayName = function(){
5		console.log(this.name);
6	}
7}
8
9Person.name = "John";
10Person.displayName = function(){
11	console.log(this.name);
12}
13
14var person1 = new Person('John');
15	person1.displayName();
16	Person.displayName();
  • John Person
  • John John
  • John undefined
  • John John

دامنه‌ها

سؤال نود و نهم: خروجی کد زیر چیست؟

1function passWordMngr() {
2	var password = '12345678';
3	this.userName = 'John';
4	return {
5		pwd: password
6	};
7}
8// Block End
9var userInfo = passWordMngr();
10console.log(userInfo.pwd);
11console.log(userInfo.userName);
  1. 12345678 Window
  2. 12345678 John
  3. 12345678 undefined
  4. undefined undefined

سؤال صدم: خروجی کد زیر چیست؟

1var employeeId = 'aq123';
2function Employee() {
3  this.employeeId = 'bq1uy';
4}
5console.log(Employee.employeeId);
  1. Reference Error
  2. aq123
  3. bq1uy
  4. undefined

سؤال صد و یکم: خروجی کد زیر چیست؟

1var employeeId = 'aq123';
2
3function Employee() {
4	this.employeeId = 'bq1uy';
5}
6console.log(new Employee().employeeId);
7Employee.prototype.employeeId = 'kj182';
8Employee.prototype.JobId = '1BJKSJ';
9console.log(new Employee().JobId);
10console.log(new Employee().employeeId);
  1. bq1uy 1BJKSJ bq1uy undefined
  2. bq1uy 1BJKSJ bq1uy
  3. bq1uy 1BJKSJ kj182
  4. undefined 1BJKSJ kj182

سؤال صد و دوم: خروجی کد زیر چیست؟

1var employeeId = 'aq123';
2(function Employee() {
3	try {
4		throw 'foo123';
5	} catch (employeeId) {
6		console.log(employeeId);
7	}
8	console.log(employeeId);
9}());
  1. foo123 aq123
  2. foo123 foo123
  3. aq123 aq123
  4. foo123 undefined

Call, Apply, Bind

سؤال صد و سوم: خروجی کد زیر چیست؟

1(function() {
2	var greet = 'Hello World';
3	var toGreet = [].filter.call(greet, function(element, index) {
4		return index > 5;
5	});
6	console.log(toGreet);
7}());
  1. Hello World
  2. undefined
  3. World
  4. ['W', 'o', 'r', 'l', 'd']

سؤال صد و چهارم: خروجی کد زیر چیست؟

1(function() {
2	var fooAccount = {
3		name: 'John',
4		amount: 4000,
5		deductAmount: function(amount) {
6			this.amount -= amount;
7			return 'Total amount left in account: ' + this.amount;
8		}
9	};
10	var barAccount = {
11		name: 'John',
12		amount: 6000
13	};
14	var withdrawAmountBy = function(totalAmount) {
15		return fooAccount.deductAmount.bind(barAccount, totalAmount);
16	};
17	console.log(withdrawAmountBy(400)());
18	console.log(withdrawAmountBy(300)());
19}());
  1. Total amount left in account: 5600 Total amount left in account: 5300
  2. undefined undefined
  3. Total amount left in account: 3600 Total amount left in account: 3300
  4. Total amount left in account: 5600 Total amount left in account: 5600

سؤال صد و پنجم: خروجی کد زیر چیست؟

1(function() {
2	var fooAccount = {
3		name: 'John',
4		amount: 4000,
5		deductAmount: function(amount) {
6			this.amount -= amount;
7			return this.amount;
8		}
9	};
10	var barAccount = {
11		name: 'John',
12		amount: 6000
13	};
14	var withdrawAmountBy = function(totalAmount) {
15		return fooAccount.deductAmount.apply(barAccount, [totalAmount]);
16	};
17	console.log(withdrawAmountBy(400));
18	console.log(withdrawAmountBy(300));
19	console.log(withdrawAmountBy(200));
20}());
  1. 5600 5300 5100
  2. 3600 3300 3100
  3. 5600 3300 5100
  4. undefined undefined undefined

سؤال صد و ششم: خروجی کد زیر چیست؟

1(function() {
2	var fooAccount = {
3		name: 'John',
4		amount: 6000,
5		deductAmount: function(amount) {
6			this.amount -= amount;
7			return this.amount;
8		}
9	};
10	var barAccount = {
11		name: 'John',
12		amount: 4000
13	};
14	var withdrawAmountBy = function(totalAmount) {
15		return fooAccount.deductAmount.call(barAccount, totalAmount);
16	};
17	console.log(withdrawAmountBy(400));
18	console.log(withdrawAmountBy(300));
19	console.log(withdrawAmountBy(200));
20}());
  • 5600 5300 5100
  • 3600 3300 3100
  • 5600 3300 5100
  • undefined undefined undefined

سؤال صد و هفتم: خروجی کد زیر چیست؟

1(function greetNewCustomer() {
2	console.log('Hello ' + this.name);
3}.bind({
4	name: 'John'
5})());
  1. Hello John
  2. Reference Error
  3. Window
  4. undefined

Callback Functions

سؤال صد و هشتم: خروجی کد زیر چیست؟

1function getDataFromServer(apiUrl){
2    var name = "John";
3	return {
4		then : function(fn){
5			fn(name);
6		}
7	}
8}
9
10getDataFromServer('www.google.com').then(function(name){
11	console.log(name);
12});
13
  1. John
  2. undefined
  3. Reference Error
  4. fn is not defined

سؤال صد و نهم: خروجی کد زیر چیست؟

1(function(){
2	var arrayNumb = [2, 8, 15, 16, 23, 42];
3	Array.prototype.sort = function(a,b){
4		return a - b;
5	};
6	arrayNumb.sort();
7	console.log(arrayNumb);
8})();
9
10(function(){
11	var numberArray = [2, 8, 15, 16, 23, 42];
12	numberArray.sort(function(a,b){
13		if(a == b){
14			return 0;
15		}else{
16			return a < b ? -1 : 1;
17		}
18	});
19	console.log(numberArray);
20})();
21
22(function(){
23	var numberArray = [2, 8, 15, 16, 23, 42];
24	numberArray.sort(function(a,b){
25		return a-b;
26	});
27	console.log(numberArray);
28})();
  1. [2, 8, 15, 16, 23, 42] [2, 8, 15, 16, 23, 42] [2, 8, 15, 16, 23, 42]
  2. undefined undefined undefined
  3. [42, 23, 16, 15, 8, 2] [42, 23, 16, 15, 8, 2] [42, 23, 16, 15, 8, 2]
  4. Reference Error

گزاره‌های Return

سؤال صد و دهم: خروجی کد زیر چیست؟

1(function(){
2	function sayHello(){
3		var name = "Hi John";
4		return 
5		{
6			fullName: name
7		}
8	}
9	console.log(sayHello().fullName);
10})();
  1. Hi John
  2. undefined
  3. Reference Error
  4. Uncaught TypeError: Cannot read property 'fullName' of undefined

سؤال صد و یازدهم: خروجی کد زیر چیست؟

1function getNumber(){
2	return (2,4,5);
3}
4
5var numb = getNumber();
6console.log(numb);
  1. 5
  2. undefined
  3. 2
  4. (2,4,5)

سؤال صد و دوازدهم: خروجی کد زیر چیست؟

1function getNumber(){
2	return;
3}
4
5var numb = getNumber();
6console.log(numb);
  1. null
  2. undefined
  3. ""
  4. 0

سؤال صد و سیزدهم: خروجی کد زیر چیست؟

1function mul(x){
2	return function(y){
3		return [x*y, function(z){
4			return x*y + z;
5		}];
6	}
7}
8
9console.log(mul(2)(3)[0]);
10console.log(mul(2)(3)[1](4));
  1. 6, 10
  2. undefined undefined
  3. Reference Error
  4. 10, 6

سؤال صد و چهاردهم: خروجی کد زیر چیست؟

1function mul(x) {
2	return function(y) {
3		return {
4			result: x * y,
5			sum: function(z) {
6				return x * y + z;
7			}
8		};
9	};
10}
11console.log(mul(2)(3).result);
12console.log(mul(2)(3).sum(4));
  1. 6, 10
  2. undefined undefined
  3. Reference Error
  4. 10, 6

سؤال صد و پانزدهم: خروجی کد زیر چیست؟

1function mul(x) {
2	return function(y) {
3		return function(z) {
4			return function(w) {
5				return function(p) {
6					return x * y * z * w * p;
7				};
8			};
9		};
10	};
11}
12console.log(mul(2)(3)(4)(5)(6));
  1. 720
  2. undefined
  3. Reference Error
  4. Type Error

سؤال صد و شانزدهم: خروجی کد زیر چیست؟

1function getName1(){
2	console.log(this.name);
3}
4
5Object.prototype.getName2 = () =>{
6	console.log(this.name)
7}
8
9let personObj = {
10	name:"Tony",
11	print:getName1
12}
13
14personObj.print();
15personObj.getName2();
  1. undefined undefined
  2. Tony undefined
  3. undefined Tony
  4. Tony Tony

پاسخ سوالات

پاسخ سوال اول

در زبان برنامه‌نویسی جاوا اسکریپت اگر بخواهید از متغیرهایی استفاده کنید که وجود ندارند و اعلان هم نشده‌اند، جاوا اسکریپت خطایی به صورت زیر صادر می‌کند:

var name is not defined

و در ادامه اجرای اسکریپت متوقف می‌شود. اما اگر از نوع متغیر undeclared_variable استفاده کرده باشید، مقدار undefined بازگشت می‌یابد.

پیش از ادامه بحث باید تفاوت بین تعریف کردن (Define) و اعلان کردن (Declare) یک متغیر را به خوبی درک کنیم.

عبارت var x یک اعلان است، زیرا تعریف نمی‌کند که متغیر چه مقداری را باید بگیرد، بلکه ما فقط وجود متغیر و نیاز به تخصیص حافظه را اعلان می‌کنیم.

1var x; // declaring x
2console.log(x); // output: undefined

از سوی دیگر عبارت var x = 1 هم اعلان و هم تعریف کردن یک متغیر است چون اینجا هر دو کار اعلان کردن و انتساب مقدار برای متغیر x در یک خط انجام یافته است. این کار به طور کلی «مقداردهی» (initialisation) نامیده می‌شود. در زبان جاوا اسکریپت هم اعلان متغیر و هم اعلان تابع در ابتدای دامنه‌ای که قرار است اعلان صورت گیرد انجام می‌یابد و سپس انتساب صورت می‌گیرد. این سری وقایع به نام «برافرازی» (hoisting) شناخته می‌شوند.

متغیر می‌تواند اعلان شده باشد، اما تعریف نشده باشد. زمانی که تلاش کنیم به چنین متغیری دسترسی یابیم، نتیجه کار undefined خواهد بود.

1var x; // Declaration
2typeof x === 'undefined'; // Will return true

متغیر می‌تواند نه اعلان و نه تعریف شده باشد. در چنین حالتی اگر تلاش کنیم به چنین متغیری ارجاع بدهیم، نتیجه not defined خواهد بود.

console.log(y);// Output: ReferenceError: y is not defined

پاسخ سؤال دوم

NaN <= 100 مقدار false دارد و NaN > 100 هم مقدار false دارد، از این رو اگر مقدار x به صورت NaN باشد، گزاره‌ها یکسان نخواهند بود. همین وضعیت برای هر مقدار x که وقتی به نوع «عددی» (Number) تبدیل شده باشد مقدار NaN بازگشت بدهد، نیز صحیح است. برای نمونه می‌توان به undefined, [1,2,5], {a:22} و غیره اشاره کرد.

به همین دلیل است که باید در زمان کار با متغیرهای عددی توجه ویژه‌ای مبذول دارید. NaN نمی‌تواند با هیچ مقدار عددی دیگری برابر باشد یا از آن‌ها کوچک‌تر یا بزرگتر محاسبه شود. از این رو تنها روش مطمئن برای بررسی این که آیا یک مقدار NaN است یا نه، این است که از تابع ()isNaN استفاده کنیم.

پاسخ سؤال سوم

یکی از معایب اعلان متدها به صورت مستقیم درون اشیای جاوا اسکریپت آن است که از نظر حافظه بسیار غیر بهینه است. با انجام این کار یک کپی جدید از متد برای هر وهله از یک شیء ایجاد می‌شود. به مثال زیر توجه کنید:

1var Employee = function (name, company, salary) {
2  this.name = name || "";       
3  this.company = company || "";
4  this.salary = salary || 5000;
5
6  // We can create a method like this:
7  this.formatSalary = function () {
8      return "$ " + this.salary;
9  };
10};
11
12// Alternatively we can add the method to Employee's prototype:
13Employee.prototype.formatSalary2 = function() {
14    return "$ " + this.salary;
15}
16
17//creating objects
18var emp1 = new Employee('Yuri Garagin', 'Company 1', 1000000);
19var emp2 = new Employee('Dinesh Gupta', 'Company 2', 1039999);
20var emp3 = new Employee('Erich Fromm', 'Company 3', 1299483);

در این حالت، هر وهله از متغیر یعنی emp1, emp2, emp3 کپی خاص خود را از متد theformatSalary دارند. با این حال متد formatSalary2 تنها یک بار به Employee.prototype اضافه خواهد شد.

پاسخ سؤال چهارم

«کلوژر» (closure) تابعی است که درون تابع دیگری (تابع والد نامیده می‌شود) تعریف می‌شود و از این رو به متغیرهای اعلان و تعریف شده درون دامنه تابع والدش دسترسی دارد.

کلوژر به متغیرهای سه دامنه به شرح زیر دسترسی دارد:

  • متغیرهای اعلان شده در دامنه خودش.
  • متغیرهای اعلان شده در دامنه تابع والدش.
  • متغیرهای اعلان شده در فضای نام عمومی.
1var globalVar = "abc"; //Global variable
2
3// Parent self-invoking function
4(function outerFunction (outerArg) { // start of outerFunction's scope
5
6  var outerFuncVar = 'x'; // Variable declared in outerFunction's function scope   
7  
8  // Closure self-invoking function
9  (function innerFunction (innerArg) { // start of innerFunction's scope
10
11    var innerFuncVar = "y"; // variable declared in innerFunction's function scope
12    console.log(         
13      "outerArg = " + outerArg + "\n" +
14      "outerFuncVar = " + outerFuncVar + "\n" +
15      "innerArg = " + innerArg + "\n" +
16      "innerFuncVar = " + innerFuncVar + "\n" +
17      "globalVar = " + globalVar);
18  	
19  // end of innerFunction's scope
20  
21  })(5); // Pass 5 as parameter to our Closure
22
23// end of outerFunction's scope
24
25})(7); // Pass 7 as parameter to the Parent function

در کد فوق innerFunction یک کلوژر است که ‌ درون outerFunction تعریف شده است و از این رو به همه متغیرهایی که درون دامنه outerFunction's اعلان و تعریف شده‌اند و همچنین به هر متغیری که درون دامنه عمومی برنامه قرار دارد، دسترسی پیدا می‌کند.

خروجی کد فوق چنین خواهد بود:

outerArg = 7
uterFuncVar = x
innerArg = 5
innerFuncVar = y
globalVar = abc

پاسخ سؤال پنجم

1function mul (x) {
2  return function (y) { // anonymous function
3    return function (z) { // anonymous function
4      return x * y * z;
5    };
6  };
7}

در کد فوق تابع mul آرگومان نخست را پذیرفته و یک تابع ناشناس بازگشت می‌دهد که پارامتر دوم را می‌گیرد و تابع ناشناس آخر را بازگشت می‌دهد که در نهایت پارامتر سوم و نهایی را می‌گیرد. در ادامه تابع آخر x و y و z را صرب در هم کرده و نتیجه عملیات را بازگشت می‌دهد.

در جاوا اسکریپت، تابعی که درون تابع دیگر تعریف شده باشد، به دامنه تابع بیرونی دسترسی دارد و در نتیجه می‌تواند متغیرهای متعلق به تابع والدش را بازگشت دهد، دستکاری کند و یا آن‌ها را به تابع دیگری ارسال کند.

  • تابع وهله‌ای از نوع Object است.
  • تابع می‌تواند مشخصه داشته باشد و یک پیوند به متد سازنده‌اش دارد.
  • تابع می‌تواند به صورت متغیر ذخیره شود.
  • تابع می‌تواند به شکل پارامتر به تابع دیگر ارسال شود.
  • تابع می‌تواند از سوی تابع دیگری بازگشت یابد.

پاسخ سؤال ششم

چندین روش برای خالی کردن آرایه‌های جاوا اسکریپت وجود دارند. در ادامه این روش‌ها را بررسی می‌کنیم.

روش اول

1arrayList = [];

کد فوق متغیر را به صورت یک آرایه جدید خالی تعیین می‌کند. در صورتی ک به آرایه اصلی از هیچ کجا ارجاع نداشته باشد این روش توصیه می‌شود، زیرا در عمل یک آرایه جدید خالی ایجاد می‌کند. توجه کنید که استفاده از این روش نیازمند احتیاط زیادی است، زیرا اگر این ارائه در متغیر دیگری مورد ارجاع قرار گرفته باشد، آرایه مورد ارجاع اصلی بدون تغییر می‌ماند. بنابراین تنها در صورتی باید از این روش استفاده کنید که تنها در متغیر اصلی arrayList آرایه را مورد ارجاع قرار داده باشید.

به مثال زیر توجه کنید:

1var arrayList = ['a', 'b', 'c', 'd', 'e', 'f']; // Created array
2var anotherArrayList = arrayList;  // Referenced arrayList by another variable
3arrayList = []; // Empty the array
4console.log(anotherArrayList); // Output ['a', 'b', 'c', 'd', 'e', 'f']

روش دوم

1arrayList.length = 0;

کد فوق آرایه موجود را با تعیین مقدار صفر برای طول آن پاک می‌کند. این روش خالی کردن آرایه نیز موجب می‌شود که همه متغیرهای ارجاع داده به آرایه اصلی به‌روزرسانی شوند. به مثال زیر توجه کنید:

1var arrayList = ['a', 'b', 'c', 'd', 'e', 'f']; // Created array
2var anotherArrayList = arrayList;  // Referenced arrayList by another variable
3arrayList.length = 0; // Empty the array by setting length to 0
4console.log(anotherArrayList); // Output []

روش سوم

1arrayList.splice(0, arrayList.length);

پیاده‌سازی فوق نیز به خوبی کار خواهد کرد. این روش پاک کردن آرایه موجب به‌روز شدن همه ارجاع‌ها به آرایه اصلی می‌شود.

1var arrayList = ['a', 'b', 'c', 'd', 'e', 'f']; // Created array
2var anotherArrayList = arrayList;  // Referenced arrayList by another variable
3arrayList.splice(0, arrayList.length); // Empty the array by setting length to 0
4console.log(anotherArrayList); // Output []

روش چهارم

1while(arrayList.length) {
2  arrayList.pop();
3}

پیاده‌سازی فوق نیز می‌تواند آرایه را خالی کند. اما استفاده از آن چندان توصیه نمی‌شود.

پاسخ سؤال هفتم

بهترین روش برای فهمیدن این که یک شیء وهله‌ای از یک کلاس خاص است یا نه، استفاده از متد toString از Object.prototype است.

1var arrayList = [1, 2, 3];

یکی از بهترین موارد کاربرد بررسی نوع یک شیء، زمانی است که اقدام به اورلود کردن متد در جاوا اسکریپت کرده‌ایم. برای درک این موضوع فرض کنید متدی به نام greet داریم که می‌تواند یک رشته منفرد و همچنین لیستی از رشته‌ها را دریافت کند. برای این که متد greet قابل استفاده در هر موقعیت باشد باید بدانیم که کدام پارامتر ارسال شده است، یعنی یک پارامتر منفرد است یا لیستی از مقادیر.

1function greet(param) {
2  if() {
3    // here have to check whether param is array or not
4  }
5  else {
6  }
7}

با این حال، در پیاده‌سازی فوق ممکن است نیاز به بررسی نوع آرایه داشته باشیم. به این ترتیب می‌توانیم وجود یک مقدار رشته‌ای منفرد را بررسی کرده و کد منطق آرایه را در بلوک else قرار دهیم که در نهایت ما را به قطعه کد زیر می‌رساند:

1 function greet(param) {
2   if(typeof param === 'string') {
3   }
4   else {
5     // If param is of type array then this block of code would execute
6   }
7 }

اکنون مشکلی با پیگیری دو پیاده‌سازی قبلی نداریم، اما وقتی موقعیتی داشته باشیم که پارامترها به انواع single value, array و object باشند، با مشکل مواجه خواهیم شد.

اکنون اگر بخواهیم نوع آبجکت را نیز بررسی کنیم، می‌توانیم از Object.prototype.toString استفاده کنیم.

1if(Object.prototype.toString.call(arrayList) === '[object Array]') {
2  console.log('Array!');
3}

اگر از jQuery استفاده می‌کنید، می‌توانید از متد isArray در جی‌کوئری نیز بهره بگیرید:

1if($.isArray(arrayList)) {
2  console.log('Array');
3} else {
4  console.log('Not an array');
5}

باید بدانید که جی‌کوئری به طور داخلی از Object.prototype.toString.call برای بررسی آبجکت بودن یک آرایه استفاده می‌کند. در یک مرورگر مدرن می‌توان از کد زیر نیز استفاده کرد:

1Array.isArray(arrayList);

Array.isArray از سوی کروم 5، فایرفاکس 4، اینترنت اکسپلورر 9، اپرا 10.5 و سافاری 5 پشتیبانی می‌شود.

پاسخ سؤال هشتم

کد فوق مقدار 0 را خروجی می‌دهد. عملگر delete برای حذف یک مشخصه از آبجکت مورد استفاده قرار می‌گیرد. در کد فوق x یک شیء نیست بلکه یک متغیر لوکال است. عملگر delete روی متغیرهای لوکال تأثیری ندارد.

پاسخ سؤال نهم

کد فوق مقدار 1 را در خروجی ارائه می‌کند. عملگر delete برای حذف مشخصه از آبجکت استفاده شده است. به این ترتیب x نه یک شیء بلکه یک متغیر سراسری از نوع number است.

پاسخ سؤال دهم

کد فوق مقدار undefined را در خروجی ارائه می‌کند. عملگر delete برای حذف یک مشخصه از آبجکت استفاده می‌شود. در این کد x یک شیء است که مشخصه‌ای به نام foo دارد و یک تابع خود-احضار را شکل داده. ما پس از حذف مشخصه foo از شیء x تلاش می‌کنیم تا به مشخصه foo ارجاع بدهیم که نتیجه آن undefined است.

پاسخ سؤال یازدهم

کد فوق مقدار xyz را در خروجی ارائه می‌کند. در این کد شیء emp1 مشخصه company را به عنوان مشخصه پروتوتایپ دریافت می‌کند. عملگر delete مشخصه پروتوتایپ را حذف نمی‌کند.

شیء emp1 مقدار company را به عنوان مشخصه خودش ندارد. اگر می‌خواهید این موضوع را تست کنید، کد زیر را اجرا نمایید:

console.log(emp1.hasOwnProperty('company')); //output: false

با این حال می‌توانیم مشخصه company را به طور مستقیم با استفاده از delete Employee.company از شیء Employee حذف کنیم یا این که می‌توانیم با بهره‌گیری از مشخصه __proto__ و دستور delete emp1.__proto__.company از شیء emp1 حذف کنیم.

پاسخ سؤال دوازدهم

هنگامی که کد فوق را اجرا کرده و در کنسول توسعه‌دهندگان مرورگر کروم دستور console.log(trees); را اجرا کنید، مقدار زیر را به دست می‌آورید:

["redwood", "bay", "cedar", undefined × 1, "maple"]

در نسخه‌های جدیدتر کروم یکی از کلمه‌های empty یا undefined x 1 را ملاحظه می‌کنید. زمانی که همین کد را در مرورگر فایرفاکس اجرا کنید مقدار زیر را به دست می‌آورید:

["redwood", "bay", "cedar", undefined, "maple"]

بدیهی است که کروم روش خاص خود را برای نمایش اندیس مقداردهی نشده در آرایه‌ها دارد. با این حال هنگامی که trees[3] === undefined را در هر مرورگری بررسی کنید، خروجی مشابه true را دریافت خواهید کرد.

نکته: به خاطر داشته باشید که لزومی به بررسی اندیس مقداردهی نشده در آرایه در trees[3] === 'undefined × 1' وجود ندارد، زیرا خطایی نمایش نمی‌یابد و 'undefined × 1' تنها روشی برای نمایش اندیس مقداردهی نشده در کروم محسوب می‌شود.

پاسخ سؤال سیزدهم

کد فوق مقدار 5 را به عنوان خروجی ارائه می‌کند. زمانی که از عملگر delete برای حذف کردن عناصر یک آرایه بهره بگیریم، طول آرایه تحت تأثیر قرار نمی‌گیرد. حتی در صورتی که همه عناصر یک آرایه را با استفاده از عملگر delete حذف کنید، طول آن هیچ تأثیری نمی‌گیرد.

بنابراین زمانی که عملگر delete یک عنصر آرایه را حذف می‌کند، آن عنصر حذف شده دیگر در آرایه وجود نخواهد داشت. به جای اندیس حذف شده، مقدار undefined x 1 در مرورگر chrome و undefined در اندیس جای می‌گیرد. در این زمان اگر دستور undefined x 1 in chrome and undefined is را اجرا کنید، خروجی کروم چنین خواهد بود:

["xyz", "xxxx", "test", undefined × 1, "apple"]

خروجی فایرفاکس نیز چنین خواهد بود:

["xyz", "xxxx", "test", undefined, "apple"]

پاسخ سوال چهاردهم

کد فوق مقدار 1, "truexyz", 2, 1 را در خروجی ارائه می‌کند. راهنمای کلی عملگر بعلاوه چنین است:

  • عدد + عدد = جمع
  • مقدار بولی + عدد = جمع
  • مقدار بولی + مقدار بولی = جمع
  • عدد + رشته = الحاق
  • رشته + مقدار بولی = الحاق
  • رشته + رشته = الحاق

پاسخ سؤال پانزدهم

کد فوق رشته undefined را در خروجی چاپ می‌کند. بر اساس قاعده شرکت‌پذیری، عملگرهای دارای تقدم یکسان بر اساس خصوصیت شرکت‌پذیری عملگر پردازش می‌شوند. در این مثال شرکت‌پذیری عملگر انتساب از راست به چپ است و از این رو typeof y ابتدا ارزیابی می‌شود که رشته undefined است و به z انتساب می‌یابد و سپس y به مقدار z انتساب می‌یابد. دنباله کلی به صورت زیر است:

1var z;
2z = 1;
3var y;
4z = typeof y;
5y = z;

پاسخ سؤال شانزدهم

خروجی این کد به صورت Reference Error است. برای حل این باگ باید کد را به روش اندکی متفاوت بازنویسی کنیم:

مثال اول

1var bar = function() { return 12; };
2typeof bar();

یا به روش زیر عمل می‌کنیم:

مثال دوم

1function bar() { return 12; };
2typeof bar();

تعریف تابع می‌تواند تنها یک متغیر ارجاعی به صورت نام تابع داشته باشد. در مثال اول bar یک متغیر ارجاعی است که به anonymous function اشاره دارد و در مثال دوم یک انتساب تابع داریم و bar نام تابع است.

1var foo = function bar() {
2  // foo is visible here
3  // bar is visible here
4  console.log(typeof bar()); // Works here :)
5};
6// foo is visible here
7// bar is undefined here

پاسخ سؤال هفدهم (الف)

تفاوت اصلی در این است که تابع foo در زمان اجرا (runtime) تعریف شده و یک «عبارت تابعی» (function expression) نامیده می‌شود، در حالی که تابع bar در زمان parse تعریف شده و «گزاره تابعی» (function statement) نامیده می‌شود. برای درک بهتر آن نگاهی به کد زیر بیندازید:

1// Run-Time function declaration
2  foo(); // Call foo function here, It will give an error
3  var foo = function() {
4    console.log("Hi I am inside Foo");
5  };
1// Parse-Time function declaration
2bar(); // Call bar function here, It will not give an Error
3function bar() {
4  console.log("Hi I am inside Foo");
5}

پاسخ سؤال هفدهم (ب)

خروجی کد فوق چنین است:

bar got called
something

از آنجا که تابع ابتدا فراخوانی می‌شود و در زمان parse تعریف می‌شود، موتور جاوا اسکریپت تلاش می‌کند تا تعاریف زمان parse را یافته و حلقه اجرا را آغاز کند. معنای این حرف آن است که تابع اصلی ابتدا فراخوانی می‌شود، هر چند تعریف در تابع دیگری ارسال شده باشد.

پاسخ سؤال هجدهم

عبارت تابعی را در نظر بگیرید:

1 var foo = function foo() {
2     return 12;
3 }

در جاوا اسکریپت متغیرهای اعلان شده با var و تابع‌ها به صورت hoist-شده هستند. ابتدا تابع hoisting را بررسی می‌کنیم. اساساً مفسر جاوا اسکریپت به دنبال همه اعلان‌های متغیرها می‌گردد و آن‌ها را به ابتدای تابع یعنی جایی که اعلان شده hoist می‌کند. مثال زیر را در نظر بگیرید.

1foo(); // Here foo is still undefined
2var foo = function foo() {
3  return 12;
4};

کد فوق در پس‌زمینه چیزی شبیه زیر است:

1var foo = undefined;
2foo(); // Here foo is undefined
3foo = function foo() {
4  // Some code stuff
5}
1var foo = undefined;
2foo = function foo() {
3  // Some code stuff
4}
5foo(); // Now foo is defined here

پاسخ سؤال نوزدهم

خروجی کد فوق به صورت undefined, 5000$ است، زیرا hoisting رخ داده است. در کد ارائه شده فوق ممکن است ببینید که salary مقدار خارج از دامنه خود را تا زمانی که salary در دامنه درونی دوباره اعلان می‌شود، نگه‌داری می‌کند. اما می‌بینیم که مقدار حقوق hoisting به صورت undefined است. برای درک بهتر این مسئله باید کد زیر را بررسی کنید. در کد زیر متغیر salary به صورت hosit است و در ابتدای دامنه تابع اعلان شده است. هنگامی که مقدار آن را با استفاده از console.log چاپ می‌کنیم، نتیجه undefined است. در ادامه متغیر دوباره اعلان می‌شود و مقدار جدید 5000$ به آن انتساب می‌یابد.

1var salary = "1000$";
2
3(function () {
4  var salary = undefined;
5  console.log("Original salary was " + salary);
6
7  salary = "5000$";
8
9  console.log("My New Salary " + salary);
10})();

پاسخ سؤال بیستم

Typeof یک عملگر است که رشته‌ای با هر نوع که ارسال شده باشد، بازگشت می‌دهد. عملگر typeof بررسی می‌کند آیا یک مقدار به یکی از هفت نوع ابتدایی یعنی number, string, boolean, object, function, undefined یا Symbol تعلق دارد یا نه. typeof(null) مقداری به صورت object بازگشت می‌دهد.

Instanceof هوشمندانه‌تر عمل می‌کند و در سطح پروتوتایپ وارد عمل می‌شود. به طور خاص بررسی می‌کند آیا عملوند مناسبی در هر جایی در زنجیره پروتوتایپ سمت چپ استفاده شده است یا نه. Instanceof روی انواع مقدماتی کاربرد ندارد. عملگر instanceof شیء کنونی را بررسی کرده و در صورتی که آن شیء از نوع خاصی باشد مقدار true بازگشت می‌دهد. به مثال زیر توجه کنید.

1var dog = new Animal();
2dog instanceof Animal; // Output : true

در کد فوق، dog instanceof Animal مقدار true دارد، زیرا dog از Animal.prototype ارث می‌برد.

1var name = new String("xyz");
2name instanceof String; // Output : true

پاسخ سؤال بیست و یکم

قبل از هر چیز باید اشاره کنیم که آرایه انجمنی در جاوا اسکریپت همان شیء است. دوما با این که هیچ تابع یا مشخصه داخلی برای محاسبه طول/اندازه یک شیء وجود ندارد، اما می‌توانیم خودمان چنین تابعی بنویسیم.

روش اول

Object دارای متد keys است که می‌تواند برای محاسبه طول شیء مورد استفاده قرار گیرد.

1Object.keys(counterArray).length; // Output 3

روش دوم

همچنین می‌توانیم طول شیء را با تعریف حلقه روی شیء و شمارش مشخصه‌های شیء محاسبه کنیم. در این روش مشخصه‌هایی که از زنجیره پروتوتایپ شیء هستند نادیده گرفته می‌شوند.

1function getLength(object) {
2  var count = 0;
3  for(key in object) {
4    // hasOwnProperty method check own property of object
5    if(object.hasOwnProperty(key)) count++;
6  }
7  return count;
8}

روش سوم

همه مرورگرهای مدرن از متد etOwnPropertyNames پشتیبانی می‌کنند و از ای رو می‌توانیم با استفاده از کد زیر طول شیء را حساب کنیم:

1Object.getOwnPropertyNames(counterArray).length; // Output 3

روش چهارم

کتابخانه‌های Underscore و lodash دارای متد size هستند که اختصاص به محاسبه طول شیء دارد. توجه کنید که گنجاندن این کتابخانه‌ها صرفاً برای محاسبه طول یک آرایه کار معقولی نیست، اما اگر از قبل در پروژه خود دارید می‌توانید با استفاده از کد زیر طول شیء را حساب کنید:

1_.size({one: 1, two: 2, three: 3});
2=> 3

پاسخ سوال بیست و دوم

اگر با برنامه‌نویسی شیء‌گرا آشنا باشید، به احتمال زیاد با مفاهیم تابع‌، متد و سازنده‌های کلاس نیز آشنا هستید. اما در جاوا اسکریپت این موارد صرفاً سه الگوی کاربرد متفاوت از یک سازه واحد هستند.

تابع‌ها: ساده‌ترین کاربرد یک فراخوانی تابع چنین است.

1function helloWorld(name) {
2  return "hello world, " + name;
3}
4
5helloWorld("JS Geeks"); // "hello world JS Geeks"

متدها در جاوا اسکریپت چیزی بیش از مشخصه‌ شیء از جنس تابع نیستند.

1var obj = {
2  helloWorld : function() {
3    return "hello world, " + this.name;
4  },
5  name: 'John Carter'
6}
7obj.helloWorld(); // // "hello world John Carter"

توجه کنید که helloWorld به مشخصه this در obj اشاره می‌کند. احتمالاً متوجه شده‌اید که this با obj پیوند دارد. اما نکته جالب این است که می‌توانیم یک ارجاع به همان تابع helloWorld را در شیء دیگر کپی کرده و پاسخ متفاوتی دریافت کنیم. به مثال زیر توجه کنید.

1var obj2 = {
2  helloWorld : obj.helloWorld,
3  name: 'John Doe'
4}
5obj2.helloWorld(); // "hello world John Doe"

ممکن است تعجب کنید که در فراخوان متد دقیقاً چه اتفاقی می‌افتد. ر این متد خود عبارت را فرا می‌خوانیم تا اتصال آن با this را تعیین کنیم. عبارت ()obj2.helloWorld به بررسی مشخصه helloWorld از شیء obj می‌پردازد و با استفاده از شیء دریافت‌کننده obj2 آن را فرا می‌خواند.

سومین کاربرد تابع به عنوان «سازنده» (constructor) است. سازنده‌ها نیز همانند تابع‌ها و متدها با استفاده از یک تابع تعریف می‌شوند.

1function Employee(name, age) {
2  this.name = name;
3  this.age = age;
4}
5
6var emp1 = new Employee('John Doe', 28);
7emp1.name; // "John Doe"
8emp1.age; // 28

برخلاف فراخوانی تابع و فراخوانی متد، فراخوانی سازنده مانند new Employee('John Doe', 28) موجب ایجاد یک شیء کاملاً جدید می‌شود و آن را به عنوان مقدار this ارسال می‌کند و به طور ضمنی شیء جدید را به عنوان نتیجه‌اش بازگشت می‌دهد.

نقض اصلی تابع سازنده، مقداردهی شیء است.

پاسخ سؤال بیست و سوم

خروجی کد فوق می‌تواند USA باشد. در این کد new User("xyz") یک شیء کاملاً جدید ایجاد می‌کند و مشخصه ایجاد شده location روی آن و USA به مشخصه مکان شیء انتساب می‌یابد و از سوی فرد مورد ارجاع قرار می‌گیرد.

فرض کنید یک شیء به نام foo ایجاد می‌کند. مقدار USA به foo["location"] انتساب می‌یابد، اما بر اساس مشخصه‌های ECMAScript خود انتساب مقدار سمت راست را بازگشت می‌دهد که در این مورد USA است که در ادامه به Person انتساب خواهد یافت.

برای درک بهتر اتفاقاتی که در کد فوق می‌افتد باید این کد را در کنسول به طور خط به خط اجرا کنیم:

1function User(name) {
2 this.name = name || "JsGeeks";
3}
4
5var person;
6var foo = new User("xyz");
7foo["location"] = "USA";
8// the console will show you that the result of this is "USA"
9

پاسخ سؤال بیست و چهارم

سرویس ورکر یک فناوری است که به وب اپلیکیشن‌ها امکان می‌دهد تا ابتدا از منابع کش ‌شده بهره بگیرند و تجربه پیش‌فرض آفلاین را در اختیار کاربر قرار دهند و تنها پس از بارگذاری کامل صفحه است که اقدام به واکشی داده‌ها از شبکه می‌کند. این مفهوم عموماً به نام «ابتدا-آفلاین» (Offline First) خوانده می‌شود.

سرویس ورکرها به طور فعالانه از پرامیس‌ها بهره می‌گیرند. یک سرویس ورکر باید نصب و فعال شود تا بتواند به رویدادهای واکشی، ارسال و همگام‌‌سازی واکنش نشان دهد.

پاسخ سؤال بیست و پنجم

تفاوت بین تابع و متد در زبان برنامه‌نویسی جاوا اسکریپت بسیار ظریف است. تابع قطعه کدی است که بر اساس نامش فراخوانی می‌شود و خود تابع هیچ ارتباط با شیء ندارد و درون شیء نیز تعریف نمی‌شود. تابع می‌تواند داده‌هایش را به جای دیگری ارسال کند یا از جای دیگری دریافت کند تا عملیاتی رویشان انجام یابد و می‌تواند به طور اختیاری داده‌ها را به صورت خروجی ارائه کند.

1// Function statement
2function myFunc() {
3  // Do some stuff;
4}
5
6// Calling the function
7myFunc();

در کد فوق تابع ()myFunc با شیء ارتباطی ندارد و از این رو از طریق هیچ شیئی احضار نمی‌شود. تابع می‌تواند به صورت یک «عبارت تابعی با احضار بی‌درنگ» (IIFE) مانند مثال زیر باشد.

1// Anonymous Self-invoking Function
2(function() {
3  // Do some stuff;
4})();

در نهایت تابع‌های arrow نیز به شکل زیر هستند:

1const myFunc = arg => {
2    console.log("hello", arg)
3} 

در سوی دیگر، متد قطعه کدی است که به وسیله نامش فراخوانده می‌شود و با یک شیء ارتباط دارد. زمانی که یک متد را به صورت ()obj1.myMethod فرا می‌خوانید، ارجاع به obj1 با متغیر this پیوند می‌یابد. به بیان دیگر، مقدار this همان obj1 درون myMethod خواهد بود. در ادامه برخی مثال‌های دیگر از متدها را ملاحظه می‌کنید.

مثال یکم

1var obj1 = {
2  attribute: "xyz",
3  myMethod: function () {  // Method
4    console.log(this.attribute);
5  }
6};
7
8// Call the method
9obj1.myMethod();

در کد فوق obj1 یک شیء است و myMethod متدی است که با obj1 ارتباط دارد.

مثال دوم

در ES6 با مفهوم کلاس سروکار داریم. از این رو برخی متدها مانند زیر وجود دارند.

1class MyAwesomeClass {
2  myMethod() {
3    console.log("hi there");
4  }
5}
6
7const obj1 = new MyAwesomeClass();
8obj1.myMethod();

توجه کنید که متد نوع خاصی از تابع نیست و تفاوت آن با تابع به شیو اعلان کردنش بستگی ندارد. در واقع شیوه فراخوانی است که تفاوت این دو را مشخص می‌کند. به مثال زیر توجه کنید.

1var obj1 = {
2  prop1: "buddy"
3}; 
4var myFunc = function () {
5  console.log("Hi there", this);
6};
7// let's call myFunc as a function: 
8myFunc(); // will output "Hi there undefined" or "Hi there Window"
9 
10obj1.myMethod = myFunc;
11//now we're calling myFunc as a method of obj1, so this will point to obj1
12obj1.myMethod(); // will print "Hi there" following with obj1. 
13

پاسخ سؤال بیست و ششم

IIFE تابعی است که به محض تعریف شدن اجرا می‌شود. این تابع به طور معمول ناشناس (بی‌نام) است، اما می‌تواند دارای نام نیز باشد. در ادامه نمونه‌ای از یک IIFE را می‌بینید.

1(function() {
2  console.log("Hi, I'm IIFE!");
3})();
4// outputs "Hi, I'm IIFE!"

اگر تفاوت بین گزاره‌های تابعی (function a () {}) و عبارت تابعی (var a = function() {}) را به خاطر داشته باشید، متوجه خواهید شد که IIFE یک عبارت تابعی است. برای این که آن را به یک عبارت تبدیل کنیم، اعلان تابع را درون پرانتز قرار می‌دهیم. در واقع با انجام این کار به پارسر اعلام می‌کنیم این یک عبارت و نه یک گزاره است.

پس از تابع دو پرانتز مشاهده می‌شود که نشانگر شیوه اجرای تابع اعلان شده است.

تابع درون IIFE لزومی به ناشناس بودن ندارد. در واقع تخصیص نام به این توابع به درستی کار می‌کند و به تشخیص مشکلات در زمان دیباگ کردن مشکلات کمک زیادی خواهد کرد.

1(function myIIFEFunc() {
2  console.log("Hi, I'm IIFE!");
3})();
4// outputs "Hi, I'm IIFE!"

توابع IIFE می‌توانند پارامتر بگیرند.

1(function myIIFEFunc(param1) {
2  console.log("Hi, I'm IIFE, " + param1);
3})("Yuri");
4// outputs "Hi, I'm IIFE, Yuri!"

در کد فوق Yuri به پارامتر param1 تابع ارسال شده است.

توابع IIFE می‌توانند مقداری بازگشت دهند.

1var result = (function myIIFEFunc(param1) {
2  console.log("Hi, I'm IIFE, " + param1);
3  return 1;
4})("Yuri");
5// outputs "Hi, I'm IIFE, Yuri!"
6// result variable will contain 1

نیازی به قرار دادن اعلان تابع درون پرانتز وجود ندارد، گرچه این رایج‌ترین شیوه تعریف IIFE است. در عوض می‌توانید از هر یک از شکل‌های زیر بهره بگیرید.

  • ~function(){console.log("hi I'm IIFE")}()
  • !function(){console.log("hi I'm IIFE")}()
  • +function(){console.log("hi I'm IIFE")}()
  • -function(){console.log("hi I'm IIFE")}()
  • (function(){console.log("hi I'm IIFE")}());
  • var i = function(){console.log("hi I'm IIFE")}();
  • true && function(){ console.log("hi I'm IIFE") }();
  • 0, function(){ console.log("hi I'm IIFE") }();
  • new function(){ console.log("hi I'm IIFE") }
  • new function(){ console.log("hi I'm IIFE") }()

توجه کنید که نباید از همه این اشکال تعریف تابع همزمان استفاده کنید، این موارد صرفاً به این خاطر ارائه شده‌اند که هر گاه آن‌ها را در قطعه کدی دید شگفت‌زده نشوید.

کاربردها و فواید ‌IIFE

متغیرها و توابعی که درون IIFE اعلان می‌شوند از دید دنیای خارج پنهان هستند. این مسئله موجب ایجاد خصوصیات و فواید زیر می‌شود.

  • از IIFE برای جدا کردن بخشی از کد و پنهان کردن جزئیات پیاده‌سازی استفاده کنید.
  • اینترفیس ورودی کد را با ارسال اشیای سراسری پر استفاده (از قبیل window, document, jQuery و غیره)، پارامترهای IIFE و سپس ارجاع به این اشیای سراسری درون IIFE از طریق یک دامنه لوکال مشخص‌تر کنید.
  • زمانی که کلوژر داخل حلقه قرار دارد می‌توانید از توابع IIFE درون کلوژر استفاده کنید.
  • IIFE مبنای الگوی ماژول در کد ES5 است و به جلوگیری از آلودگی دامنه سراسری کمک کرده و اینترفیس ماژول را در اختیار دنیای بیرون قرار می‌دهد.

پاسخ سؤال بیست و هفتم

«الگوی سینگلتون» (singleton pattern) یک الگوی طراحی پراستفاده در جاوا اسکریپت محسوب می‌شود. این الگو روشی برای بسته‌بندی کد درون یک واحد منطقی ارائه می‌کند که می‌تواند از طریق یک متغیر منفرد مورد دسترسی قرار گیرد. الگوی طراحی سینگلتون زمانی استفاده می‌شود مکه تنها یک وهله از شیء در سراسر عمر اپلیکیشن مورد نیاز باشد. در جاوا اسکریپت الگوی سینگلتون کاربردهای زیادی دارد و می‌تواند برای ایجاد فضای نام (NameSpacing) استفاده شود که موجب کاهش تعداد متغیرهای سراسری در صفحه شود. همچنین برای سازمان‌دهی کد به یک شیوه منسجم نیز کاربرد دارد که موجب افزایش خوانایی و قابلیت نگهداری صفحه‌های خواهد شد.

دو نکته مهم در مورد تعریف سنتی از الگوی سینگلتون وجود دارند:

  1. تنها یک وهله مجاز برای هر کلاس باید وجود داشته باشد
  2. و باید امکان نقطه دسترسی سراسری به آن وهله سینگلتون عرضه شده باشد.

تعریف الگوی سینگلتون در چارچوب جاوا اسکریپت به صورت زیر است:

سینگلتون شیئی است که برای ایجاد فضای نام و گروه‌بندی مجموعه مرتبطی از متدها و خصوصیات (کپسوله‌سازی) مورد استفاده قرار می‌گیرد و اگر امکان مقداردهی داشته باشد، تنها یک بار می‌تواند مقداردهی شود.

در جاوا اسکریپت می‌توان از طریق «لفظ شیئی» (object literal) یک سینگلتون ساخت. با این حال روش‌های دیگری نیز به این منظور وجود دارند.

یک شیء سینگلتون از دو بخش تشکیل یافته است که بخش اول خود شیء است که شامل اعضا (چه متد و جه خصوصیت) می‌شود و دیگری متغیر سراسری است که برای دسترسی به شیء مورد استفاده قرار می‌گیرد. متغیر به این جهت سراسری تعریف می‌شود که بتوان از هر جایی در صفحه به شیء سینگلتون دسترسی افت چون این یک خصوصیت کلیدی الگوی سینگلتون محسوب می‌شود.

سینگلتون به مثابه فضای نام در جاوا اسکریپت

همچنان که پیش‌تر اشاره شد سینگلتون می‌تواند برای اعلان فضای نام در جاوا اسکریپت مورد استفاده قرار گیرد. ایجاد فضای نام بخش مهمی از برنامه‌نویسی معقول در جاوا اسکریپت است. از آن جا که هر چیزی را می‌توان بازنویسی کرد و ممکن است به سادگی به اشتباه یا از طریق یک تابع یا حتی از طریق یک کلاس بدون هیچ گونه اطلاع، متغیر را به کل پاک کرد. یک مثال رایج که به کرات رخ می‌دهد زمانی است که به طور موازی با یکی دیگر از اعضای تیم همکاری می‌کنید.

1function findUserName(id) {
2
3}
4
5/* Later in the page another programmer
6added code */
7var findUserName = $('#user_list');
8
9/* You are trying to call :( */
10console.log(findUserName())

یکی از بهترین روش‌ها برای جلوگیری از بازنویسی تصادفی متغیر این است که کد خود را درون یک شیء سینگلتون به صورت فضای نام دربیاورید.

1/*  Using Namespace */
2
3var MyNameSpace = {
4  findUserName : function(id) {},
5  // Other methods and attribute go here as well
6}
7
8/* Later in the page another programmer
9added code */
10var findUserName = $('#user_list');
11
12/* You are trying to call and you make this time workable */
13console.log(MyNameSpace.findUserName());

پیاده‌سازی الگوی طراحی سینگلتون

1/* Lazy Instantiation skeleton for a singleton pattern */
2
3var MyNameSpace = {};
4MyNameSpace.Singleton = (function() {
5
6  // Private attribute that holds the single instance
7  var singletonInstance;  
8
9  // All of the normal code goes here
10  function constructor() {
11    // Private members
12    var privateVar1 = "Nishant";
13    var privateVar2 = [1,2,3,4,5];
14
15    function privateMethod1() {
16      // code stuff
17    }
18
19    function privateMethod1() {
20      // code stuff
21    }
22
23    return {
24      attribute1 : "Nishant",
25      publicMethod: function() {
26        alert("Nishant");// some code logic
27      }
28    }
29  }
30
31  return {
32    // public method (Global access point to Singleton object)
33    getInstance: function() {
34      //instance already exist then return  
35      if(!singletonInstance) {
36        singletonInstance = constructor();
37      }
38      return singletonInstance;           
39    }           
40  }
41
42})();   
43
44// getting access of publicMethod
45console.log(MyNamespace.Singleton.getInstance().publicMethod());

سینگلتون پیاده‌سازی شده فوق به سادگی درک می‌شود. کلاس سینگلتون یک ارجاع استاتیک به وهله منفرد سینگلتون نگه می‌دارد و این ارجاع را از طریق متد استاتیک ()getInstance بازگشت می‌دهد.

پاسخ سؤال بیست و هشتم

روش‌های مختلفی برای ایجاد شیء در جاوا اسکریپت وجود دارند که در ادامه برخی از آن‌ها را بر می‌شماریم.

روش یکم: بر اساس تابع

این روش زمانی مفید است که بخواهیم چند شیء مشابه را ایجاد کنیم. در نمونه کد زیر تابع Employee را نوشته‌ایم و از طریق فراخوانی‌اش با عملگر new از آن به عنوان یک سازنده بهره گرفته‌ایم.

1  function Employee(fName, lName, age, salary){
2  	this.firstName = fName;
3  	this.lastName = lName;
4  	this.age = age;
5  	this.salary = salary;
6  }
7
8  // Creating multiple object which have similar property but diff value assigned to object property.
9  var employee1 = new Employee('John', 'Moto', 24, '5000$');
10  var employee2 = new Employee('Ryan', 'Jor', 26, '3000$');
11  var employee3 = new Employee('Andre', 'Salt', 26, '4000$');

روش دوم: لفظ شیئی

لفظ شیئی بهترین روش برای ایجاد یک شیء است و کاربرد زیادی دارد. در ادامه نمونه کدی برای ایجاد شیء کارمند (employee) می‌بینید که شامل مشخصه‌ها و همچنین متد است.

1var employee = {
2	name : 'Nishant',
3	salary : 245678,
4	getName : function(){
5		return this.name;
6	}
7}

نمونه کد زیر یک لفظ شیئی تودرتو است که در آن آدرس یک شیء درون شیء کارمند است.

1var employee = {
2	name : 'Nishant',
3	salary : 245678,
4	address : {
5		addressLine1 : 'BITS Pilani',
6		addressLine2 : 'Vidya Vihar'.
7		phoneNumber: {
8		  workPhone: 7098889765,
9		  homePhone: 1234567898
10		}
11	}
12}

روش سوم: ساخت از Object با استفاده از کلیدواژه new

در کد زیر یک شیء ساده با استفاده از تابع سازنده Object ساخته می‌شود.

1var employee = new Object(); // Created employee object using new keywords and Object()
2employee.name = 'Nishant';
3employee.getName = function(){
4	return this.name;
5}

روش چهارم: ** با استفاده از Object.create

تابع Object.create(obj) یک شیء جدید ایجاد کرده و obj را برابر با پروتوتایپ آن قرار می‌دهد. این یک روش مدرن برای ایجاد اشیا است که در آن مشخصه‌ها از اشیای دیگر ارث‌بری می‌کنند. تابع Object.create سازنده را اجرا نمی‌کند. امکان استفاده از Object.create(null) در مواردی که قصد ارث‌بری مشخصه‌ها از Object را نداشته باشیم نیز فراهم آمده است.

پاسخ سؤال بیست و نهم

1function deepClone(object){
2	var newObject = {};
3	for(var key in object){
4		if(typeof object[key] === 'object'  && object[key] !== null ){
5		 newObject[key] = deepClone(object[key]);
6		}else{
7		 newObject[key] = object[key];
8		}
9	}
10	return newObject;
11}

در این سؤال از ما خواسته شده است که یک کپی عمیق از شیء بسازیم و از این رو باید ابتدا معنی کپی عمیق را بدانیم. فرض کنید یک شیء به نام personalDetail به شما داده شده و این شیء شامل برخی مشخصه‌ها است که خود نوعی شیء هستند. برای نمونه چنان که می‌بینیم address یک شیء است و نیز یک address و یک شیء است به بیان ساده یک شیء تودرتو است. به این ترتیب کپی عمیق به این معنا است که باید یک کپی از همه مشخصه‌های شیء personalDetail داشته باشیم که حتی شامل شیء تودرتو نیز باشد.

1var personalDetail = {
2	name : 'Nishant',
3	address : {
4	  location: 'xyz',
5	  zip : '123456',
6	  phoneNumber : {
7	    homePhone: 8797912345,
8	    workPhone : 1234509876
9	  }
10	}
11}

بنابراین زمانی که یک کلون عمیق ایجاد می‌کنیم باید همه مشخصه‌ها از جمله اشیای تودرتو را نیز کپی کنیم.

پاسخ سؤال سی‌ام

فرض کنید شیئی به نام person داریم.

1var person = {
2	name: 'Nishant',
3	age : 24
4}

در این کد شیء person دارای مشخصه‌های name و age است. اکنون تلاش می‌کنیم تا به مشخصه salary دسترسی پیدا کنیم که روی شیء person اعلان شده، اما در زمان دسترسی یک مقدار تعریف نشده بازگشت می‌یابد. اینک سؤال این است که پیش از اجرای هر نوع عملیات روی یک شیء از کجا می‌توانیم مطمئن باشیم که کدام مشخصه تعریف نشده است؟

امکان استفاده از عملگر typeof برای بررسی undefined به شکل زیر وجود دارد.

1if(typeof someProperty === 'undefined'){
2	console.log('something is undefined here');
3}

اکنون تلاش می‌کنیم به مشخصه حقوق شیء person دسترسی داشته باشیم.

1if(typeof person.salary === 'undefined'){
2	console.log("salary is undefined here because we haven't declared");
3}

پاسخ سؤال سی و یکم

1function Clone(object){
2  var newObject = {};
3  for(var key in object){
4  	newObject[key] = object[key];
5  }
6  return newObject;
7}

پاسخ سؤال سی و دوم

از promise برای مدیریت تعامل‌های ناهمگام به شیوه ترتیبی استفاده می‌کنیم. این موارد به طور خاص زمانی مفید هستند که یک عملیات ناهمگام (async) انجام داده باشیم و «سپس» بخواهیم بر مبنای نتایج عملیات نخست، عملیات ناهمگام دیگری انجام دهیم. برای نمونه اگر بخواهیم فهرست همه پروازها را به دست آوریم و سپس در مورد برخی پروازها که علاقه‌مند هستیم، جزییات بیشتری ببینیم، می‌توانیم از پرامیس بهره بگیریم. پرامیس نماینده یک مقدار آتی است. پرامیس یک وضعیت درونی به شکل‌های pending, fulfilled و rejected دارد و به عنان یک ماشین حالت عمل می‌کند.

شیء promise دارای متد then است که در آن کاری که پس از برآورده یا رد شدن پرامیس باید انجام یابد را مشخص می‌کنیم.

می‌توان بلوک‌های ()‌then را به هم زنجیر کرد و از این رو از بروز زنجیره تودرتوی callback اجتناب ورزید. امکان مدیریت خطاها در بلوک ()catch وجود دارد. پس از آن که یک پرامیس وارد حالت موفقیت یا شکست شد، «تغییرناپذیر» (immutable) می‌شود.

همچنین لازم به ذکر است که باید در مورد مفاهیم پیچیده‌تر مانند زیر نیز اطلاعات داشته باشید.

  • async/await موجب می‌شود که ظاهر کد هر چه بیشتر سرراست شود.
  • observable-های RxJS را می‌توان به عنوان پرامیس‌های قابل بازیافت در نظر گرفت.

در هر صورت باید مطمئن شوید که امکان پیاده‌سازی پرامیس را دارید.

پاسخ سؤال سی و سوم

فرض کنید یک شیء person با مشخصه name و age مانند زیر داریم:

1var person = {
2	name: 'Nishant',
3	age: 24
4}

اکنون می‌خواهیم بررسی کنیم مشخصه name در شیء person وجود دارد یا نه. در شیء جاوا اسکریپت می‌توان یک مشخصه تعریف کرد. در مثال فوق، نام و سن مشخصه‌های خود شیء فرد (person) هستند. همچنین شیء برخی مشخصه‌های ارث‌بری‌شده از شیء مبنا از قبیل toString دارد.

بنابراین سؤال این است که چطور باید بررسی کنیم مشخصه‌ها متعلق به خود شیء هستند یا ارث‌بری شده‌اند؟

روش اول: ما می‌توانیم از عملگر in روی شیء استفاده کنیم تا ببینیم آیا مشخصه متعلق به خودش است یا ارث‌بری شده است.

console.log('name' in person); // checking own property print true
console.log('salary' in person); // checking undefined property print false

عملگر in همچنین به دنبال مشخصه ارث‌بری‌شده می‌گردد تا ببیند آیا مشخصه تعریف شده را به عنوان مشخصه خودشی پیدا می‌کند یا نه. برای نمونه اگر وجود مشخصه toString را بررسی کنیم، از آنجا که می‌دانیم این مشخصه را روی شیء person اعلان نکرده‌ایم، از این رو عملگر in روی مشخصه‌های مبنا به دنبال آن می‌گردد.

به مثال زیر توجه کنید.

console.log('toString' in person); // Will print true

اگر بخواهیم مشخصه یک وهله از شیء را بررسی کنیم که مشخصه ارث‌بری شده است یا نه، از متد hasOwnProperty وهله شیء استفاده می‌کنیم.

console.log(person.hasOwnProperty('toString')); // print false
console.log(person.hasOwnProperty('name')); // print true
console.log(person.hasOwnProperty('salary')); // print false

پاسخ سؤال سی و چهارم

NaN اختصاری برای عبارت «غیر عددی» (not a number) است و در صورتی که بخواهید یک عملیات حسابی روی چنین مقادیری اجرا کنید، ممکن است موجب از کار افتادن عملیات شود. در ادامه برخی از مواردی که می‌توانید مقدار NaN دریافت نمایید را ملاحظه می‌کنید.

1Math.sqrt(-5);
2Math.log(-1);
3parseFloat("foo"); /* this is common: you get JSON from the server, convert some strings from JSON to a number and end up with NaN in your UI. */

NaN با هیچ عددی برابر نخواهد بود، کمتر یا بیشتر از هیچ عددی نمی‌شود و هرگز حتی با خودش هم برابر نیست:

1NaN !== NaN
2NaN < 2 // false
3NaN > 2 // false
4NaN === 2 // false

برای این که بررسی کنیم آیا متغیر کنونی NaN است یا خیر، می‌توانیم از تابع isNaN بهره بگیریم. به همین جهت است که غالباً NaN را در صفحه‌ها می‌بینیم، چون به بررسی خاصی نیاز دارد که بسیاری از توسعه‌دهندگان اجرای آن را فراموش می‌کنند.

پاسخ سؤال سی و پنجم

در صورت استفاده از ES6 می‌توانستیم var i را با let i عوض کنیم. اما در ES5 باید یک دامنه تابع مانند زیر بسازیم:

1var arr = [10, 32, 65, 2];
2for (var i = 0; i < arr.length; i++) {
3  setTimeout(function(j) {
4    return function () {
5      console.log('The index of this number is: ' + j)
6    };
7  }(i), 3000);
8}

این نتیجه با استفاده از forEach نیز حاصل می‌شود.

1var arr = [10, 32, 65, 2];
2arr.forEach(function(ele, i) {
3  setTimeout(function() {
4    console.log('The index of this number is: ' + i);
5  }, 3000);
6})

پاسخ سؤال سی و ششم

در اغلب مواقع متوجه می‌شویم که لازم است بررسی کنیم نوع متغیری آرایه است یا نه. برای نمونه در کد زیر نوعی عملیات را بر اساس نوع مقدار اجرا می‌کنیم.

1function(value){
2	if("value is an array"){
3		// Then perform some operation
4	}else{
5		// otherwise
6	}
7}

در ادامه با روش‌های تشخیص آرایه در جاوا اسکریپت آشنا می‌شویم.

روش اول: یک روش عالی به این منظور به صورت زیر است.

1	function isArray(value){
2		return Object.prototype.toString.call(value) === '[object Array]';
3	}

این رویکرد محبوب‌ترین روش برای تشخیص یک مقدار از نوع آرایه در جاوا اسکریپت است و استفاده از
آن توصیه می‌شود. این رویکرد بر این واقعیت استوار است که متد نیتیو ()toString روی یک مقدار مفروض یک رشته استاندارد در همه مرورگرها ایجاد می‌کند.

روش دوم

تست نوع‌بندی اردکی برای تشخیص نوع آرایه

1 // Duck typing arrays
2 function isArray(value){
3 	return typeof value.sort === 'function';
4 }

چنان که می‌بینیم متد isArray زمانی مقدار درست بازگشت می‌دهد که شیء مورد بررسی دارای متد sort از نوع function باشد. اکنون فرض کنید شیئی با متد سورت ایجاد کردده باشیم:

1	var bar = {
2		sort: function(){
3			// Some code 
4		}
5	}

اکنون زمانی که isArray(bar) را بررسی کنیم، مقدار true بازگشت می‌دهد، زیرا شیء‌ bar دارای متد sort است، اما واقعیت این است که bar آرایه نیست.

بنابراین این روش بهترین روش برای تشخیص یک آرایه نیست، زیرا حالتی که شیء دارای متد sort باشد را مدیریت نمی‌کند.

روش سوم

ECMAScript 5 یک متد به نام ()Array.isArray معرفی کرده است که مقدار نوع آرایه را تشخیص می‌دهد. تنها هدف این متد آن است که به درستی تشخیص دهد آیا مقدار مفروض یک آرایه است یا نه. در بسیاری از کتابخانه‌های جاوا اسکریپت ممکن است کد زیر را برای تشخیص آرایه بودن ببینید.

1function(value){
2   // ECMAScript 5 feature
3	if(typeof Array.isArray === 'function'){
4		return Array.isArray(value);
5	}else{
6	   return Object.prototype.toString.call(value) === '[object Array]';
7	}
8}

روش چهارم

امکان کوئری زدن به نام سازنده نیز وجود دارد:

1function isArray(value) {
2	return value.constructor.name === "Array";
3}
4

روش پنجم

همچنین می‌توان با استفاده از instanceof Array آرایه بودن یک مقدار را بررسی کرد:

1function isArray(value) {
2	return value instanceof Array;
3}

پاسخ سؤال سی و هفتم

اشیای جاوا اسکریپت به صورت ارجاعی فراخوانی می‌شوند. هر مقدار به جز مقادیر ابتدایی قطعاً یک نوع ارجاعی است. چند نوع ارجاعی داخلی مانند Object, Array, Function, Date, null و Error در جاوا اسکریپت وجود دارند.

تشخیص یک شیء با استفاده از عملگر typeof ممکن است.

1console.log(typeof {});           // object
2console.log(typeof []);           // object
3console.log(typeof new Array());  // object
4console.log(typeof null);         // object 
5console.log(typeof new RegExp()); // object
6console.log(typeof new Date());   // object

اما عیب استفاده از عملگر typeof برای تشخیص نوع شیء این است که برای null نیز مقدار object بازگشت می‌دهد.

بهترین روش برای تشخیص یک شیء با نوع ارجاعی خاص استفاده از عملگر instanceof است.

1//Detecting an array
2if(value instanceof Array){
3	console.log("value is type of array");
4}
1// Employee constructor function
2function Employee(name){
3	this.name = name; // Public property
4}
5
6var emp1 = new Employee('John');
7
8console.log(emp1 instanceof Employee); // true

عملگر instanceof نه تنها سازنده‌ای که برای ایجاد یک شیء استفاده شده را تشخیص می‌دهد، بلکه زنجیره پروتوتایپ آن را نیز مورد بررسی قرار می‌دهد.

1console.log(emp1 instanceof Object); // true

پاسخ سؤال سی و هشتم

متد ()Object.create در ECMAScript 5 آسان‌ترین روش برای ارث‌بری یک شیء از شیء دیگر بدون احضار تابع سازنده است. به مثال زیر توجه کنید.

1var employee = {
2  name: 'Nishant',
3  displayName: function () {
4    console.log(this.name);
5  }
6};
7
8var emp1 = Object.create(employee);
9console.log(emp1.displayName());  // output "Nishant"

در مثال فوق یک شیء جدید به نام emp1 ایجاد می‌کنیم که از employee ارث‌بری می‌کند. به بیان دیگر پروتوتایپ emp1 روی employee تنظیم شده است. پس از آن، این emp1 توانایی دسترسی به همان مشخصه‌ها و متد را روی employee پیدا می‌کند تا این که مشخصه‌ها یا متد جدید با همان نام تعریف شود.

برای نمونه تعریف کردن متد ()displayName روی emp1 موجب باطل شدن خودکار displayName در employee نمی‌‌شود.

1emp1.displayName = function() {
2	console.log('xyz-Anonymous');
3};
4
5employee.displayName(); //Nishant
6emp1.displayName();//xyz-Anonymous

علاوه بر این متد ()Object.create امکان تعیین آرگومان دوم را نیز می‌دهد که یک شیء شامل مشخصه‌ها و متد‌های اضافی برای افزودن به شیء جدید است. به مثال زیر توجه کنید.

1var emp1 = Object.create(employee, {
2	name: {
3		value: "John"
4	}
5});
6
7emp1.displayName(); // "John"
8employee.displayName(); // "Nishant"

در مثال فوق، emp1 با نام خودش ایجاد شده است، از این رو با فراخوانی متد ()displayName به جای Nishant با مقدار John مواجه می‌شویم. شیئی که به این روش ایجاد شود کنترل کاملی روی شیء جدیداً ایجاد شده می‌دهد. به این ترتیب آزاد هستید که هر مشخصه و متدی که می‌خواهید را حذف/اضافه کنید.

پاسخ سؤال سی و نهم

فرض کنید کلاس Person را داریم که دارای مشخصه‌های نام، سن، حقوق و متد ()incrementSalary است.

1function Person(name, age, salary) {
2  this.name = name;
3  this.age = age;
4  this.salary = salary;
5  this.incrementSalary = function (byValue) {
6    this.salary = this.salary + byValue;
7  };
8}

اکنون می‌خواهیم کلاس Employee را ایجاد کنیم که شامل همه مشخصه‌های کلاس Person است و همچنین می‌خواهیم مشخصه‌های دیگری را وارد کلاس Employee بکنیم.

1function Employee(company){
2	this.company = company;
3}
4
5//Prototypal Inheritance 
6Employee.prototype = new Person("Nishant", 24,5000);

در مثال فوق نوع Employee از نوع Person ارث‌بری می‌کند. این کار از طریق ساخت وهله جدیدی از Person از روی پروتوتایپ Employee انجام می‌یابد. در ادامه هر وهله از Employee از مشخصه‌ها و متدهای Employee ارث خواهد برد.

1//Prototypal Inheritance 
2Employee.prototype = new Person("Nishant", 24,5000);
3
4var emp1 = new Employee("Google");
5
6console.log(emp1 instanceof Person); // true
7console.log(emp1 instanceof Employee); // true

اینک وراثت سازنده را بررسی می‌کنیم.

1//Defined Person class
2function Person(name){
3	this.name = name || "Nishant";
4}
5
6var obj = {};
7
8// obj inherit Person class properties and method 
9Person.call(obj); // constructor inheritance
10
11console.log(obj); // Object {name: "Nishant"}

در کد فوق می‌بینیم که با فراخوانی Person.call(obj) مشخصه‌های نام از Person به obj تعریف می‌شوند.

1console.log(name in obj); // true

وراثت مبتنی بر نوع بهتر است با تابع سازنده تعریف شده توسعه‌دهنده استفاده شود تا توابع نیتیو جاوا اسکریپت. همچنین امکان ایجاد انعطاف در شیوه ساخت نوع‌های مشابه از شیء در اختیار ما قرار می‌دهد.

پاسخ سؤال چهلم

ECMAScript 5 چندین روش برای جلوگیری از دستکاری شیء ارائه کرده است شیء را قفل می‌کند تا مطمئن شود که هیچ کس به طور تصادفی یا به هر طریق دیگر کارکرد شیء را تغییر نمی‌دهد. سه سطح از ممانعت دستکاری اشیا به شرح زیر وجود دارد.

اکستنشن‌های ممانعت

در این روش هیچ مشخصه یا متد جدید نمی‌تواند به شیء اضافه شود، اما فرد می‌تواند مشخصه‌ها یا متدهای موجود را تغییر دهد. به مثال زیر توجه کنید:

1var employee = {
2	name: "Nishant"
3};
4
5// lock the object 
6Object.preventExtensions(employee);
7
8// Now try to change the employee object property name
9employee.name = "John"; // work fine 
10
11//Now try to add some new property to the object
12employee.age = 24; // fails silently unless it's inside the strict mode

مهروموم

این روش مشابه روش قبلی است به جز این که از حذف شدن مشخصه‌ها و متدهای موجود نیز ممانعت می‌کند.

برای مهروموم کردن یک شیء باید از متد ()Object.seal استفاده کنید. امکان بررسی کردن مهروموم بودن یکشی نیز با استفاده از ()Object.isSealed وجود دارد.

1var employee = {
2	name: "Nishant"
3};
4
5// Seal the object 
6Object.seal(employee);
7
8console.log(Object.isExtensible(employee)); // false
9console.log(Object.isSealed(employee)); // true
10
11delete employee.name // fails silently unless it's in strict mode
12
13// Trying to add new property will give an error
14employee.age = 30; // fails silently unless in strict mode

هنگامی که یک شیء مهروموم می‌شود، مشخصه‌ها و متدهای موجود نمی‌توانند حذف شوند. شیء مهروموم شده غیر قابل بسط نیز هست.

فریز کردن

در این روش نیز مشابه مهروموم کردن، امکان دستکاری مشخصه‌ها و متدهای موجود وجود ندارد و همه این موارد فقط-خواندنی هستند. برای فریز کردن یک شیء باید از متد استفاده کنیم. همچنین می‌توانیم وضعیت فریز بودن را با استفاده از ()Object.isFrozen بررسی کنیم.

1var employee = {
2	name: "Nishant"
3};
4
5//Freeze the object
6Object.freeze(employee); 
7
8// Seal the object 
9Object.seal(employee);
10
11console.log(Object.isExtensible(employee)); // false
12console.log(Object.isSealed(employee));     // true
13console.log(Object.isFrozen(employee));     // true
14
15
16employee.name = "xyz"; // fails silently unless in strict mode
17employee.age = 30;     // fails silently unless in strict mode
18delete employee.name   // fails silently unless it's in strict mode

اشیای فرز شده هم مهر و موم و هم غیر قابل بسط هستند.

توصیه‌های مهم

اگر تصمیم دارید جلوی دستکاری یک شیء را بگیرید، آن را مهروموم یا فریز بکنید و سپس در حالت strict مورد استفاده قرار دهید تا بتوانید خطاها را به دام بیندازید. به مثال زیر توجه کنید.

1"use strict";
2
3var employee = {
4	name: "Nishant"
5};
6
7//Freeze the object
8Object.freeze(employee); 
9
10// Seal the object 
11Object.seal(employee);
12
13console.log(Object.isExtensible(employee)); // false
14console.log(Object.isSealed(employee));     // true
15console.log(Object.isFrozen(employee));     // true
16
17
18employee.name = "xyz"; // fails silently unless in strict mode
19employee.age = 30;     // fails silently unless in strict mode
20delete employee.name;  // fails silently unless it's in strict mode

پاسخ سؤال چهل و یکم

لاگ کردن پیام‌های خطا یا برخی پیام‌های آگاهی‌بخش در زمان کار با سمت کلاینت جاوا اسکریپت با استفاده از متد console.log امری ضروری محسوب می‌شود. گاهی اوقات لازم است که نوعی پیشوند به پیام‌های لاگ اضافه کنیم تا مشخص شود کهان پیام از سمت یک اپلیکیشن خاص تولید شده است. یک روش کلی برای انجام این کار این است که به همه پیامک‌های لاگ در کنسول یک نام مانند زیر اضافه کنیم:

1console.log('your app name' + 'some error message');

با انجام این کار باید هر بار که می‌خواهیم پیامی را در کنسول لاگ کنیم، نام اپلیکیشن‌مان را وارد کنیم. برای انجام این کار روش بهترین نیز وجود دارد:

1function appLog() {
2  var args = Array.prototype.slice.call(arguments);
3  args.unshift('your app name');
4  console.log.apply(console, args);
5}
6
7appLog("Some error message"); 
8//output of above console: 'your app name Some error message'

پاسخ سؤال چهل و دوم

امکان استفاده از عملگر typeof برای تست این که رشته‌ای لفظی است وجود دارد و عملگر instanceof نیز شیء بودن رشته را بررسی می‌کند.

1 function isString(str) {
2 	return typeof(str) == 'string' || str instanceof String;
3 }
4 
5 var ltrlStr = "Hi I am string literal";
6 var objStr = new String("Hi I am string object");
7 console.log(isString(ltrlStr)); // true
8 console.log(isString(objStr)); // true

پاسخ سؤال چهل و سوم

تابع‌های بی‌نام (anonymous) به طور معمول در موارد زیر به کار گرفته می‌شوند.

استفاده بی‌درنگ

در صورتی که تابع بلافاصله پس از ایجاد مورد استفاده قرار گیرد، نیاز به نام نخواهد داشت. به عنوان مثال تابع setTimeout را در نظر بگیرید:

1setTimeout(function(){
2	alert("Hello");
3},1000);

در حالت فوق نیازی به استفاده از تابع نام‌دار وجود ندارد، چون مطمئن هستیم که این تابع که عبارت hello را نمایش می‌دهد تنها یک بار در اپلیکیشن استفاده می‌شود.

اعلان درون‌خطی تابع

اعلان تابع‌ها به روش درون‌خطی (inline) مزیت‌های زیادی دارد، از جمله امکان دسترسی به متغیر در دامنه کنونی را فراهم می‌سازد. برای نمونه یک مثال از «دستگیره رویداد» (event handler) را در نظر بگیرید. این دستگیره وجود یک نوع خاصی از رویداد را برای یک شیء خاص هشدار می‌دهد. فرض کنید یک عنصر HTML مانند یک Button داریم که می‌خواهیم روی آن یک دستگیره رویداد برای کلیک کردن اضافه کنیم تا وقتی کاربر روی دکمه کلیک کرد برخی کدها اجرا شوند.

1<button id="myBtn"></button>

شنونده رویداد را نیز اضافه می‌کنیم.

1var btn = document.getElementById('myBtn');
2btn.addEventListener('click', function () {
3  alert('button clicked');
4});

مثال فوق کاربرد تابع بی‌نام را به عنوان یک تابع callback در دستگیره رویداد نشان می‌دهد.

ارسال تابع بی‌نام به صورت پارامتر در زمان فراخوانی تابع

به مثال زیر توجه کنید.

1// Function which will execute callback function
2function processCallback(callback){
3	if(typeof callback === 'function'){
4		callback();
5	}
6}
7
8// Call function and pass anonymous function as callback 
9processCallback(function(){
10	alert("Hi I am anonymous callback function");
11});

بهترین روش برای تصمیم‌گیری در مرد استفاده از تابع بی‌نام این است که سؤالات زیر را از خود بپرسیم:

  • آیا تابعی که تعریف می‌کنیم، جای دیگری استفاده خواهد شد؟

اگر پاسخ مثبت باشد، در این صورت باید از تابع نام‌دار استفاده شود و در غیر این صورت می‌توان از تابع بی‌نام کمک گرفت.

مزیت استفاده از تابع بی‌نام

  1. کدهای که باید نوشته شود کاهش می‌یابند و این موضوع در موارد تابع بازگشتی و همچنین تابع callback مصداق بیشتری دارد.
  2. از آلودگی غیرضروری فضای نام سراسری جلوگیری می‌شود.

پاسخ سؤال چهل و چهارم

اگر قبلاً با زبان‌های برنامه‌نویسی پایتون یا سی شارپ آشنا باشید، ممکن است با روش استفاده از مقدار پیش‌فرض برای پارامترهای تابع آشنایی داشته باشید. به مثال زیر توجه کنید:

1// Define sentEmail function 
2// configuration : Configuration object
3// provider : Email Service provider, Default would be gmail
4def sentEmail(configuration, provider = 'Gmail'):
5	# Your code logic

قبل از معرفی ES6/ES2015

تا قبل از معرفی ES6/ES2015 روش‌های زیادی برای انجام این کار وجود داشت. در ادامه کدی ارائه شده است که مقدار پارامتر پیش‌فرض را به یکی از این روش‌ها تعیین می‌کند.

روش اول تعیین مقدار پارامتر پیش‌فرض

1function sentEmail(configuration, provider) {
2  // Set default value if user has not passed value for provider
3  provider = typeof provider !== 'undefined' ? provider : 'Gmail'  
4  // Your code logic
5;
6}
7// In this call we are not passing provider parameter value
8sentEmail({
9  from: 'xyz@gmail.com',
10  subject: 'Test Email'
11});
12// Here we are passing Yahoo Mail as a provider value
13sentEmail({
14  from: 'xyz@gmail.com',
15  subject: 'Test Email'
16}, 'Yahoo Mail');

روش دوم تعیین مقدار پارامتر پیش‌فرض

1function sentEmail(configuration, provider) {
2  // Set default value if user has not passed value for provider
3  provider = provider || 'Gmail'  
4  // Your code logic
5;
6}
7// In this call we are not passing provider parameter value
8sentEmail({
9  from: 'xyz@gmail.com',
10  subject: 'Test Email'
11});
12// Here we are passing Yahoo Mail as a provider value
13sentEmail({
14  from: 'xyz@gmail.com',
15  subject: 'Test Email'
16}, 'Yahoo Mail');

روش سوم تعیین مقدار پارامتر پیش‌فرض

1function sendEmail(configuration, provider = "Gmail") {
2  // Set default value if user has not passed value for provider
3  
4  // Value of provider can be accessed directly
5  console.log(`Provider: ${provider}`);
6}
7
8// In this call we are not passing provider parameter value
9sentEmail({
10  from: 'xyz@gmail.com',
11  subject: 'Test Email'
12});
13// Here we are passing Yahoo Mail as a provider value
14sentEmail({
15  from: 'xyz@gmail.com',
16  subject: 'Test Email'
17}, 'Yahoo Mail');

پاسخ سؤال چهل و پنجم

1merge(person , address); 
2 
3/* Now person should have 5 properties 
4name , age , addressLine1 , addressLine2 , city */

روش اول: استفاده از ES6 و متد Object.assign

1const merge = (toObj, fromObj) => Object.assign(toObj, fromObj);

روش دوم: بدون استفاده از تابع داخلی

1function merge(toObj, fromObj) {
2  // Make sure both of the parameter is an object
3  if (typeof toObj === 'object' && typeof fromObj === 'object') {
4    for (var pro in fromObj) {
5      // Assign only own properties not inherited properties
6      if (fromObj.hasOwnProperty(pro)) {
7        // Assign property and value
8        toObj[pro] = fromObj[pro];
9      }
10    }
11  }else{
12  	throw "Merge function can apply only on object";
13  }
14}

پاسخ سؤال چهل و ششم

اشیای جاوا اسکریپت می‌توانند مشخصه‌هایی داشته باشند که وقتی با استفاده از حلقه for روی شیء می‌چرخید یا از ()Object.keys برای دریافت نام‌های مشخصه‌ها استفاده می‌کنید ظاهر نشوند. این مشخصه‌ها به نام «مشخصه‌های غیر شمارشی» (non-enumerable properties) نامیده می‌شوند.

فرض کنید شیء زیر را داریم:

1var person = {
2	name: 'John'
3};
4person.salary = '10000$';
5person['country'] = 'USA';
6
7console.log(Object.keys(person)); // ['name', 'salary', 'country']

از آنجا که می‌دانیم شیء person دارای مشخصه‌های شمارشی name, salary و country است، هنگامی که Object.keys(person) را فرا بخوانیم ظاهر خواهند شد. برای ایجاد مشخصه غیر شمارشی باید از ()Object.defineProperty استفاده کنیم. این یک متد خاص برای ایجاد مشخصه غیر شمارشی در جاوا اسکریپت است.

1var person = {
2	name: 'John'
3};
4person.salary = '10000$';
5person['country'] = 'USA';
6
7// Create non-enumerable property
8Object.defineProperty(person, 'phoneNo',{
9	value : '8888888888',
10	enumerable: false
11})
12
13Object.keys(person); // ['name', 'salary', 'country']

در مثال فوق مشخصه phoneNo نشان داده نمی‌شود زیرا با تنظیم enumerable:false آن را غیر شمارشی کرده‌ایم.

نکته مهم

اکنون فرض کنید می‌خواهیم مقدار phoneNo را تغییر دهیم.

1person.phoneNo = '7777777777';

متد ()Object.defineProperty امکان ایجاد مشخصه‌های «فقط-خواندنی» چنان که در بالا دیدیم را دارد و از این رو امکان دستکاری تغییر را در یک شیء person نداریم. دلیل این امر آن است که descriptor دارای مشخصه writable است که به طور پیش‌فرض FALSE است. تغییر دادن مقدار مشخصه غیر نوشتنی در حالت strict خطا بازگشت می‌دهد. در حالت غیر strict هیچ خطایی اتفاق نمی‌افتد، اما مقدار phoneNo تغییر نخواهد یافت.

پاسخ سؤال چهل و هفتم

اتصال تابع در حیطه موارد پیشرفته جاوا اسکریپت قرار می‌گیرد و یک تکنیک بسیار محبوب برای استفاده همراه با دستگیره رویداد و تابع کالبک جهت حفظ چارچوب کد اجرایی در زمان ارسال تابع به صورت پارامتر به حساب می‌آید.

مثال زیر را در نظر بگیرید.

1var clickHandler = {
2	message: 'click event handler',
3	handleClick: function(event) {
4		console.log(this.message);
5	}
6};
7
8var btn = document.getElementById('myBtn');
9// Add click event to btn
10btn.addEventListener('click', clickHandler.handleClick);

در کد فوق شیء clickHandler ایجاد شده است که شامل مشخصه‌های پیام و متد handleClick است.

ما متد handleClick را به یک دکمه DOM انتساب داده‌ایم که در پاسخ به فرایند کلیک اجرا می‌شود. هنگامی که دکمه کلیک شود، متد handleClick فراخوانی می‌شود و پیام کنسول فراخوانده می‌شود. در اینجا console.log باید پیام click event handler را لاگ کند، اما در عمل undefined را لاگ می‌کند.

مشکل نمایش undefined به این دلیل است که چارچوب اجرایی متد clickHandler.handleClick ذخیره نمی‌شود و از این رو this بله شیء دکمه btn اشاره می‌کند. با استفاده از متد bind می‌توانیم این مشکل را رفع کنیم.

1var clickHandler = {
2	message: 'click event handler',
3	handleClick: function(event) {
4		console.log(this.message);
5	}
6};
7
8var btn = document.getElementById('myBtn');
9// Add click event to btn and bind the clickHandler object
10btn.addEventListener('click', clickHandler.handleClick.bind(clickHandler));

متد bind مشابه متدهای call و apply برای همه تابع‌ها عرضه شده و مقدار آرگومان this را می‌گیرد.

پاسخ سؤال چهل و هشتم

خروجی کد فوق hi there است، زیرا در این جا به رشته‌ها سروکار داریم. رشته‌ها به صورت مقداری ارسال می‌شوند یعنی کپی خواهند شد.

پاسخ سؤال چهل و نهم

خروجی کد فوق به صورت {prop1: 90} است زیرا در اینجا با اشیا سروکار داریم. اشیا به صورت ارجاعی ارسال می‌شوند، یعنی objA و objB در حافظه شیء یکسانی هستند.

پاسخ سؤال پنجاهم

خروجی این کد به صورت {prop1: 42} است. زمانی که objA به objB انتساب می‌یابد، متغیر objB به همان شیء که متغیر objb اشاره دارد، اشاره خواهد کرد.

اما زمانی که objB را برابر با یک شیء خالی قرار دهیم، در واقع ارجاع متغیر objB را به آن تغییر داده‌ایم. این کار تأثیری روی ارجاع متغیر objA نمی‌گذارد.

پاسخ سؤال پنجاه و یکم

خروجی این کد به صورت [42,1,2,3,4,5] است. آرایه‌ها در جاوا اسکریپت شیء محسوب می‌شوند. به صورت ارجاعی ارسال شده و انتساب می‌یابند. به همین دلیل است که هم arrA و هم arrB به همان آرایه اشاره دارند. از این رو تغییر دادن عنصر نخست آرایه arrB موجب ایجاد تغییر در arrA نیز می‌شود، چون در حافظه همان آرایه است.

پاسخ سؤال پنجاه و دوم

خروجی این کد به صورت است. تابع slice همه عناصر آرایه را کپی کرده و یک آرایه جدید بازگشت می‌دهد. به همین دلیل است که arrA و arrB به دو آرایه کاملاً متفاوت اشاره می‌کنند.

پاسخ سؤال پنجاه و سوم

خروجی این کد به صورت زیر است:

1[{prop1: 42}, {someProp: "also value of array A!"}, 3,4,5]

آرایه‌ها اشیای جاوا اسکریپت هستند و از این رو هر دو متغیر arrA و arrB به آرایه یکسانی اشاره دارند. تغییر دادن arrB[0] همان تغییر دادن آرایه arrA[0] است.

پاسخ سؤال پنجاه و چهارم

خروجی این کد به صورت زیر است:

1[{prop1: 42}, {someProp: "also value of array A!"}, 3,4,5]

تابع slice همه عناصر آرایه را کپی کرده و یک آرایه جدید بازگشت می‌دهد. با این حال این کپی یک کپی عمیق نیست؛ بلکه کپی سطحی انجام می‌یابد. این Slice که اجرا شده را می‌توان به صورت زیر تصور کرد:

1function slice(arr) {
2   var result = [];
3   for (i = 0; i< arr.length; i++) {
4       result.push(arr[i]);
5   }
6   return result; 
7}

به خط result.push(arr[i]) نگاه کنید. اگر arr[i] بر حسب تصادف عدد یا رشته باشد به صورت مقداری ارسال می‌شود، یعنی کپی می‌شود. اگر arr[i] آرایه باشد، به صورت ارجاعی ارسال می‌شود.

در صورتی که آرایه arr[i] یک شیء باشد، {prop1: "value of array A!!"} تنها ارجاع به این شیء کپی خواهد شد. این حرف به آن معنی است که آرایه‌های arrA و arrB دارای دو عنصر ابتدایی مشترک هستند.

به همین دلیل است گه تغییر دادن مشخصه arrB[0] در arrB موجب ایجاد تغییر در arrA[0] نیز می‌شود.

پاسخ سؤال پنجاه و پنجم

ReferenceError: employeeId is not defined

پاسخ سؤال پنجاه و ششم

Undefined

پاسخ سؤال پنجاه و هفتم

Undefined

پاسخ سؤال پنجاه و هشتم

Undefined

پاسخ سؤال پنجاه و نهم

undefined

پاسخ سؤال شصتم

'123bcd'

پاسخ سؤال شصت و یکم

'abc123'

پاسخ سؤال شصت و دوم

Function

پاسخ سؤال شصت و سوم

undefined

پاسخ سؤال شصت و چهارم

function function

پاسخ سؤال شصت و پنجم

["name", "salary", "country", "phoneNo"]

پاسخ سؤال شصت و ششم

["name", "salary", "country"]

پاسخ سؤال شصت و هفتم

false false

پاسخ سؤال شصت و هشتم

false false

پاسخ سؤال شصت و نهم

false false

پاسخ سؤال هفتادم

false false

پاسخ سؤال هفتاد و یکم

true true

پاسخ سؤال هفتاد و دوم

true true true true

پاسخ سؤال هفتاد و سوم

bar bar

پاسخ سؤال هفتاد و چهارم

foo foo

پاسخ سؤال هفتاد و پنجم

undefined undefined

پاسخ سؤال هفتاد و ششم

["100"] 1

پاسخ سؤال هفتاد و هفتم

[] [] [Array[5]] 1

پاسخ سؤال هفتاد و هشتم

11

پاسخ سؤال هفتاد و نهم

6

پاسخ سؤال هشتادم

['dog', 'rat', 'goat', 'cow', 'horse', 'cat']

پاسخ سؤال هشتاد و یکم

1 -1 -1 4

پاسخ سؤال هشتاد و دوم

1 6 -1

پاسخ سؤال هشتاد و سوم

[2, 4, 8, 12, 16] true

پاسخ سؤال هشتاد و چهارم

[2, '12', true] [2, '12', true] [2, '12', true] [2, '12', true]

پاسخ سؤال هشتاد و پنجم

['bar', 'john', 'ritz'] ['bar', 'john'] ['foo', 'bar', 'john', 'ritz'] [] ['foo', 'bar', 'john', 'ritz']

پاسخ سؤال هشتاد و ششم

['bar', 'john'] [] ['foo']

پاسخ سؤال هشتاد و هفتم

[15, 16, 2, 23, 42, 8]

پاسخ سؤال هشتاد و هشتم

1

پاسخ سؤال هشتاد و نهم

undefined true

پاسخ سؤال نودم

Hello

پاسخ سؤال نود و یکم

undefined

پاسخ سؤال نود و دوم

'Hello'

پاسخ سؤال نود و سوم

undefined

پاسخ سؤال نود و چهارم

'Hi John'

پاسخ سؤال نود و پنجم

'Hi John'

پاسخ سؤال نود و ششم

a) 2 2 2

پاسخ سؤال نود و هفتم

0 2 4

پاسخ سؤال نود و هشتم

John Person

پاسخ سؤال نود و نهم

12345678 undefined

پاسخ سؤال صدم

undefined

پاسخ سؤال صد و یکم

bq1uy 1BJKSJ bq1uy

پاسخ سؤال صد و دوم

foo123 aq123

پاسخ سؤال صد و سوم

['W', 'o', 'r', 'l', 'd']

پاسخ سؤال صد و چهارم

Total amount left in account: 5600 Total amount left in account: 5300

پاسخ سؤال صد و پنجم

5600 5300 5100

پاسخ سؤال صد و ششم

3600 3300 3100

پاسخ سؤال صد و هفتم

Hello John

6. Suggest your question!

پاسخ سؤال صد و هشتم

John

پاسخ سؤال صد و نهم

[2, 8, 15, 16, 23, 42] [2, 8, 15, 16, 23, 42] [2, 8, 15, 16, 23, 42]

پاسخ سؤال صد و دهم

Uncaught TypeError: Cannot read property 'fullName' of undefined

پاسخ سؤال صد و یازدهم

5

پاسخ سؤال صد و دوازدهم

undefined

پاسخ سؤال صد و سیزدهم

6, 10

پاسخ سؤال صد و چهاردهم

6, 10

پاسخ سؤال صد و پانزدهم

720

پاسخ سؤال صد و شانزدهم

Tony undefined

توجه کنید که تابع ()getName1 به درستی کار می‌کند، زیرا از personObj فراخوانی شده و از این رو به مشخصه this.name دسترسی دارد. اما هنگامی که بخواهیم getnName2 را فرا بخوانیم که تحت Object.prototype تعریف شده، هیچ مشخصه‌ای به نام this.name ندارد. باید یک مشخصه به نام name تحت پروتوتایپ وجود داشته باشد. کد آن چنین است:

1function getName1(){
2	console.log(this.name);
3}
4
5Object.prototype.getName2 = () =>{
6  console.log(Object.getPrototypeOf(this).name);
7}
8
9let personObj = {
10	name:"Tony",
11	print:getName1
12}
13
14personObj.print();
15Object.prototype.name="Steve";
16personObj.getName2();

سخن پایانی

اگر علاقه‌مند به زبان برنامه‌نویسی جاوا اسکریپت باشید و فکر می‌کنید که مسیر آینده شغلی شما به این زبان گره خورده است و یا اگر به هر دلیلی به برنامه‌نویسی وب علاقه‌مند هستید، پیشنهاد می‌کنیم موارد و نکات مطرح شده در این مقاله را به دقت مطالعه کنید، چرا که چیزهای زیادی برای آموختن خواهید یافت.

بر اساس رای ۲ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
ganqqwerty
۲ دیدگاه برای «سؤالات مصاحبه استخدامی برنامه نویس جاوا اسکریپت — به همراه جواب»

اشتباه تایپی
« …و اعلان کردن (Declear) یک متغیر را به خوبی درک کنیم.»
Declare درسته.

‌‌
با سلام و احترام؛

صمیمانه از همراهی شما با مجله فرادرس و ارائه بازخورد سپاس‌گزاریم.

این مورد اصلاح شد.

برای شما آرزوی سلامتی و موفقیت داریم.

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *