Strings -- Manipulating the Immutable.

String Theory

In the beginning, we learn about data types. Simple and Complex. Primitive and abstract.

Primitive is inherently simple. Two categories are reserved for the alphanumeric characters we are introduced to as children, and the third would not be out of place on a grade school worksheet.

This permanence is the defining difference between primitive and complex data. Immutability the explicit characteristic of simple data.

So how does one one manipulate the immutable?

Methods: Destruction and Creation

JavaScript Methods are “built in” functions that are associated with specific data types. When first learning the basic methods, I wasn't sure if (or when) syntax required an assignment operator.

The method's manner of data manipulation dictates the presence of an assignment. Destructive methods (🚫 =) manipulate data in place, while non-destructive (✅ =) create new values.

Simply put, all string methods are returning a new variable or data value. The original string remains immutable. They all will have assignment operators and return values.

Basic String Methods

.length
returns the length of a string

var str = ‘simple’;
var len = str.length;
console.log(len); // logs 6 to the console
console.log(str); // logs 'simple'

.concat()
joins two or more strings

var str1 = 'simple simon';
var str2 = 'pie man';

// string to be concatenated takes joiners
var combo = str1.concat(' met a ', str2); 

console.log(combo) // 'simple simon met a pie man'

.split
returns an array

var str = 'A,B,C'

// takes in optional separator
var arr = str.split(',')
console.log(arr)// ["A","B","C"]

// empty quotes returns each value as an index
var arr = str.split('')
// returns["A",",","B",",","C"]

// no separator returns whole string at [0]
var arr = str.split()
// ["A,B,C"]

Extraction Methods
return a specified portion of a string

.slice

var str = 'simple simon'
// takes a start and end parameter (non-inclusive)
var portion = str.slice(0, 6) // start at 0 index, stop before 6
console.log(portion) // logs 'simple' to the console

// returns empty if start > end
var portion = str.slice(3, 2) // start at 3 index, end before 2
console.log(portion) // logs '' to the console


// negative numbers start count at the end of the string
// lack of stop value indicates portion extends to end of string
var portion = str.slice(-5) // start at 5th index from end
console.log(portion) // logs 'simon' to the console

.substring

var str = 'simple simon'

// like slice (start, end) but <0 is treated as 0
var portion = str.substring(-5)
console.log(portion) // logs 'simple simon' to the console

.substr

var str = 'simple simon'

// takes (start, length) 
// use in place of .slice when end < start 
var portion = str.substr(3, 2) // start at 3 index, take 2 characters
console.log(portion) // logs 'pl' to the console

// negative numbers start parameter like slice
// negative length treated as 0 characters
var portion = str.substr(-1, 1) // start at -1, return 1 character
console.log(portion) // logs 'n' to the console

var portion = str.substr(2, -5) // 
console.log(portion) // logs '' to the console

Simply Transformative

In JavaScript, manipulation is not an exact synonym for how we use it in regular communication. The change occurs because a new value is created, but the original data is retained.

Although seemingly simple at first, these methods become vital down the road. For example, when looping an array of strings, the methods used on each iteration will be those of strings, not of arrays. Like it's components, string manipulation is straight forward and valuable.

Image Credit
Eloquent JavaScript

Comments

[@whereisthebug]

Being aware of immutability in JavaScript is very important to avoid headaches in the future. As you perfectly said, methods that "manipulate" strings actually create new strings.

By the way, the substr method is no longer recommended as it's deprecated.