Template Literal / Array Object

Template Literal

// Template Literal : 문자열 처리를 위한 템플릿 제공
console.log(`12345`);
console.log(`라인 1\n라인2`);
console.log(`첫번째줄
    두번째줄`);
let one=1, two=2;
console.log(`${one+two}`);
/*
12345
라인 1
라인2
첫번째줄
    두번째줄
3
 */

// tagged Template
// 함수를 호출하기 전에 템플릿에서 문자열과 표현식을 분리하고 이를 파라미터 값으로 넘겨준다.
function tagF1(text, value) {
    console.log(text[0], value); // 1+2= 3
    console.log(text[1], typeof text[1]); // "" string
    // 표현할 다음문자열이 없을 때 엔진이 빈문자열을 추가하고 이것은 string type이다.
}
tagF1 `1+2=${one+two}`;

function tagF2(text, value1, value2) {
    console.log(text, value1, value2); // (3) ["1+2=", ", ", "", raw: Array(3)] 3 3
    console.log(text[0], value1, value2); // 1+2= 3 3
}

tagF2 `1+2=${one+two}, ${one+two}`;

console.log(String.raw `1+2=${one+two}`); // 템플릿 적용 // 1+2=3
console.log(String.raw `Unicode \u0031\u0032`); // 유니코드는 그냥 문자열로 취급 // Unicode \u0031\u0032

// String.raw() : 문자열 전개, 조합
let result = String.raw({raw : "ABCDEF"}, one, two, 345); // A1B2C345DEF
console.log(result);

---

Array Object

// Template Literal : 문자열 처리를 위한 템플릿 제공
console.log(`12345`);
console.log(`라인 1\n라인2`);
console.log(`첫번째줄
    두번째줄`);
let one=1, two=2;
console.log(`${one+two}`);
/*
12345
라인 1
라인2
첫번째줄
    두번째줄
3
 */

// tagged Template
// 함수를 호출하기 전에 템플릿에서 문자열과 표현식을 분리하고 이를 파라미터 값으로 넘겨준다.
function tagF1(text, value) {
    console.log(text[0], value); // 1+2= 3
    console.log(text[1], typeof text[1]); // "" string
    // 표현할 다음문자열이 없을 때 엔진이 빈문자열을 추가하고 이것은 string type이다.
}
tagF1 `1+2=${one+two}`;

function tagF2(text, value1, value2) {
    console.log(text, value1, value2); // (3) ["1+2=", ", ", "", raw: Array(3)] 3 3
    console.log(text[0], value1, value2); // 1+2= 3 3
}

tagF2 `1+2=${one+two}, ${one+two}`;

console.log(String.raw `1+2=${one+two}`); // 템플릿 적용 // 1+2=3
console.log(String.raw `Unicode \u0031\u0032`); // 유니코드는 그냥 문자열로 취급 // Unicode \u0031\u0032

// String.raw() : 문자열 전개, 조합
let result = String.raw({raw : "ABCDEF"}, one, two, 345); // A1B2C345DEF
console.log(result);

// Array Object
let arrayLike = {0:10, 1:30, length:2};
// 첫번째 파라미터 : 변환 대상을 지정(Array-like 또는 이터러블 오브젝트)
// 두번째 파라미터 : 배열 엘리멘트를 읽을 떄마다 호출할 함수
// 세번째 파라미터 : 두번째 파라미터 함수에서 this로 참조할 오브젝트
values = Array.from(arrayLike, function (value) {
    return value+this.bonus;
}, {bonus:100});
console.log(values);
/*
Array(2)
0: 110
1: 130
length: 2
 */

// of() : 파라미터값을 ㅅ ㅐ로운 배열의 엘리먼트로 설정하여 반환
let arrayObj = Array.of(1,3,5);
console.log(arrayObj);
/*
Array(3)
0: 1
1: 3
2: 5
length: 3
 */

// copyWithin() : 인덱스 범위의 값을 복사하여 같은 배열의 지정한 위치에 설정
// 첫번째 파라미터 : target, 복사한 값을 설정할 시작 인덱스
// 두번째 파라미터 : (옵션) 복사 시작 인덱스, 디폴트 0
// 세번째 파라미터 : (옵션) 복사 끝 인덱스, 디폴트 배열의 length값
one = [1,2,3,4,5,6];
console.log(one.copyWithin(0,3)); // (6) [4, 5, 6, 4, 5, 6]
// 인덱스 시작 3번인 4부터 시작, 1 2 3을 4 5 6으로 대체
one = [1,2,3,4,5,6];
console.log(one.copyWithin(0,2,3)); // (6) [3, 2, 3, 4, 5, 6]

one = [1,2,3,4,5,6];
console.log(one.copyWithin(3)); // (6) [1, 2, 3, 1, 2, 3]

arrayLike = {0:"ABC", 1:"DEF", 2:"가나다", length: 3};
one = Array.prototype.copyWithin.call(arrayLike, 0, 1);
console.log(one); // {0: "DEF", 1: "가나다", 2: "가나다", length: 3}
/*
Array-like는 배열이 아닌 Object 오브젝트이므로 arrayLike.copyWithin(0,1)형태로 호출할수 없다.
하지만 위와 같이 call()을 호출하면서 첫번째 파라미터에 Array-like를 지정하면 copyWithin()이 호출되빈다.
 */

function twoF() {
    return Array.prototype.copyWithin.call(arguments,3,0,2);
};
/*
호출한 함수에서 넘겨 준 파라미터 값이 arguments에 설정됩니다.
arguments가 Array-like 오브젝트이므로 call()의 첫번째 파라미터에 지정하면 copyWithin() 기능을 수행할수 있다.
 */
console.log(twoF(1,2,3,4,5)); // Arguments(5) [1, 2, 3, 1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]

one=[1,2,3,4,5,6]; // 같은 배열에서 인덱스 범위의 값을 지정한 값으로 바꾼다.
console.log(one.fill(7)); // (6) [7, 7, 7, 7, 7, 7]
console.log(one.fill(8,1)); // (6) [7, 8, 8, 8, 8, 8]
console.log(one.fill(2,0,3)); // (6) [2, 2, 2, 8, 8, 8]

// entries() : Array 오브젝트를 이터레이터 오브젝트로 생성하여 반환
one = [1,2,3,4,5,6];
let iterator = one.entries();
console.log(iterator.next()); // {value: Array(2), done: false}

for(var [key, value] of iterator){
    console.log(key,":",value);
    /*
    1 ":" 2
    2 ":" 3
    3 ":" 4
    4 ":" 5
    5 ":" 6
     */
};

// keys() : Key만 갖는 이터레이터 오브젝트를 생성하여 반환
iterator = [1,2,3,4,5,6].keys();
for(var key of iterator){
    console.log(key,":",iterator[key]);
    /*
    0 ":" undefined
    1 ":" undefined
    2 ":" undefined
    3 ":" undefined
    4 ":" undefined
    5 ":" undefined
     */
};

// values() : value만 갖는 이터레이터 오브젝트를 생성하여 반환
iterator = [1,2,3,4,5,6].values();
console.log(iterator.next()); // {value: 1, done: false}
// 배열 엘리먼트  값으로 이터레이터 오브젝트를 생성합니다.
// 배열 인덱스는 이터레이터 오브젝트에 포함되지 않습니다.
// Symbol.iterator()와 같다.

// find() : 엘리먼트 값 비교, 콜백 함수에서 true 를 반환하면 처리 중인 엘리먼트 값을 반환
// 첫번째 파라미터에 배열 엘리먼트를 반복할 떄마다 호출할 함수를 작성
// 두뻔째 파라미터는 선택으로 콜백 함수에서 this로 접근할 오브젝트를 지정
// 콜백함수에서 배열 엘리먼트를 값을 변경할수 없다.

let result2 = [1,2,3].find((value, index, allData) => value === 2);
// 콜백함수의 value 1, index 0, allData에 배열 전체가 설정
// value === 2 에서 false를 반환하므로 배열의 다음 엘리먼트로 콜백 함수를 호출
// 엘리먼트 값이 2이므로 true를 반환, 이때 find()를 종료하면서 처리중인 엘리먼트 값 2가 반환
console.log(result2); // 2

result2 = [1,2,1].find(function (value, index, allData) {
    return value === 1 && value === this.key;
}, {key:1});
// 배열의 첫번째 엘리먼트 값이 1이므로 콜백함수에서 true를 반환하게 되며 find()가 종료
// [1,2,1]에서 [2,1]은 처리하지 않는다.
console.log(result2); // 1

// findIndex() : 배열 인덱스 반환 / 콜백 함수에서 true를 반환하면 처리중인 배열 인덱스를 반환
// 배열 끝까지 콜백함수에서 true를 반환하지 않으면 최종적으로 -1을 반환
result = [1,2,3,4,5].findIndex((value, index, allData) => value == 3);
console.log(result); // 2

result = [1,2,3,4,5].findIndex((value, index, allData) => value == 30);
console.log(result); // -1

result = [1,2,3,4,5].findIndex(function (value, index, allData) {
    return value === 3 && value === this.check;
}, {check:3});
console.log(result); // 2