JavaScript

Arrays

split()

• String을 쪼개고 쪼갠걸 배열에 하나씩 넣어준다. 인자로는 '나누는 기준'을 받는다. 그 기준은 ' ', '_', ';' 등 뭐든 가능함.

const data = "new york;10.99;2000";
const transformedData = data.split(";");
console.log(transformedData); // [ 'new york', '10.99', '2000' ]

join()

• split이랑 반대!
• 인자로 합쳐질 요소들 사이에 넣을것을 지정하고 array를 받아서 그 안의 요소들을 한 덩어리로 뭉쳐준다

const nameFragments = ["Max", "Schwarz"];
const name = nameFragments.join(" ");
console.log(name); // Max Schwarz

인자로 " " 공백을 전달해서 Max 와 Schwarz 사이에 한칸 비어있는것임. ()안을 따로 지정해 주지 않으면 자동으로 쉼표를 넣는다.

배열 구조 분해

• 배열을 작업하기 좋은 변수로 분리할때 사용.

const nameData = ["Max", "Schwarz"];
// const firstName = nameData[0];
// const lastName = nameData[1];

const [firstName, lastName] = nameData;
console.log(firstName, lastName);// Max Schwarz

주석처리해둔 부분과 정확히 같은 작업을 배열구조분해로 수행할 수 있다.
배열이기 때문에 순서가 중요하다. 예시에선 const를 썼지만 let을 써도 정상 작동한다.

배열 안에 변수로 지정할것보다 많은게 들어있으면??

const nameData = ["Max", "Schwarz", "Mr", 30];

const [firstName, lastName, ...otherInformation] = nameData;
console.log(firstName, lastName, otherInformation); //Max Schwarz [ 'Mr', 30 ]

스프레드 연산자를 사용해서 변수에 지정하지 않을 '나머지' 것들을 배열에 몰아넣을수 있다. 이때 나머지 것들이 들어갈 배열의 이름도 원하는 대로 지정할 수 있다.

Maps & Sets

Sets

• 모든 배열 메서드를 사용할수 있는건 아님

• Array.from 으로 손쉽게 배열로 바꿀 수 있음

• 요소의 순서가 보장되지 않음(인덱스가 없음)

• 요소의 중복을 허용하지 않음

• 수학의 집합 이랑 비슷하다고 생각하면 된다.

• 중복을 허용하지 않기 때문에 중복되면 곤란한 것들(id 같은거)을 관리할때 사용한다.

• 배열은 그냥 [ ] 열어서 바로 만드는 것과 달리 set은 new Set 키워드를 사용해서 만든다

const ids = new Set([1, 2, 3]);

• 배열에서 ids[0] 이런 식으로 index를 활용하여 값에 접근했던것과 달리 set은 인덱스를 가지지 않기 때문에 이런 식의 접근이 불가능하다.
  애초에 set 에선 중복값이 없고 특정 값이 그 set에 포함되었는지 안되었는지가 더 중요하기 때문에 has 메서드를 쓰는 경우가 많다.

const ids = new Set([1, 2, 3]);
console.log(ids.has(1)); // true

• set 에 있는 모든 값들을 확인하려면 values 를 쓰면 된다.

const ids = new Set(["hi", "from", "set!"]);
ids.add(2);

for (const entry of ids.values()) {
  console.log(entry);
} // hi from set! 2 

Maps

• 객체랑 비슷하게 key-value 쌍으로 데이터를 저장함

• 객체에서 문자열이나 숫자만을 key나 symbol로 가질수 있었던 것과 대조적으로 maps 에서는 key로 아무거나 사용할 수 있다. key로 배열을 가질수도 있고 아니면 다른 객체를 가질 수도 있다.

• 객체에선 key-value 들의 순서가 없었지만 map에선 순서가 있다.

• map 에서 key 의 중복은 허용되지 않지만 value의 중복은 허용된다.

• 객체를 key로 쓸수 있는 만큼 기존에 이미 존재하는 객체에 정보를 추가하는 식으로 활용할 수 있다.

const person1 = { name: "max" };
const person2 = { name: "manuel" };

const personData = new Map([[person1, [{ date: "yesterday", price: 10 }]]]);
personData.set(person2, [{ date: "two days ago", price: 200 }]);

예시에서는 person1 객체를 key로 삼고 추가 정보가 담긴 배열을 key로 삼아 새로운 map을 만드는 것과 map.set(key,value)메서드로 map에 정보를 추가하는 것을 확인할 수 있다.

Object

객체에 key:value를 넣고 빼기

• delete object.key 로 해당 key:value를 삭제할 수 있다

• obj.key = value 로 원하는 key:value를 넣을 수 있다.

let person = {
  name: "Max",
  age: 30,
  hobbies: ["sports", "cooking"],
  greet: function () {
    alert("Hi there");
  },
};

//객체에 뭘 더하는법
person.isAdmin = true;
//객체에서 뭘 빼는법
delete person.age

구조분해

• 배열 구조분해에서 했던걸 객체에서도 할 수 있다.

• const {빼올 객체에 존재하는 key이름, ...나머지} = 빼올객체명

const { title: movieTitle } = info;

info 라는 이름의 객체에서 title이란 key의 value를 movieTitle 이란 이름의 const에 할당하는 예시.

• 배열 구조분해랑 다른점은, 배열 구조분해에서는 꺼내올때 이름을 마음대로 붙일수 있었고, 순서에 신경써야했던 것과 대조적으로 객체 구조분해에서는 순서는 아무 의미도 없고 대신 객체 내부에서 꺼내오고싶은 것의 key를 정확하게 입력해야 한다는 것이다. key 옆에 :를 붙여서 원하는 변수명을 붙일 수 있다.
  '…나머지' 부분은 선택사항이며 이름도 마음대로 정해도 된다. 선택하지 않은 요소들이 전부 여기로 들어가고 마음대로 정한 이름으로 불러올 수있게 된다.

personal remark

역시 금요일쯤 되니까 기운이 많이 빠진다... 그래도 내일은 늦잠을 좀 잘수 있을테니 다행이다.

this를 계속 공부중인데 아직 잘 감이 잡히지 않는다. 그래도 처음 들었을때보다는 조금 나아졌다.

내일은 동기/비동기랑 promise, 그리고 콜백함수에 대해서 좀더 공부해 봐야겠다. 평일에 이해 못하고 급하게 넘어간거 주말에라도 이해해 보려고 노력해야지!