[자바스크립트] TIL5 : 배열 메서드를 이용한 배열의 요소 변경 / 템플릿 문자열의 이용 방법

---

▣ 배열 메서드(Array Methods)

배열 구조의 자료를 처리하기 위한 특성 및 메서드들은 다양한 기능을 포함하고 있습니다. 그중에서 대표적인 몇 가지를 살펴보겠습니다.

 

---

□ 배열 메서드 예시1

const numbers1 = [43, 56, 33, 23, 44, 56, 5];
const numbers2 = new Array(223, 45, 334, 76, 546);
const fruits = ['Apple', 'Orange', 'Banana', 'Pear'];
const mixed = [22, 'Hello', true, undefined, null, {a: 1, b: 1}, new Date()];

/* Array.isArray() : method */
console.log(Array.isArray(mixed));

/* Bracket Notation */
console.log(numbers1[2]);

console.log(numbers1);
numbers1[2] = 100;
console.log(numbers1);

/* length : property*/
console.log(numbers1.length);

/* indexOf(), lastIndexOf() : method */
console.log(numbers1.indexOf(56));
console.log(numbers1.lastIndexOf(56));

/* concat() : method */
console.log(numbers1.concat(numbers2));

/* slice() : method */
console.log(fruits.slice(1, 3));

/* includes() : method */
console.log(fruits.includes('Apple'));
console.log(fruits.includes('Pineapple'));

/* find() : method */
function under50(num) {
  return num < 50;
}
console.log(numbers1.find(under50));

function over50(num) {
  return num > 50;
}
console.log(numbers1.find(over50));

 

▷ Array.isArray()

대상이 배열인지 아닌지의 결과를  boolean 자료형(참 또는 거짓)으로  반환해 줍니다. 

 

▷ [ ] 표기법 *

인덱스 값과 '[ ]'를 이용하여 배열의 개별 요소에 접근할 수 있습니다. 그리고 이렇게 접근한 배열의 요소를 다른 데이터로 변경할 수도 있습니다. 

 

▷ length *

배열 내의 모든 요소들의 갯수를 정수 값으로 가집니다.

 

▷ indexOf() * , lastIndexOf() *

배열 내의 요소들 중 괄호 안에 주어지는 인자와 동일한 요소가 있을 경우 해당 인덱스를 반환합니다. 만약 동일한 요소가 여러 개라면 indexOf() 는 첫 번째 인덱스를 반환하고, lastIndexOf()는 마지막 인덱스를 반환합니다. 만족시키는 요소가 없을 경우 -1를 반환합니다.

 

▷ concat() *

배열과 배열을 연결하여 새로운 배열로 반환합니다.

 

▷ slice() *

배열의 일부분을 잘라 새로운 배열로 반환합니다.

 

▷ includes() *

배열 내의 요소(기본형 자료; Primitive type data)들 중 괄호안에 주어지는 인자와 동일한 요소가 있을 경우 true, 없을 경우 false를 반환합니다.

 

※ * : 문자열에서도 사용되는 특성 또는 메서드들입니다. 

 

▷ find()

배열 내의 요소들 중 괄호 안에 인자로 주어지는 함수(콜백 함수; Callbakc function)를 만족하는 첫 번째 요소를 반환합니다. 만족시키는 요소가 없을 경우 undefined를 반환합니다. 기능적으로 indexOf()와 유사하지만, 인자로 함수가 주어지고 반환되는 값이 없을 경우 undefined를 반환합니다.

 

▷ join()

배열 내의 모든 요소들을 연결해 하나의 문자열로 반환합니다. 인자로 주어주는 구분자(Separator)를 이용해 요소들의 사이를 연결하며, 아무런 인자가 주어지지 않을 경우 기본 설정 인자는 쉼표(',')입니다. 예시에서 누락되어 추가합니다.

 

const arr = ['Earth', 'Wind', 'Fire'];

console.log(arr.join()); // Earth,Wind,Fire
console.log(arr.join(' ')); // Earth Wind Fire

 

▷ findIndex()

배열 내의 요소들 중 괄호 안에 인자로 주어지는 함수(콜백 함수; Callbakc function)를 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만족시키는 요소가 없을 경우 -1를 반환합니다. 인자로 함수가 주어지는 것은 find()와 유사하고, 반환되는 값이 없을 경우 -1을 반환하는 것은 indexOf()와 유사합니다. 예시에서 누락되어 추가합니다.

 

const array = [55, 32, 89, 130, 120];
function over100(num) {
  return num > 100;
}
console.log(array.findIndex(over100)); // 3

 

▷ some()

배열 내의 요소들 중 괄호 안에 인자로 주어지는 함수(콜백 함수; Callbakc function)를 만족하는 요소가 한개라도 있으면 true를 반환합니다. 만족시키는 요소가 없을 경우 false를 반환합니다. 예시에서 누락되어 추가합니다.

 

const array = [55, 32, 89, 130, 120];
function over100(num) {
  return num > 100;
}
console.log(array.some(over100)); // true

 

▷ every()

괄호 안에 인자로 주어지는 함수(콜백 함수; Callbakc function)를 배열 내의 모든 요소들이 만족하면 true를 반환합니다. 만족하지 않는 요소가 한개라도 있을 경우 false를 반환합니다. 예시에서 누락되어 추가합니다.

 

const array = [55, 32, 89, 130, 120];
function over100(num) {
  return num > 100;
}
console.log(array.every(over100)); // false

 

 

직접 코드를 작성해 보고 결과를 확인하기 바랍니다. 

 

 

---

□ 배열 메서드 예시2

// 위의 코드에 계속 이어서
/** 
 * Muatating Array Methods
 **/
/* push() : method */
numbers1.push(250);
console.log(numbers1);

/* unshift() : method */
numbers1.unshift(120);
console.log(numbers1);

/* pop() : method */
numbers1.pop();
console.log(numbers1);

/* shift() : method */
numbers1.shift();
console.log(numbers1);

/* reverse() : method */
numbers1.reverse();
console.log(numbers1);

/* splice() : method */
numbers1.splice(2, 1);
console.log(numbers1);

numbers1.splice(1, 1, "hello");
console.log(numbers1);

numbers1.splice(2, 0, "world");
console.log(numbers1);

/* sort() : method */
fruits.sort();
console.log(fruits);

numbers2.sort(function (x, y) {
  return x - y;
});
console.log(numbers2);

numbers2.sort(function (x, y) {
  return y - x;
});
console.log(numbers2);

 

배열을 변경하는 메소드와 변경하지 않는 메서드를 구분하여 Mutating array method와  Non-mutating array method라고 합니다. 앞서 설명한 concat(), slice() 등은 대상이 되는 배열(원본)을 변경하지 않고 새로운 배열(복사본)을 생성하여 반환하는 배열 메서드였습니다. 반면에 지금부터 살펴볼 배열 메서드들은 대상이 되는 배열(원본)을 변경하는 메서드(Mutating array method)들입니다.

 

▷ push() **

배열의 오른쪽 끝에 요소를 추가합니다.

 

▷ unshift() **

배열의 왼쪽 끝에 요소를 추가합니다.

 

▷ pop() **

배열의 오른쪽 끝에 있는 요소를 제거합니다.

 

▷ shift() **

배열의 왼쪽 끝에 있는 요소를 제거합니다.

 

▷ reverse() **

배열의 나열 방향을 반대로 합니다.

 

▷ splice() **

배열 양쪽 끝 이외의 부분에서 요소를 추가 및 변경하거나 삭제할 때 사용하는 메서드입니다. 첫 번째 인자는 시작 위치를 알려주는 인덱스 값이고, 두 번째 인자는 요소의 개수, 그리고 세 번째 인자부터는 추가되는 요소(들)입니다.

위의 코드에서 첫 번째와 두 번째 인자만 사용하면 배열 중간에 원하는 개수만큼 요소를 제거할 수 있고, 두 번째 인자의 값을 0으로 하고 세 번째 인자부터 원하는 값(들)을 주면 배열 중간에 원하는 개수만큼 요소를 추가할 수도 있습니다. 뿐만 아니라 두 번째 인자의 값이 0이 아니면 원하는 개수만큼 요소를 지우면서 동시에 추가할 수도 있습니다.

 

▷ sort() **

인자로 주어지는 함수(콜백 함수; Callbakc function)의 기준에 따라 배열을 정렬합니다. 콜백함수가 주어지지 않을 경우 기본적인 기준은 사전적 순서의 오름차순 정렬(a ~ z)입니다.

만약 배열의 요소들이 숫자일 경우에는 콜백 함수로 주어지는 비교 함수(Compare function)를 아래의 코드와 같이 작성해야 하는데, 첫 번째 비교 함수의 의미는 '오름차순' 정렬이고 두 번째는 '내림차순' 정렬입니다.

/* Sorting numbers : Ascending order */
function (x, y) { return x - y; }

/* Sorting numbers : Descending order */
function (x, y) { return y - x; }

 

※ ** : 대상이 되는 배열(원본)을 변경하는 메서드(Mutating array method)들입니다.

 

직접 코드를 작성해 보고 결과를 확인하기 바랍니다. 

 

 

---

반응형

---

 

▣ 템플릿 문자열(Template Strings 또는 Template Literals)

 

---

□ 템플릿 문자열 예시1

/* Template Strings */
const firstName = "John";
const lastName = "Doe";
const age = 30;

console.log("My name is " + firstName + " " + lastName + " and I am " + age + ".");
console.log(`My name is ${firstName} ${lastName} and I am ${age}.`);

console.log(`hello 
    world`);

 

문자열이 동적으로 출력되도록 변수를 이용해서 코딩할 경우, 문자열을 끊어 중간에 변수를 넣고 다시 조각난 문자열을 이어 붙이는 등 번거로운 작업을 해야 합니다. 하지만 템플릿 문자열(``; Back ticks)을 사용하면 문자열 중간 ${ } 안에 변수를 넣어 작성하거나, 여러 줄의 텍스트를 이스케이프 시퀀스(\n, \', \" 등) 없이 키보드 입력 그대로 출력할 수도 있습니다.

 

 

---

□ 템플릿 문자열 예시2

이러한 템플릿 문자열은 향후에 진행하게 될 내용에서 아래와  같이 활용될 수 있습니다.

 

/* Template strings를 사용하지 않을 경우와 사용할 경우를 번갈아 실행해 보기 */
const fullName = "Jerry Maguire";
const job = "Web Developer";
const city = "LA";
let html;

/* Whithout template strings */
html =
  "<ul><li>Name: " +
  fullName +
  "</li><li>Job: " +
  job +
  "</li><li>City: " +
  city +
  "</li></ul>";
document.body.innerHTML = html;

/* With template strings */
html =
    `<ul>
        <li>Name: ${fullName}</li>
        <li>Job: ${job}</li>
        <li>City: ${city}</li>
    </ul>`;
document.body.innerHTML = html;

 

위의 코드는 HTML 태그를 동적으로 제어하는 예로써 이름, 직업, 도시 데이터를 이용해 HTML 리스트를 만들어 자바스크립트 콘솔이 아닌 웹 브라우저에 띄우라는 명령 코드입니다.  이때 템플릿 문자열을 사용하지 않는 경우와 사용하는 경우를 비교해 보면 템플릿 문자열을 사용하는 경우가 좀 더 가독성이 높다는 것을 알 수 있습니다. 

 

 

위, 아래의 실행 결과를 비교해 보면 브라우저에서 차이는 없습니다.

 

 

---

□ 템플릿 문자열 예시3

/* With string, number, boolean, function */
function hello() {
    return 'hello world';
}
html = 
    `<ul>
        <li>${'hi'}</li>
        <li>${123}</li>
        <li>${12 + 3}</li>
        <li>${3 > 2}</li>
        <li>${hello()}</li>
    </ul>`;
document.body.innerHTML = html;

 

그리고 템플릿 문자열과 ${ } 을 이용하면 변수뿐만 아니라 문자, 숫자, 참과 거짓을 나타낼 수 있으며, 함수를 호출하여 사용할 수도 있습니다.

 

 

---