JavaScript Tutorial for Programmers - String and Array

JavaScript Tutorial for Programmers

I still remember the days of debugging CORS problem when I put together some projects using JavaScript (& ajax), “a very particular programming language” in my first impression. Recently I got a great opportunity. The new role uses JS, the browser-side script that is now winning in all sides, as the major language. So I took it as a good chance to learn JS more systematically, and this series will be part of the outcome of my study. As the name implies, I will not cover primary level such as “if, else” (condition), “for” (or any kinds of loops), or basic OOP concepts. Instead, I will focus only on differences so you can learn this versatile language like reviewing a pull request, and use it the next day in your next awesome project.

First thing first, in JavaScript, strings are constant while arrays are mutable.

Example:

1
2
3
4
5
6
7
var str = "123";
str[0] = "0";
alert(str);
 
var arr = [1, 2, 3];
arr[0] = "0";
alert(arr);

Result:

1
2
123
0,1,3

By the way, strings are marked with "" , '' or (multiline code definition), and arrays are [].

More examples:

1
2
3
4
5
6
7
8
var str = "123";
str.length = 10;
alert(str);
 
var arr = [1, 2, 3];
arr.length = 10;
alert(arr);
alert(arr[3]);

Results:

1
2
3
123
1,2,3,,,,,,,
undefined

Interestingly, if you change the length of an array by force, the JavaScript runtime adds undefined into the array. But the string can not be modified this way because, as mentioned in the beginning, they are immutable.

Escape character \

JavaScript too uses \ to escape special characters (e.g., a " that is inside a string marked with ").

Example:

1
2
3
alert("\"");
alert("a\nb");
alert("a\tb");

Result:

1
2
3
4
"
a
b
a    b

so \" represents a " literal; \n means a new line and `\t, a tab. Search for “JavaScript special characters” in Google for the full list.

We can directly use ASCII and Unicode in strings with \ just like we did in C. But I will not elaborate further as I can not see an obvious use case of this feature in a high level language.

Concatenation

For strings, we use +, or string template:

1
2
3
4
5
var js = "JavaScript";
var message1 = "I like " + js;  //using +
alert(message1);
var message2 = `and ${js}'s particularities`; //using string template
alert(message2);

Result:

1
2
I like JavaScript
and JavaScript's particularities

Please note that grave accent (`) should be used for string template, not apostrophe (‘).

For array, use concat()

1
2
3
var arr = ['a', 'b', 'c'];
var added = arr.concat(['d', 'e', 'f']);
alert(added);

Result:

1
a,b,c,d,e,f

Access elements

Use [] for both:

1
2
3
4
var arr = ['a', 'b', 'c'];
var str = "abc";
alert(arr[0]);
alert(str[0]);

Result:

1
2
a
a

Search

Use indexOf() for both.

1
2
3
4
5
6
7
8
var arr = ['abc', 'xyz', 123, 789];
alert(arr.indexOf(123));
alert(arr.indexOf('xyz'));
alert(arr.indexOf(789));
alert(arr.indexOf('abc'));
 
var str = "abcxyz";//a=>0 b=>1 c=>2 x=>3
alert(str.indexOf('xyz'));

Result:

1
2
3
4
5
2
1
3
0
3

No explanation…

Substring and subarray

Use substring() for string and slice() for array.

Example:

1
2
3
4
5
6
7
var str = "abcxyz";//a=>0 b=>1 c=>2 x=>3 y=>4 z=>5
alert(str.substring(0, 5));// does not include 5(z)
alert(str.substring(3));//start from 3(x) to the end
 
var arr = ["a", "b", "c", "x", "y", "z"];
alert(arr.slice(0, 5));// does not include 5(z)
alert(arr.slice(3));//start from 3(x) to the end

Result:

1
2
3
4
abcxy
xyz
a,b,c,x,y
x,y,z

I hope this post gives you enough confidence to use these two everyday life data structures (types).