배열과 객체타입(Object) 메소드 복습하깅

배열(이어서)

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

>> filter

const a = numbers.map((item) => item > 3);
// 총 map은 4번 실행될거고, 결과값은 false,false,false,true
// boolean형이 반환된다.
const b = numbers.filter((item) => item > 3);
console.log("b:", b);
// 4가 담긴 배열이 생성된다.
// 조건식이 false면 다음값으로 넘어가고, true인 결과값만 b에 들어간다.

map도 아래처럼 쓰고, 출력해보면 d에 ["Apple", "Banana", "Cherry"] 다 담김 ( forEach가 안담기는거궁)

const d = fruits.map((a) => a);
console.log("d", d);

🤔 확실히 정리하자

filter는 해당 조건에 맞는 값만(조건식이 true인 값) 리턴해주는거고, map은 return문에 조건을 a>3 요런식으로 걸면, true/false 불린형으로 나오는거고

>> find

const d = fruits.findIndex((fruit) => {
  return /^A/.test(fruit);
});
console.log("d", d);

>>includes

const a = numbers.includes(3);
const b = fruits.includes("abc");
console.log(a, b);
//결과값: boolean형으로 나온다. 

>> push

const pushNum = [1, 2, 3, 4, 5];
const pushFruits = ["사과", "오렌지", "배", "귤"];

pushNum.push(6);
console.log(pushNum);
// 결과값 : [1,2,3,4,5,6]
pushNum.unshift(0);
console.log(pushNum);
// 결과값 : [0,1,2,3,4,5,6]

>> reverse : 뒤집어벌영

// reverse
//  **주의 : 원본데이터 수정된다.
const revNum = [1, 2, 3, 4, 5];
const revFruits = ["사과", "오렌지", "배", "귤"];

revNum.reverse();
revFruits.reverse();

console.log("revNum : ", revNum);
console.log("revFruits : ", revFruits);
// *결과값
// revNum :  [ 5, 4, 3, 2, 1 ]
// revFruits :  [ '귤', '배', '오렌지', '사과'

splice : 지워죵

1. splice (몇번째 인덱스부터, 몇 개 지워)

//>> .spice()
// **원본 데이터 수정주의!!
numbers.splice(2, 1);
// numbers.splice(2, 1) ??
// (배열데이터의 인덱스값, 아이템을 몇 개를 지울지 개수)
console.log(numbers);

1. spilce ( 몇번째 인덱스에 , 0 , 이거 넣어줘 )

numbers.splice(2, 0, 55);
// index의 2번째 자리에 아무것도 삭제하지 말고, '55'를 추가해라
console.log(numbers);
// 결과값 : [ 1, 2, 55, 3, 4 ]

1. 그럼 2)를 응용해서 해당 인덱스 자리에 기존 값 삭제하고 새로운 넘을 끼울수도 있겠징

spilce ( 몇번째 인덱스에 , 1 , 이거 넣어줘 )

numbers.splice(2, 1, 55);
//결과값 : [ 1, 2, 55, 4 ]

 

---

>> Object

• prototype이 안붙어있는 걸
• 정적(static) 메소드라고 한다.
• 프로토타입 메소드는 직접 [].~~ 이렇게 메소드를 바로 붙여 쓸 수 있었는데
• 정적 메소드는 바로 붙여서 못쓰고, Object뒤에 붙여서 써야한다.

assign ( 타겟객체, 덮어붙여넣고싶은객체 (1개 이상가능))

const userAge = {
  name: "hong",
  age: 100,
};

const userEmail = {
  name: "hong",
  email: "abc@gmail.com",
};

const target = Object.assign(userAge, userEmail);
// userAge에 userEmail를 복사해서 붙여넣는다.
console.log(target);
// { name: 'hong', age: 100, email: 'abc@gmail.com' }
console.log(userAge);
// { name: 'hong', age: 100, email: 'abc@gmail.com' }
console.log(target === userAge);
// 결과값 : true

const a = { k: 123 };
const b = { k: 123 };
console.log(a === b);
// 결과값 : false

⇒ userAge를 콘솔에 찍어보면

{ name: 'hong', age: 100, email: 'abc@gmail.com' }

userEmail이 덮어씌워진 것을 볼 수 있는데,

🤔 userAge원본데이터를 건드리고 싶지 않다면??

const target = Object.assign({}, userAge, userEmail);

Object.assign ( { } , a, b ) 첫번째 인수에 { } 빈 객체를 넣어주면 된다.

🤔 Object.assign( { } , a ) 방법을 응용해서, 하나의 새로운 복사객체 만들기

const newObj = Object.assign({}, userAge);
console.log(newObj);
// 결과값 : newObe : { name: 'hong', age: 100 }
console.log(newObj === userAge);
// false

---

>> Object.keys : 객체데이터의 key값들이 ‘배열’로 담겨 반환된다.

const user = {
  name: "hong",
  age: 100,
  email: "abc@google.com",
};

const keys = Object.keys(user);

console.log("keys:", keys);
// 결과값이 배열로 반환되넹
// keys: [ 'name', 'age', 'email' ]

console.log(user["email"]);
// 결과값 : abc@google.com

const values = keys.map((key) => user[key]);
// keys : [name,age,email] 이고
// values에 user['name']의 값을 넣고, user['age']의 값을 넣고, user['email'] 값을 넣는 것
console.log("values:", values);
// values: [ 'hong', 100, 'abc@google.com' ]

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

>> filter

const a = numbers.map((item) => item > 3);
// 총 map은 4번 실행될거고, 결과값은 false,false,false,true
// boolean형이 반환된다.
const b = numbers.filter((item) => item > 3);
console.log("b:", b);
// 4가 담긴 배열이 생성된다.
// 조건식이 false면 다음값으로 넘어가고, true인 결과값만 b에 들어간다.

map도 아래처럼 쓰고, 출력해보면 d에 ["Apple", "Banana", "Cherry"] 다 담김 ( forEach가 안담기는거궁)

const d = fruits.map((a) => a);
console.log("d", d);

🤔 확실히 정리하자

filter는 해당 조건에 맞는 값만(조건식이 true인 값) 리턴해주는거고, map은 return문에 조건을 a>3 요런식으로 걸면, true/false 불린형으로 나오는거고

>> find

const d = fruits.findIndex((fruit) => {
  return /^A/.test(fruit);
});
console.log("d", d);

>>includes

const a = numbers.includes(3);
const b = fruits.includes("abc");
console.log(a, b);
//결과값: boolean형으로 나온다. 

>> push

const pushNum = [1, 2, 3, 4, 5];
const pushFruits = ["사과", "오렌지", "배", "귤"];

pushNum.push(6);
console.log(pushNum);
// 결과값 : [1,2,3,4,5,6]
pushNum.unshift(0);
console.log(pushNum);
// 결과값 : [0,1,2,3,4,5,6]

>> reverse : 뒤집어벌영

// reverse
//  **주의 : 원본데이터 수정된다.
const revNum = [1, 2, 3, 4, 5];
const revFruits = ["사과", "오렌지", "배", "귤"];

revNum.reverse();
revFruits.reverse();

console.log("revNum : ", revNum);
console.log("revFruits : ", revFruits);
// *결과값
// revNum :  [ 5, 4, 3, 2, 1 ]
// revFruits :  [ '귤', '배', '오렌지', '사과'

splice : 지워죵

1. splice (몇번째 인덱스부터, 몇 개 지워)

//>> .spice()
// **원본 데이터 수정주의!!
numbers.splice(2, 1);
// numbers.splice(2, 1) ??
// (배열데이터의 인덱스값, 아이템을 몇 개를 지울지 개수)
console.log(numbers);

1. spilce ( 몇번째 인덱스에 , 0 , 이거 넣어줘 )

numbers.splice(2, 0, 55);
// index의 2번째 자리에 아무것도 삭제하지 말고, '55'를 추가해라
console.log(numbers);
// 결과값 : [ 1, 2, 55, 3, 4 ]

1. 그럼 2)를 응용해서 해당 인덱스 자리에 기존 값 삭제하고 새로운 넘을 끼울수도 있겠징

spilce ( 몇번째 인덱스에 , 1 , 이거 넣어줘 )

numbers.splice(2, 1, 55);
//결과값 : [ 1, 2, 55, 4 ]

---

>> Object

• prototype이 안붙어있는 걸
• 정적(static) 메소드라고 한다.
• 프로토타입 메소드는 직접 [].~~ 이렇게 메소드를 바로 붙여 쓸 수 있었는데
• 정적 메소드는 바로 붙여서 못쓰고, Object뒤에 붙여서 써야한다.

assign ( 타겟객체, 덮어붙여넣고싶은객체 (1개 이상가능))

const userAge = {
  name: "hong",
  age: 100,
};

const userEmail = {
  name: "hong",
  email: "abc@gmail.com",
};

const target = Object.assign(userAge, userEmail);
// userAge에 userEmail를 복사해서 붙여넣는다.
console.log(target);
// { name: 'hong', age: 100, email: 'abc@gmail.com' }
console.log(userAge);
// { name: 'hong', age: 100, email: 'abc@gmail.com' }
console.log(target === userAge);
// 결과값 : true

const a = { k: 123 };
const b = { k: 123 };
console.log(a === b);
// 결과값 : false

⇒ userAge를 콘솔에 찍어보면

{ name: 'hong', age: 100, email: 'abc@gmail.com' }

userEmail이 덮어씌워진 것을 볼 수 있는데,

🤔 userAge원본데이터를 건드리고 싶지 않다면??

const target = Object.assign({}, userAge, userEmail);

Object.assign ( { } , a, b ) 첫번째 인수에 { } 빈 객체를 넣어주면 된다.

🤔 Object.assign( { } , a ) 방법을 응용해서, 하나의 새로운 복사객체 만들기

const newObj = Object.assign({}, userAge);
console.log(newObj);
// 결과값 : newObe : { name: 'hong', age: 100 }
console.log(newObj === userAge);
// false

---

>> Object.keys : 객체데이터의 key값들이 ‘배열’로 담겨 반환된다.

const user = {
  name: "hong",
  age: 100,
  email: "abc@google.com",
};

const keys = Object.keys(user);

console.log("keys:", keys);
// 결과값이 배열로 반환되넹
// keys: [ 'name', 'age', 'email' ]

console.log(user["email"]);
// 결과값 : abc@google.com

const values = keys.map((key) => user[key]);
// keys : [name,age,email] 이고
// values에 user['name']의 값을 넣고, user['age']의 값을 넣고, user['email'] 값을 넣는 것
console.log("values:", values);
// values: [ 'hong', 100, 'abc@google.com' ]