241104 TIL - 전개구문, split(), sort(), assign()

전개구문 spread operator

• 기존 배열이나 객체를 복사한 새 배열이나 객체 생성

/* 배열 복사 */
let color = ["red", "blue"];
let new_color = [...color];

console.log(new_color); // 반환 : ["red", "blue"]

/* 객체 복사 */
let person = {name : "Bob", age : 25};
let new_person = {...person};

console.log(new_person); // 반환 : {name : "Bob", age : 25}

• 배열에 요소 추가하기

/* 배열에 요소 추가 */
let color = ["red", "blue"];
let new_color = ["yellow", ...color, "green"];

console.log(new_color); // 반환 : ["yellow", "red", "blue", "green"]

• 배열들을 병합한 새 배열을 생성

/* 배열 병합 */
let color1 = ["red", "blue"];
let color2 = ["yellow", "green"];
let new_color = [...color1, ...color2];

console.log(new_color); // 반환 : ["red", "blue", "yellow", "green"]

• 객체에 새로운 프로퍼티를 추가

/* 프로퍼티 업데이트 */
let person = {name : "Bob", age : 25};
let new_person = {...person, gender : "male", address : "Seoul"};

console.log(new_person); // 반환 : {name : "Bob", age : 25, gender : "male", address : "Seoul"}

• 문자열을 글자 하나하나를 요소로 갖는 배열로 변환

/* 문자열 -> 배열 */
let str = "Hello!";
let arr_str = [...str];

console.log(arr_str); // 반환 : ["H", "e", "l", "l", "o", "!"]

• 배열의 요소 각각을 함수의 인자로 넣을 수 있게 함

/* 배열 매개변수에 바로 넣기 */
let nums = [1, 2, 3, 4];

function add(a, b, c, d) {
  return a + b + c + d;
}

let add_result = add(...nums);
console.log(add_result); // 반환 : 10

 

 

유사 배열 객체

 key가 인덱스 값으로 돼있고, 길이를 나타내는 length 속성을 갖는 객체. 대표적으로 문자열

 

 

Array.from()

 유사 배열 객체나 이터러블한 객체를 배열로 변환해줌

/* 문자열 -> 배열 */
let str = "Hello!";
let arr_str = Array.from(str);

console.log(arr_str); // 반환 : ["H", "e", "l", "l", "o", "!"]

 

 

split()

• 문자열을 구분자 기준으로 나눠서, 제한한 길이 이하의 배열로 반환함

/* 기본 구조 */
문자열.split("구분자", 제한길이)

• 구분자 입력하지 않을 경우 문자열 통째로 요소 하나인 배열로 반환

/* 구분자 없는 경우 */
let str = "Hello!";
let split_str = str.split();

console.log(split_str); // 반환 : ["Hello!"]

• 빈문자열을 구분자로 삼으면 매 글자글자 분리

/* 구분자가 "" 빈문자열인 경우 */
let str = "Hello!";
let split_str = str.split("");

console.log(split_str); // 반환 : ["H", "e", "l", "l", "o", "!"]

 

 

toUpperCase()

 기존 문자열의 모든 소문자를 대문자로 변환해서 새로운 문자열을 반환함. 기존 문자열은 변화X

/* 예시 */
let str = "Hello!";
let upper_str = str.toUpperCase();

console.log(upper_str); // 반환 : "HELLO!"
console.log(str); // 반환 : "Hello!"

 

 

toLowerCase()

 기존 문자열의 모든 대문자를 소문자로 변환해서 새로운 문자열을 반환함. 기존 문자열은 변화X

/* 예시 */
let str = "Hello!";
let lower_str = str.toLowerCase();

console.log(lower_str); // 반환 : "hello!"
console.log(str); // 반환 : "Hello!"

 

 

sort()

• 배열의 요소를 원하는 순서로 정렬해줌. 기존 배열을 바꾸며, 새 배열을 반환하지 않음
• 콜백함수 없이 사용할 경우, 순서를 비교할 요소를 모두 문자형으로 판단하며, 기본적으로 유니코드 코드 포인트를 바탕으로 오름차순 정렬함. (유니코드 기준은 쉽게 생각하면 사전순!!)

/* 요소가 모두 문자열인 배열의 정렬 */
let colors = ["red", "blue", "green", "yellow"];
colors.sort();

console.log(colors); // 반환 : ["blue", "green", "red", "yellow"]

/* 요소가 모두 숫자인 배열의 정렬 */
let nums = [1, 5, 12, 43, 1100];
nums.sort();

console.log(nums); // 반환 : [1, 1100, 12, 43, 5]

• 콜백함수는 대개 비교함수 꼴로, 매개변수를 둘 받고 둘의 크기를 비교하는 식. 
• 원리는 비교함수의 반환 값이 0보다 작으면 첫 번째 인수를 두 번째 인수의 앞으로 보내고, 0이면 그대로 두고, 0보다 크면 뒤로 보내는 방식이다. 이때 첫 번째 인수의 인덱스가 두 번째보다 크다.

/* 콜백함수를 활용한 오름차순 정렬 */
let nums = [1, 43, 12, 5, 1100];
nums.sort(function(a, b) {
  return a - b;
});

console.log(nums); // 반환 : [1, 5, 12, 43, 1100]

/* 콜백함수를 활용한 내림차순 정렬 */
let nums = [1, 43, 12, 5, 1100];
nums.sort(function(a, b) {
  return b - a;
});

console.log(nums); // 반환 : [1100, 43, 12, 5, 1]

• 객체의 특정 속성 값을 기준으로 정렬할 수도 있다

/* 배열 요소인 객체의 age 속성을 기준으로 오름차순 정렬 */
let persons = [
  {name : "Bob", age : 25},
  {name : "John", age : 31},
  {name : "Kevin", age : 22},
  {name : "Paul", age : 40}
];

persons.sort(function(a, b) {
	return a.age - b.age;
});

console.log(persons); 
// 반환 : [{name : "Kevin", age : 22}, {name : "Bob", age : 25}, {name : "John", age : 31}, {name : "Paul", age : 40}]

 

 

assign()

• 기존 객체에 새 객체를 덮어씌움. 객체 병합, 복제 등등에 활용

/* 기본 구조 */
Object.assign(기존객체, 덮어씌울객체1, 덮어씌울객체2, ~);

• 객체를 병합하는 경우. 같은 key를 가진 프로퍼티의 경우 기존 value가 덮어씌울 value로 대체됨. 덮어씌움의 우선순위는 더 뒤 쪽 매개변수에 추가된 객체에 있음

/* 겹치는 key가 있는 경우 */
let obj_1 = {key1 : "a", key2 : "b"};
let obj_2 = {key2 : "c", key3 : "d"};
let obj_3 = {key3 : "e", key4 : "f"};

let merged_obj = Object.assign(obj_1, obj_2, obj_3);
console.log(merged_obj); // 반환 : {key1 : "a", key2 : "c", key3 : "e", key4 : "f"}

• 겹치는 key가 없는 경우 각 객체의 프로퍼티들이 온전하게 합쳐짐

/* 겹치는 key가 없는 경우 */
let obj_1 = {key1 : "a", key2 : "b"};
let obj_2 = {key3 : "c", key4 : "d"};

let merged_obj = Object.assign(obj_1, obj_2);
console.log(merged_obj); // 반환 : {key1 : "a", key2 : "b", key3 : "c", key4 : "d"}

• 기존 객체를 복사한 새 객체를 생성하고 싶은 경우 빈 객체를 매개변수에 입력

/* assign으로 객체 복사 */
let obj_1 = {key1 : "a", key2 : "b"};
let obj_2 = Object.assign({}, obj_1)

console.log(obj_2); // 반환 : {key1 : "a", key2 : "b"}

 

 

reduce()

이 메서드는 일단 보류.....

 

 

※ 주의할 점

• forEach()의 e는 대문자여...
• 숫자를 더해 나갈 변수라면 초기값을 숫자로 잘 지정해주자. 선언만 하고 할당을 안 했더니 더한 값이 NaN이 돼버림