revision:
The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.
It joins two or more arrays into a new array.
concat()
concat(value0)
concat(value0, value1)
concat(value0, value1, /* … ,*/ valueN)
Parameters:
valueN : optional. Arrays and/or values to concatenate into a new array. If all valueN parameters are omitted, concat returns a shallow copy of the existing array on which it is called.
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// Expected output: Array ["a", "b", "c", "d", "e", "f"]
The concat() method joins two or more strings. The concat() method does not change the existing strings. It returns a new string.
string.concat(string1, string2, . . ., stringX)
Parameters:
string1, string2, . . .stringX : required. The strings to be joined.
<p>Join "sea" and "food":</p>
<p id="demo"></p>
<script>
let text1 = "sea";
let text2 = "food";
let result = text1.concat(text2);
document.getElementById("demo").innerHTML = result;
</script>
<div>
<p id="concat-1"></p>
<p id="concat-2"></p>
<p id="concat-3"></p>
<p id="concat-4"></p>
</div>
<script>
const letters = ["a ", "b ", "c "];
const numbers = [1, 2, 3];
document.getElementById("concat-1").innerHTML = "letters: " + letters;
document.getElementById("concat-2").innerHTML = "numbers: " + numbers;
const alphaNumeric = letters.concat(numbers);
console.log(alphaNumeric);
// results in ['a', 'b', 'c', 1, 2, 3]
document.getElementById("concat-3").innerHTML = "alphaNumeric: " + alphaNumeric;
const numericAlpha = numbers.concat(letters);
console.log(numericAlpha);
// results in [1, 2, 3, 'a', 'b', 'c']
document.getElementById("concat-4").innerHTML = "numericAlpha: " + numericAlpha;
</script>
<div>
<p id="concat-5"></p>
<p id="concat-6"></p>
</div>
<script>
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];
document.getElementById("concat-5").innerHTML = "first array: " + num1 + " - " + "second array: " + num2 + " - " + "third array: " + num3;
const numbers_A = num1.concat(num2, num3);
console.log(numbers_A);
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]
document.getElementById("concat-6").innerHTML = "concatenated arrays: " + numbers_A;
</script>
<div>
<p id="concat-7"></p>
<p id="concat-8"></p>
<p id="concat-9"></p>
<p id="concat-10"></p>
<p id="concat-11"></p>
</div>
<script>
const num4 = [[1]];
const num5 = [2, [3]];
document.getElementById("concat-7").innerHTML = "first array: " + num4 + " - " + "nested array: " + num5;
const numbers_B = num4.concat(num5);
document.getElementById("concat-8").innerHTML = "concatenated arrays: " + numbers_B;
document.getElementById("concat-9").innerHTML = "concatenated arrays: " + JSON.stringify(numbers_B);
console.log(numbers_B);
// results in [[1], 2, [3]]
// modify the first element of num1
num4[0].push(4);
console.log(numbers_B);
// results in [[1, 4], 2, [3]]
document.getElementById("concat-10").innerHTML = "concatenated arrays: " + numbers_B;
document.getElementById("concat-11").innerHTML = "concatenated arrays: " + JSON.stringify(numbers_B);
</script>
<div>
<p id="concat-12"></p>
<p id="concat-13"></p>
<p id="concat-14"></p>
<p id="concat-15"></p>
</div>
<script>
const arr_A = [1, , 3];
const arr_B = [4,5]
console.log([1, , 3].concat([4, 5])); // [1, empty, 3, 4, 5]
document.getElementById("concat-12").innerHTML = "original arrays: " + arr_A + " - " + arr_B;
document.getElementById("concat-13").innerHTML = "concatenated arrays: " + arr_A.concat(arr_B);
const arr_C = [1, 2];
const arr_D = [3, , 5]
console.log([1, 2].concat([3, , 5])); // [1, 2, 3, empty, 5]
document.getElementById("concat-14").innerHTML = "original arrays: " + arr_C + " - " + arr_D;
document.getElementById("concat-15").innerHTML = "concatenated arrays: " + arr_C.concat(arr_D);
</script>
<div>
<p id="concat-16"></p>
<p id="concat-17"></p>
<p id="concat-18"></p>
<p id="concat-19"></p>
<p id="concat-20"></p>
<p id="concat-21"></p>
</div>
<script>
let text1 = "sea";
let text2 = "food";
document.getElementById("concat-16").innerHTML = "text1 : " + text1 + " ; " + " text2 : " + text2;
let result = text1.concat(text2);
document.getElementById("concat-17").innerHTML = "using concat() : " + result;
let text3 = "Hello";
let text4 = "world!";
document.getElementById("concat-18").innerHTML = "text3 : " + text3 + " ; " + " text4 : " + text4;
let result2 = text3.concat(" ", text4);
document.getElementById("concat-19").innerHTML = "using concat() : " + result2;
let text5 = "Hello";
let text6 = "world!";
let text7 = "Have a nice day!";
document.getElementById("concat-20").innerHTML = "text5 : " + text5 + " ; " + " text6 : " + text6 + " ; " + "text7 : " + text7;;
let result3 = text5.concat(" ", text6, " ", text7);
document.getElementById("concat-21").innerHTML = result3;
</script>