Płuapki JavaScript

Cezary Walenciuk

Pułapki JavaScript

2017-09-20

www.cezarywalenciuk.pl

JavaScript?

Tablice

Tablice - dodawanie elementów

		
				var myArray = [];
				console.log(myArray.length); 
				//  0

Tablice - dodawanie elementów

        
				var myArray = [];
				console.log(myArray.length); 
				//  0

				myArray[1000] = 'kapitan Cubasa';
				console.log(myArray.length);

Tablice - dodawanie elementów

        
				var myArray = [];
				console.log(myArray.length); 
				//  0

				myArray[1000] = 'kapitan Cubasa';
				console.log(myArray.length); 
				// outputs 1001

Tablice - lenght - nadpisanie

		
				var myArray = [10,20,30];
				myArray.length = 5;
				console.log(myArray);

Tablice - lenght - nadpisanie

        
				var myArray = [10,20,30];
				myArray.length = 5;
				console.log(myArray);

        >> (5) [10, 20, 30, undefined × 2]

Tablice - jak dodawać elementy

		
				var numbers = [1, 2, 3];
				numbers.push(4);
				console.log(numbers); 
				// [1, 2, 3, 4]

				numbers.push(5, 6, 7);
				console.log(numbers); 
				// [1, 2, 3, 4, 5, 6, 7]

Tablice Sortowanie

        
			var myarray = [1001, 2, 56, 29, 501, 1];
			myarray.sort();
			console.log(myarray);

Tablice Sortowanie

		
			var myarray = [1001, 2, 56, 29, 501, 1];
			myarray.sort();
			console.log(myarray);

		>> [1, 1001, 2, 29, 501, 56]

Tablice Sortowanie

		
			var numbers = [1004, 501, 56, 26, 3];
			numbers.sort(function(a, b) {
			  return a - b;
			});
			console.log(numbers);

		>> [3, 26, 56, 501, 1004]

Tablica asocjacyjna - nie jest tablicą

		
			var myAssocArray = [];
			myAssocArray["game"] = "mortal kombat";

Tablica asocjacyjna - nie jest tablicą

		
			myAssocArray["game"] = "Mortal Kombat";
			myAssocArray["year"] = "1992";

			myAssocArray2.game = "Mortal Kombat";
			myAssocArray2.year = "1992";

Tablice - jak sprawdzić czy coś jest tablicą

        
				console.log(typeof []); 


				console.log(typeof {});

Tablice - jak sprawdzić czy coś jest tablicą

		
				console.log(typeof []); 
				// outputs: object

				console.log(typeof {}); 
				// outputs: object

Tablice - jak sprawdzić czy coś jest tablicą

		
			function is_this_array (value) {
					return value && typeof value 
					=== 'object' 
					&& value.constructor 
					=== Array;
			}
			console.log(is_this_array([])); 
			// outputs: true
			console.log(is_this_array({})); 
			// outputs: false

Tablice - pętla for

		
				for( var i in [ 44 , 33, 22 ] ) 
				{ console.log( i ); };

Tablice - pętla for

		
				for( var i in [ 44 , 33, 22 ] ) 
				{ console.log( i ); };

Tablice - pętla for

		
				var tab = [ 44 , 33, 22 ];
				tab.testowy = 1000;

				for( var i in  ) { console.log( i ); };

		  
			>> 1
			>> 2
			>> 3
			>> testowy

Tablice - pętla for

		
				var aaa = [2,"b"];

				for (let value of aaa) {
				  value += 1;
				  console.log(value);
				}

		  
			>> 3
			>> b1

Daty

		
			var today = new Date();
			var dd = today.getDate();
			var mm = today.getMonth();
			var yyyy = today.getFullYear();

Daty

		
			var today = new Date();
			var dd = today.getDate();
			var mm = today.getMonth();
			var yyyy = today.getFullYear();

		
				console.log(mm);
				>>  8

Daty

		
			var today = new Date();
			var dd = today.getDate();
			var mm = today.getMonth() + 1;
			var yyyy = today.getFullYear();

		
				console.log(mm);
				>>  9

Arytmetyka

		0.1 + 0.2

Arytmetyka

		0.1 + 0.2

		
				>>  0.30000000000000004

Składnia

		
				function my() {
					return {
							head : 3
					};
				};
				console.log(my());
				//{head: 3}

Składnia

		
				function my() {
					return 
					{
							head : 3
					};
				};
				console.log(my());
				// undefined

Undefined oraz null

		
			if(cObject !== null  && 
				typeof(cObject) !== 'undefined') {
				 
			}

Undefined oraz null

		
			if(cObject !== null  && 
				typeof(cObject) !== 'undefined') {
				 
			}

		>> throw error

Undefined oraz null

		
			if(typeof(myt) !== 'undefined' 
				&& myt !== null) {

			}

		>> works

Przecinek śmierci

		
				var object1 = { 
				  foo: "bar", 
				  age: 66,
				};
				var object2 = { 
				  foo: "bar", 
				  age: 66
				};

Parse Int

		parseInt('16')

Parse Int

		parseInt('16')

		
				>>  16

Parse Int

		parseInt('16')

		
				>>  16

		parseInt('16 Moto Myszy Z Marsa')

Parse Int

		parseInt('16')

		
				>>  16

		parseInt('16 Moto Myszy Z Marsa')

		
				>>  16

Parse Int

		parseInt('Dwa 21')

Parse Int

		parseInt('Dwa 21')

		>>  NaN

Parse Int

		parseInt('Dwa 21')

		>>  NaN

		
				parseInt('016')

Parse Int

		
				parseInt('Dwa 21')

		
				>>  NaN

		
				parseInt('016')

		
				>>  14 //Old
				>>  16 //New

Parse Int - Number

		
				Number("016") // returns 16
				Number(016) // returns 14

		
				parseInt('016',10)

Type of

TypeOf

		
				console.log(typeof what);


				var what = null;
				console.log(typeof what);

TypeOf

		
				console.log(typeof what);
				// undefined

				var what = null;
				console.log(typeof what);
				// object

				typeof null;
				// object

TypeOf

		
				console.log(typeof 44);

				console.log(typeof 1.5);

				console.log(typeof NaN);

				console.log(typeof Infinity);

TypeOf

		
				console.log(typeof 44);
				// number
				console.log(typeof 1.5);
				// number
				console.log(typeof NaN);
				// number
				console.log(typeof Infinity);
				// number

Równość

Równość - nie używać ==

		
				false == 'false';

Równość - nie używać ==

		
				false == 'false';
				// false

Równość - nie używać ==

		
				false == 'false';
				// false

		
				false == '0';

Równość - nie używać ==

		
				false == 'false';
				// false

		
				false == '0';
				// true

Równość - nie używać ==

		
				false == 'false';
				// false

		
				false == '0';
				// true

		
				0 == '';

Równość - nie używać ==

		
				false == 'false';
				// false

		
				false == '0';
				// true

		
				0 == '';
				// true

Równość - nie używać ==

		
				false == undefined;

Równość - nie używać ==

		
				false == undefined;
				// false

Równość - nie używać ==

		
				false == undefined;
				// false

		
				false == null;

Równość - nie używać ==

		
				false == undefined;
				// false

		
				false == null;
				// false

Równość - nie używać ==

		
				false == undefined;
				// false

		
				false == null;
				// false

		
				null == undefined;

Równość - nie używać ==

		
				false == undefined;
				// false

		
				false == null;
				// false

		
				null == undefined;
				// true

Równość obiektów

		
			 var ob1 = {};
			 var ob2 = {};

			 ob1 == ob2

Równość obiektów

		
			 var ob1 = {};
			 var ob2 = {};

			 ob1 == ob2
			 // false

Równość obiektów

		
			 var ob1 = {};
			 var ob2 = {};

			 ob1 == ob2
			 // false
			 ob1 === ob2

Równość obiektów

		
			 var ob1 = {};
			 var ob2 = {};

			 ob1 == ob2
			 // false
			 ob1 === ob2
			 // false

Blok kodu i zasięg

Blok pętli

		
				for (var i = 0; i < 10; i++) {
					/* ... */
				}
				console.log(i);  
				// co to będzie?

Blok pętli

		
				for (var i = 0; i < 10; i++) {
					/* ... */
				}
				console.log(i);  
				// co to będzie?

		>> 10

Variable hosting z dokumentacji FireFox

		
				bla = 2;
				var bla;
				// ...

				// is implicitly understood as:

				var bla;
				bla = 2;

Zasięg

		
				function myfn() {
				   console.log("przed:");
				   console.log(x);

				   if( true ) {
					  var x = 4;
					  console.log("w:");
					  console.log(x);
				   }

				   console.log("po:");
				   console.log(x);
				   console.log("koniec");
				}

				myfn();

Zasięg

		
				function myfn() {
				   console.log("przed:");
				   console.log(x);

				   if( true ) {
					  var x = 4;
					  console.log("w:");
					  console.log(x);
				   }

				   console.log("po:");
				   console.log(x);
				   console.log("koniec");
				}

				myfn();

				//przed: undefined
				//w : 4
				//po: 4

Zasięg

		
				function myfn() {
				   console.log("przed:");
				   console.log(x);

				   if( false ) {
					  var x = 4;
					  console.log("w:");
					  console.log(x);
				   }

				   console.log("po:");
				   console.log(x);
				   console.log("koniec");
				}

				myfn();

Zasięg

		
				function myfn() {
				   console.log("przed:");
				   console.log(x);

				   if( false ) {
					  var x = 4;
					  console.log("w:");
					  console.log(x);
				   }

				   console.log("po:");
				   console.log(x);
				   console.log("koniec");
				}

				myfn();

				//przed: undefined
				//w : undefined
				//po: undefined

Zasięg i THIS

		
				var ok = "global";
				var cez = {
					ok: "Tak",
					myfunc : function() { return this.ok; } 
				};

				console.log(cez.myfunc());

				var meth = cez.myfunc;

				console.log(meth());

Zasięg i THIS

		
				var ok = "global";
				var cez = {
					ok: "Tak",
					myfunc : function() { return this.ok; } 
				};

				console.log(cez.myfunc());

				var meth = cez.myfunc;

				console.log(meth());

				// "Tak"
				// "Global"

Inne

Metoda replace

		
				var myString = "M My Mar";

				var m1 = 
					myString.replace(' ',"___"); 

				var m2 = 
					myString.replace(/ /g,"___"); 
				
				console.log(m1); 
				console.log(m2);

Metoda replace

		
				var myString = "M My Mar";

				var m1 = 
					myString.replace(' ',"___"); 

				var m2 = 
					myString.replace(/ /g,"___"); 
				
				console.log(m1); // "M___My Mar"
				console.log(m2); // "M___My___Mar"