Taeyoung Kim(RaccoonCode96)

Go for IT! Raccooncode’s TIL blog.

20210518 JavaSciprt 03 : 데이터(String API, Number API, Array API) Object(static methods), 구조 분해 할당, 전개 연산자

10 분 소요

JavaScript03

Javascript : 데이터

  • String: “”, ‘’, ``
  • Number
  • Boolean: true, false
  • undefined
  • null
  • Array: []
  • Object: {}




String

  • MDN : String

  • String.prototype.method 들은 언제든지 사용 가능함
  • 리터럴 형태에 바로 붙여 사용도 가능, 변수에 담아서도 가능하고


length

  • String 객체가 가지고 있는 property로서 해당 instance의 string index의 개수를 표현
const str01 = "0123";
console.log(str01.length); // 4
console.log("01 23".length); // 5 (공백도 문자임)


indexOf

  • indexOf : 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없으면 -1을 return
const result01 = "Hello World!".indexOf("World");
const result02 = "Hello World!".indexOf("Go");
console.log(result01); // 6
console.log(result02); // -1

const str02 = "Hello World!";
console.log(str02.indexOf("Go") !== -1);
// 없는것이 아니냐? -> 있느냐? : false


slice

  • (start, end) start에서 end 직전 까지 추출
const str02 = "Hello World!";
console.log(str02.slice(6, 11)); // World


replace

  • 첫번째 인수 값을 찾아 두번째 인수 값으로 교체해줌
const str02 = "Hello World!";
console.log(str02.replace("World", "JavaScript")); // Hello JavaScript!
// 특정 문자 제거 용도로도 가능
console.log(str02.replace(" World!", "")); // Hello


match

  • 정규표현식 조건에 맞는 문자를 추출해서 배열로 return
const str03 = "BraveGirls@gmail.com";
console.log(str03.match(/.+(?=@)/)[0]); // BraveGirls


trim

  • 앞뒤 연속된 공백 제거
const str04 = "   Hello world  ";
console.log(str04.trim()); // Hello world




Number

toFixed

  • 소수점 몇자리까지 남길지 -> string으로 형 변환됨
const pi = 3.14159265358979;

const str = pi.toFixed(2);
console.log(typeof str, str); // string 3.14


parseInt, parseFloat (숫자 관련 전역함수)

  • 문자형 숫자를 number로 형변환 시키고, int는 정수형으로, float은 유리수형 (소수형)으로 나타냄
const interger = parseInt(str);
const float = parseFloat(str);

console.log(typeof interger, interger); // number 3
console.log(typeof float, float); // number 3.14


Math (수학 관련 함수)

// abs
// 절댓값
console.log("abs: ", Math.abs(-20)); // abs:  20

// min
// 숫자데이터 여러개 중에서 가장 작은 값
console.log("min: ", Math.min(2, 8)); // min:  2

// max
// 숫자데이터 여러개 중에서 가장 큰 값
console.log("max: ", Math.max(3, 6, 8, 10)); // max:  10

// ceil
// 해당 숫자보다 크거나 같은 정수 (올림)
console.log("ceil: ", Math.ceil(3.14)); // ceil:  4

// floor
// 해당 숫자보다 작거나 같은 정수 (내림)
console.log("floor: ", Math.floor(3.14)); // floor:  3

// round
// 반올림
console.log("round: ", Math.round(3.14)); // round:  3

// random
// 난수 ,랜덤 숫자 (0 ~ 1)
console.log("random: ", Math.random()); // 0.13659198791771932
const randomNumber = Math.floor(Math.random() * 10);
console.log(randomNumber); // 0 ~ 9 숫자




Array API (배열)

  • 어떤 데이터들을 순서대로 배열해 놓은 형태
  • 구성하는 내부 데이터 하나 하나를 element 또는 item 이라고 부름
  • index : 배열 데이터 내부의 특정 데이터 위치를 가르킴


const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cherry"];

console.log(numbers[1]); // 2
console.log(fruits[2]); // Cherry

length

  • 배열의 길이, item의 개수
const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cherry"];

console.log(numbers.length); // 4
console.log(fruits.length); // 3
console.log([1, 2].length); // 2
console.log([].length); // 0


concat()

  • 두 개 배열을 합쳐 새로운 배열을 return (원본에 손상 X)
const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cherry"];
console.log(numbers.concat(fruits)); // (7) [1, 2, 3, 4, "Apple", "Banana", "Cherry"]
console.log(numbers); // (4) [1, 2, 3, 4]
console.log(fruits); // (3) ["Apple", "Banana", "Cherry"]


forEach()

  • 콜백함수에 들어있는 element 만큼 반복하여 실행
  • 배열의 각 element를 들여와 element, element의 index, element가 들어있는 array를 표현
  • 실제 데이터와 연결되어 참조하고 있음
  • 반환을 하지 않음
const fruits = ["Apple", "Banana", "Cherry"];
fruits.forEach(function (element, index, array) {
  console.log(element, index, array);
});
// Apple 0 (3) ["Apple", "Banana", "Cherry"]
// Banana 1 (3) ["Apple", "Banana", "Cherry"]
// Cherry 2 (3) ["Apple", "Banana", "Cherry"]
  • 매개변수명 : elemnet (item, el, fruit(단수형)) / index , i / array는 잘안씀


map()

  • callback에서 반환하는 값을 모아 새로운 배열로 만들어 반환함
  • forEach와 같은 원리지만, map은 callback return 값을 모아 새로운 배열로 만들어 return
  • forEach는 return이 없는 함수(void)이기 때문에 callback에 return이 있어도 undefined return
  • 원본에 지장을 주지 않음
const fruits = ["Apple", "Banana", "Cherry"];

// forEach 의 경우
const a = fruits.forEach(function (fruit, index) {
  console.log(`${fruit} - ${index}`);
  return fruit;
});
console.log(a); // undefined

// map 의 경우
const b = fruits.map(function (fruit, index) {
  console.log(`${fruit} - ${index}`);
  return `${fruit} - ${index}`;
});
console.log(b); // (3) ["Apple - 0", "Banana - 1", "Cherry - 2"]
  • 객체 리터럴 방식
const c = fruits.map(function (fruit, index) {
  return {
    id: index,
    name: fruit,
  };
});
console.log(c);
// (3) [{…}, {…}, {…}]
  • Arrow 함수를 통한 단축 표현
    • return 키워드, function 키워드 생략
    • 객체 단축 표현시 소괄호 안에 중괄호 주의!
const d = fruits.forEach((fruit, index) => {
  console.log(`${fruit} - ${index}`);
});
console.log(d);

const e = fruits.map((fruit, index) => ({
  id: index,
  name: fruit,
}));
console.log(e);


filter()

  • callback 함수의 return 조건에 만족하는 item만으로 새로운 배열로 만들어 return 즉, filtering을 함
  • map의 경우에는 각 item 모두에 대한 값을 새로운 배열로 만들어 return 하지만, filter의 경우에는 callback의 return을 조건으로 받아, true로 충족하는 item만을 구성하여 return함
  • 원본에 지장을 주지 않음
const numbers = [1, 2, 3, 4];

const a = numbers.map((number) => {
  return number < 3;
});
console.log(a);
// (4) [true, true, false, false]

const b = numbers.filter((number) => {
  return number < 3;
});
console.log(b);
// (2) [1, 2]

// 화살표 함수 단축형
const c = numbers.map((number) => number < 3);
console.log(c);

const d = numbers.filter((number) => number < 3);
console.log(d);


find() , findIndex()

  • find() : item을 돌면서 callback함수의 조건에 의해서 true를 내놓으면 해당 item을 반환
  • test()는 정규 표현식의 method로 정규표현식의 조건과 test의 인자와 비교하여 true or false를 반환함
const fruits = ["Apple", "Banana", "Cherry"];

const a = fruits.find((fruit) => {
  return /^B/.test(fruit);
});
console.log(a); // Banana
  • finedIndex() : find 처럼 찾은 item의 index 번호를 반환함
const b = fruits.findIndex((fruit) => {
  return /^B/.test(fruit);
});
console.log(b); // 1
  • Arrow function에 의한 단축 표현
const c = fruits.find((fruit) => /^B/.test(fruit));
console.log(c);

const d = fruits.findIndex((fruit) => /^B/.test(fruit));
console.log(d);


includes()

  • 해당 인자가 배열 item으로 있는 가? -> true or false return
const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cherry"];

const a = numbers.includes(3);
console.log(a); // true

const b = fruits.includes("Goguma");
console.log(b); // false


push(), unshift(), shift(), pop() (배열에서 넣고 빼는 함수)

  • 원본 수정 주의!
  • s는 앞, p는 끝

push() : 맨 끝 추가

  • 인자를 배열 끝에 넣음 -> 넣고난 뒤의 배열 length return
const numbers = [1, 2, 3, 4];
const pushEl = numbers.push(3);
console.log(numbers); // (5) [1, 2, 3, 4, 3]
console.log(pushEl); // 5

unshift() : 맨 앞 추가

  • 인자를 배열 시작 부분에(0 번 인덱스) 넣음 -> 넣고난 뒤의 배열 length return
// (5) [1, 2, 3, 4, 3]
const unshiftEl = numbers.unshift(2);
console.log(numbers); // (6) [2, 1, 2, 3, 4, 3]
console.log(unshiftEl); // 6

shift() : 맨 앞 제거

  • 배열의 첫번째 인자를 없애고 해당 인자를 return
// (6) [2, 1, 2, 3, 4, 3]
const shiftEl = numbers.shift();
console.log(numbers); // (5) [1, 2, 3, 4, 3]
console.log(shiftEl); // 2

pop() : 맨 끝 제거

  • 배열의 맨끝 인자를 없애고 해당 인자를 return
// (5) [1, 2, 3, 4, 3]
const popEl = numbers.pop();
console.log(numbers); // (4) [1, 2, 3, 4]
console.log(popEl); // 3


reverse() (순서 뒤집기)

  • 원본 수정됨 주의!
  • 배열의 순서 뒤집음
const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cherry"];

numbers.reverse();
fruits.reverse();

console.log(numbers); // (4) [4, 3, 2, 1]
console.log(fruits); // (3) ["Cherry", "Banana", "Apple"]


splice() (특정 값 삭제 하거나, 끼워 넣기, 대체하기, 빼오기)

  • 원본 수정 주의!
  • 배열 데이터의 특정 값을 제거 하거나 특정 위치에 특정 값을 위치시킴 (대체도 되고)
  • (특정 값을 지우거나, 위치시킬 수 있음)
  • (startIndex, delCount, insertItem)
  • 그리고, 제거 했던 값들을 새로운 배열로 만들어 return 함
const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cherry"];

// 특정 값 제거하고 빼오기
const return01 = numbers.splice(2, 1);
console.log(numbers); // (3) [1, 2, 4]
console.log(return01); // [3]

// 특정 값들 제거하고 빼오기
// (3) [1, 2, 4]
const return02 = numbers.splice(1, 2);
console.log(numbers); // [1]
console.log(return02); // (2) [2, 4]

// 새로운 값 끼워 넣기
// (2) [2, 4]
const return03 = numbers.splice(1, 0, 999);
console.log(numbers); // (2) [1, 999]
console.log(return03); // []

// 값 대체하기
// (2) [1, 999]
const return04 = numbers.splice(0, 1, 129);
console.log(numbers); // (2) [129, 999]
console.log(return04); // [1]




객체

  • MDN : Object
  • 정적 메소드 (static method) : prototype이 붙어 있지 않은 method로서 인스턴스에 바로 활용할 수 없는 method들

  • 전역 객체 Object에서 바로 쓰이는 것이지 instance된 특정 객체에 쓰이는 것이 아님

  • 참조형 데이터
    • {} , [], function
    • 메모리에 있는 데이터를 참조만 해서 사용함 -> 이름이 변해도 참조하기 때문에 그 메모리를 가르킴
    • 하지만 메모리 할당이 다른 곳이면 다름
// 객체가 생긴게 같다고 일치 연산자로 비교했을 때 같은 것이 아님
// 같게 되려면 바라보고(참조하고) 있는 메모리가 일치 해야 함
const a = { k: 123 };
const b = { k: 123 };
const c = b;
console.log(a === b); // false
console.log(b === c); // true
console.log(a === c); // false


Static methods

assign()

  • 기존의 Object를 다른 Objcet의 값과 합치거나, 새로운 Object에 복사하여 사용하고자 하는 경우 사용
  • assign(target , sources)
    • target에 source들을 합쳐서 해당 target을 반환함
    • (즉, 할당 받는 함수는 target은 원본에 할당받는 것임)
const userAge = {
  // key: value
  name: "Tom",
  age: 32,
};
const userEmail = {
  name: "Tom",
  email: "BraveGirls@gmail.com",
};

기존 Object에 할당 받아 합치는 경우 (원본 변형 O)

  • assign을 통해서 할당 받는 곳을 가르키기 때문에 참조 형으로서 같음
const target = Object.assign(userAge, userEmail);
console.log(target); // {name: "Tom", age: 32, email: "BraveGirls@gmail.com"}
console.log(userAge); // {name: "Tom", age: 32, email: "BraveGirls@gmail.com"}
console.log(target === userAge); // true

새로운 Object에 할당 받아 합치는 경우 (원본 변형 X)

// 원본 손상 없이 새로운 객체에 return하여 사용하고 싶은 경우
const target = Object.assign({}, userAge, userEmail);
console.log(target); // {name: "Tom", age: 32, email: "BraveGirls@gmail.com"}
console.log(userAge); // {name: "Tom", age: 32}
console.log(target === userAge); // false

새로운 Object에 할당 받아 복사하는 경우 (원본 변형 X)

// 내용은 같지만 새로운 메모리 주소로 할당했기 때문에 다름
const target = Object.assign({}, userAge);
console.log(target); // {name: "Tom", age: 32}
console.log(userAge); // {name: "Tom", age: 32}
console.log(target === userAge); // false



keys()

  • 인자의 객체에서 key들을 모아 배열 형태로 return
const user = {
  name: "Tom",
  age: 32,
  email: "BraveGirls@gmail.com",
};

const keys = Object.keys(user);
console.log(keys);
// (3) ["name", "age", "email"]
  • keys의 활용 (value들 가져오기)
// 객체의 indexing
console.log(user["email"]); // BraveGirls@gmail.com

// key 배열을 뽑아서 map을 사용하여 value 배열로 만듦
const values = keys.map((key) => user[key]);
console.log(values);
// (3) ["Tom", 32, "BraveGirls@gmail.com"]




구조 분해 할당 (Destructuring assignment)

  • 비구조화 할당
  • 객체를 손쉽게 분해해서 값을 꺼내 올수 있음
  • 전체를 꺼낼 필요 없이 필요한 것만 가져 올수 있음

객체 데이터의 구조 분해 할당

  • 받아올 property와 받아오는 변수 명이 일치해야 함
  • 다른 변수명으로 사용하고 싶으면 : 사용해서 변경 가능
  • = 값 을 붙여 default 값을 넣어 줄 수 있음 (받아올 property가 존재하지 않을 때 default 값이 할당 됨)
  • 받아올 property가 없으면 undefined 할당 됨
const user = {
  name: "Tom",
  age: 23,
  email: "BraveGirls@gmail.com",
  // address: 'USA',
};

// 구조분해 할당
const { name, age: age1, email, address = "korea" } = user;

console.log(`사용자의 이름은 ${name} 입니다.`);
// 사용자의 이름은 Tom 입니다.
console.log(`${name}의 나이는 ${age1}세 입니다.`);
// Tom의 나이는 23세 입니다.
console.log(`${name}의 이메일 주소는는 ${email}입니다.`);
// Tom의 이메일 주소는는 BraveGirls@gmail.com입니다.
console.log(address); // korea


배열 데이터의 구조 분해 할당

  • 배열 순서대로 꺼내오면 됨 (순서 주의!)
  • 객체와 다르게 변수명을 바꿀 때는 그냥 의도하는 변수명으로 받아오면 되는 것이기 떄문에 :는 사용하지 않음
  • default 값 설정 가능
const fruits = ["Apple", "Banana", "Cherry"];
const [a, b, c, d = "lemon"] = fruits;
const [, , k] = fruits; // 중간의 값을 가져오려면 쉼표를 통해 몇번째 위치인지 알려줘야 함
console.log(a, b, c, d); // Apple Banana Cherry lemon
console.log(k); // Cherry




전개 연산자 (Spread)

  • MDN : Spread

  • 배열에서 꺼내 쉼표로 구분한 item 나열 함
  • 객체에서 꺼내 쉼표로 구분한 item 나열 함 (ES2018)

배열에서의 전개 연산자

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // (3) ["Apple", "Banana", "Cherry"]
console.log(...fruits); // Apple Banana Cherry
// console.log("Apple", "Banana", "Cherry")

함수에서 배열 전개 연산자 활용

const fruits = ["Apple", "Banana", "Cherry"];
function toObject(a, b, c) {
  return {
    a: a,
    b: b,
    c: c,
  };
}
// 기존 방법
console.log(toObject(fruits[0], fruits[1], fruits[2])); // 불편함
// Spread 사용
console.log(toObject(...fruits)); // {a: "Apple", b: "Banana", c: "Cherry"}


나머지 매개변수 (rest parameter)

  • 매개 변수 부분에도 전개 연산자 사용 가능함
  • 전개 연산자가 사용된 매개 변수는 나머지의 인자들을 모두 받아내는 역할을 함 (해당 매개변수에서는 값들을 array 형태로 object화 시킴)
const fruits1 = ["Apple", "Banana", "Cherry", "Lemon"];

function toObject1(a, b, ...c) {
  return {
    a: a,
    b: b,
    c: c,
  };
}
console.log(toObject1(...fruits1));
// {a: "Apple", b: "Banana", c: Array(2)}


Spread 와 Arrow function을 활용한 축약

  • 기본 적으로 object를 형성하는 함수를 만들 때 property명과 parameter명이 일치 하는 경우 생략 가능
  • Arrow function을 통해서 function , return 키워드 생략
// 속성의 이름과 매개변수의 이름이 같은 경우 축약이 가능함
function shortToObject01(a, b, ...c) {
  return {
    a,
    b,
    c,
  };
}

function shortToObject02(a, b, ...c) {
  return { a, b, c };
}

const shortToObject03 = (a, b, ...c) => ({ a, b, c });

참고