자바스크립트 문자열 병합, 객체프로퍼티 나열 join, Object.keys, for...in, forEach, for...of

문자열 병합

배열의 문자열 요소들을 몇몇 구분자로 합치려할 때 사용하며, 매개변수가 생략됐을 때의 기본값은 쉼표이며,

정의 되지않은 요소, 삭제된 요소는 모두 빈 문자열로 취급한다

const array15 = [1, null, "hello", "world", true, undefined];

delete array15[3];

array15.join(); // "1,,hello,,true,"

array15.join(''); // "1hellotrue,"

array15.join(' -- '); // "1 -- -- hello -- -- true --"

 

 

// 문자열 병합과 Array.prototype.join을 함께 쓰면 HTML<ul> 리스트 같은 것도 만들 수 있다

const attributes = ["Nimble", "Perceptive", "Generous"];

const html = '<ul><li>' + attributes.join('</li><li>') + '</li></ul>';

// html : "<ul><li>Nimble</li><li>Perceptive</li><li>Generous</li></ul>";

 

 

Object.keys

객체에서 나열 가능한 문자열 프로퍼티를 배열로 반환

const o = { a : 1, b : 2, c : 3, [SYM] : 4 };

const SYM1 = Symbol();

Object.keys(o)

.forEach(prop => console.log(`${prop} : ${o[prop]}`)); // “a : 1“ “b : 2“ “c : 3“

.filter(prop => prop.match(/^x/)); // “a : 1“ “b : 2“ “c : 3“ []

// 이 예제는 for...in 루프를 썻을 때와 같은 결과이고 hasOwnProperty()를 체크할 필요가 없다

// 객체의 프로퍼티 키를 배열로 가져와야 할 때는 object.keys가 편리하다

 

 

for...in

객체 프로퍼티를 나열할 때 for...in을 주로 사용했다

const SYM = Symbol();

const o = { a : 1, b : 2, c : 3, [SYM] : 4 };

for(let prop in o){

if(!o2.hasOwnProperty(prop)) continue;

console.log(`${prop} : ${o2[prop]}`);

}

for...in을 배열에 사용할 수도 있겠지만, 그리 좋은 생각은 아니다.

배열에는 일반적으로 for루프나 forEach를 사용

 

 

forEach(callback, thisArg)

for문과 마찬가지로 반복적인 기능을 수행할 때 사용한다 하지만 for문 처럼 index, 조건식, 증감식이 필요없다

callback 함수를 통해 그 기능을 대신하며 callback 함수내에 조건문으로 다른 배열을 만들수 있다

 

const array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

array.forEach(function(element, index, array){

console.log(`${array}의 ${index}번째 요소 : ${element}`);

});

//0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10의 0번째 요소 : 0 콜백 함수의 첫 번째 매개변수는 배열의 요소를 차례로 받아오며,

//0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10의 1번째 요소 : 1 두 번째는 인덱스 넘버, 세 번째는 배열의 변수가 할당된다

 

for...of

for(let face of hand)

console.log(`you rolled...${face}!`); // 템플릿 문자열 - 문자열과 ${ }를 통해 값을 삽입할 수 있다

// for...of 배열에 루프를 실행해야 하지만 각 요소의 인덱스를 알 필요는 없을 때 알맞다