[Javascript] Array.join() / Array.fill() / Array.map()

Array.prototype.join()

 

배열의 모든 요소를 연결해 하나의 문자열로 만드는 method.

 

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

var a = ['바람', '비', '불'];
var myVar1 = a.join();      // myVar1에 '바람,비,불'을 대입
var myVar2 = a.join(', ');  // myVar2에 '바람, 비, 불'을 대입
var myVar3 = a.join(' + '); // myVar3에 '바람 + 비 + 불'을 대입
var myVar4 = a.join('');    // myVar4에 '바람비불'을 대입

 

arr.length 가 0이라면, 빈 문자열을 반환하고

 

요소가 undefined 또는 null이면 빈 문자열로 변환한다.

 

---

 

Array.prototype.fill()

 

배열의 시작 인덱스부터 끝 인덱스의 미만까지 하나의 값으로 채우는 Method.

 

const array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, -1,4));
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

[1, 2, 3].fill(4);               // [4, 4, 4]
[1, 2, 3].fill(4, 1);            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
Array(3).fill(4);                // [4, 4, 4]
[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}

// Objects by reference.
var arr = Array(3).fill({}); // [{}, {}, {}]
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

 

 

arr.fill(value[, start[, end]])

 

• value : 배열을 채울 값.
• start(Optional) : 시작 인덱스, 기본 값은 0.
• end (Optional) : 끝 인덱스, 기본 값은 this.length.

 

start가 음수이면 시작 인덱스는 length+start. (-1 : 뒤에서 첫번째 부터) 

 

end가 음수이면 끝 인덱스는 length+end. (-1 : 뒤에서 첫번째 미만까지)

 

 

fill은 일반 함수이며, this 값이 배열 객체일 필요는 없다.

 

fill 메서드는 변경자 메서드로, 복사본이 아니라 this 객체를 변형해 반환.

 

value에 객체를 받을 경우 그 참조만 복사해서 배열을 채운다.

 

---

 

Array.prototype.map()

 

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

 

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]


var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots는 [1, 2, 3]
// numbers는 그대로 [1, 4, 9]


var kvArray = [{key:1, value:10},
               {key:2, value:20},
               {key:3, value: 30}];

var reformattedArray = kvArray.map(function(obj){
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
// reformattedArray는 [{1:10}, {2:20}, {3:30}]

// kvArray는 그대로
// [{key:1, value:10},
//  {key:2, value:20},
//  {key:3, value: 30}]

 

 

arr.map(callback Function(currentValue, index, array), thisArg)

 

callback Function

새로운 배열 요소를 생성하는 함수. 아래 세 가지 인수를 가진다.

 

• currentValue : 처리할 현재 요소.
• index[Optional] : 처리할 현재 요소의 인덱스.
• array[Optional] : map()을 호출한 배열.

 

thisArg[Optional]

callback을 실행할 때 this로 사용되는 값.

 

배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열을 반환하고 원래 배열은 바뀌지 않는다.

 

References

---

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/fill

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort