Javascript - 배열과 객체, 전개연산자

Javascript

 

배열

배열 데이터 ["데이터1", "데이터2", ...]

 

🍙 배열 메소드 (일부)

push("새로운 데이터")	기존 배열 데이터에 새로운 데이터를 맨 뒷자리에 추가한다.
pop()	기존 배열 데이터에서 맨 마지막 데이터를 제거한다.
unshift("새로운 데이터")	기존 배열 데이터에서 맨 첫번째 인덱스 번호의 자리에 새로운 데이터를 추가한다.
shift()	기존 배열 데이터에서 맨 첫번째 인덱스 번호의 데이터를 제거한다.
concat(새로운데이터)	두가지 배열을 결합을 시키겠다는 것을 의미
map()	내장함수는 최초의 인덱스로부터 인자값을 하나씩 출력하는 과정에서 수식의 결과값을 배열 데이터로 반환 (DOM에서는 반복에 대한 역할을 담당)
filter()	내장함수는 최초의 인덱스로부터 인자값을 하나씩 대입하여 조건에 부합하는 것만 필터링한다. (조건문의 역할을 담당)
forEach()	파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드이다. map() 메서드와 거의 비슷하지만 차이점은 따로 return 하는 값이 없다는 점이다.

 

🍙 unshift와 pop 해보기

 

const arr1 = [2, 3, 4, 5];

arr1.unshift(1);
console.log(arr1); // (5) [1, 2, 3, 4, 5]

arr1.pop();
console.log(arr1); // (4) [1, 2, 3, 4]

 

🍙 concat 해보기

const arr2 = [0];
const arr3 = arr2.concat(1);
console.log(arr3); // (2) [0, 1]

 

 

🍙 배열 데이터 자체를 변경할 경우

const str_arr = ["파이리", "꼬부기"];
// str_arr = ["피카츄", "메타몽"]; // Uncaught TypeError: Assignment to constant variable.

 

에러 발생!! (데이터 자체를 갱신할 수 없는 경우)

 

 

 

🍙 map() 활용 

console.log([0, 1, 2, 3, 4, 5, 6].map(function(x){return x * 2})); // (7) [0, 2, 4, 6, 8, 10, 12]
console.log([0, 1, 2, 3, 4, 5, 6].map(x => x * 2)); // (7) [0, 1, 2, 3, 4, 5, 6] 화살표 함수를 활용.

마치 반복문 사용한것처럼 다 곱해져서 나옴!!

 

 

🍙 filter() 활용

console.log([0, 1, 2, 3, 4, 5, 6].filter(function(x){return x % 2 == 0})); // (4) [0, 2, 4, 6]
console.log([0, 1, 2, 3, 4, 5, 6].filter(x => x % 2 == 0)); // (4) [0, 2, 4, 6] 화살표 함수 활용.

조건에 맞도록 필터

 

 

---

객체

객체 데이터{key:value1, key:value2, ...}

 

🍙 객체 생성

const myHero1 = {
    name : "테이",
    category : "오크",
    level : 1,
    hp : 100,
    ep : 0,
    cloth : "일반 가죽옷",
    device : "목검"
}

 

🍙 객체 출력1 → X

console.log(myHero1);
// {name: '테이', category: '오크', level: 1, hp: 100, ep: 0, …}
// category: "오크"
// cloth: "일반 가죽옷"
// device: "목검"
// ep: 0
// hp: 100
// level: 1
// name: "테이"
// [[Prototype]]: Object

 

🍙 객체 출력2 → O

console.log(myHero1.cloth); // 일반 가죽옷

 

🍙 객체에 새로운 요소 추가하기

myHero1.hat = "비니모자";

 

🍙 추가된거 확인해보기

console.log(myHero1);
// {name: '테이', category: '오크', level: 1, hp: 100, ep: 0, …}
// category: "오크"
// cloth: "일반 가죽옷"
// device: "목검"
// ep: 0
// hat: "비니모자" // <== 새롭게 추가됨~
// hp: 100
// level: 1
// name: "테이"
// [[Prototype]]: Object

 

🍙 자바스크립트의 내장함수 assign

assign(객체 변수명, {신규 key1 : 신규 value1}, {신규 key2 : 신규 value2}, ...)

assign()

객체에 새로운 값을 할당할 수 있음

 

🍙 assign 활용해보기

const obj1 = {};
Object.assign(obj1, {new0 : "BTS"}, {new1 : "아이유"});
console.log(obj1); // {new0: 'BTS', new1: '아이유'}

Object.assign(obj1, {new0 : "소방차"});
console.log(obj1); // {new0: '소방차', new1: '아이유'}

즉, 기존에 존재하는 key 의 value의 교체도 가능하다.

 

---

배열 데이터와 객체 데이터의 비교

 

🍙 공통점

- 여러가지 데이터를 담을 수 있음

🍙 차이점
- 배열 데이터 : 이미 순서가 정해져 있음 → 인덱스 번호를 기준으로 찾음
- 객체 데이터 : 실질적인 순서는 없음 → key 값을 기준으로 value 값을 추출

 

---

전개연산자

 

전개연산자(...)

나열형 자료(배열, 객체)를 추출하거나 연결시 사용

 

🍙 전개연산자를 통한 결합

const arr4 = [...arr3, 2, 3];
console.log(arr4); // (4) [0, 1, 2, 3]

 

 

🍙 전개연산자를 통한 추출

const [first, ...arr5] = arr4;
console.log(first); // 0
console.log(...arr5) // 1 2 3
console.log(arr5); // (3) [1, 2, 3]

전개연산자를 이용했기 때문에
first 에는 첫번째 0번 인덱스 번호의 값을 저장하고
나머지를 가져와서 arr5에 저장을 한다. (배열데이터의 형식)

 

 

🍙 전개연산자를 통한 객체 데이터의 결합 또는 변경

const obj2 = {
        name : "테이",
        context : "프론트엔드",
        age : 20,
        region : "서울"
    }

const obj4 = {...obj3, age: 28};
console.log(obj4);
// age: 28 <<< 얘만 변경됨
// context: "프론트엔드"
// name: "테이"
// region: "서울"

나이 수정한걸 볼 수 있음

 

 

🍙 전개연산자를 통한 객체 데이터의 추출

const {age, ...obj5} = obj4;
console.log(age); // 28
console.log(obj5);
// context: "프론트엔드"
// name: "테이"
// region: "서울"

나이를 추출해버렸음