2022.04.18 - javascript 기초 (배열, 구조분해할당, 전개 연산자)

1. 배열 

// const numbers = [5, 13, 8, 140, 44];

// const found = numbers.find((element) => element > 10);

// console.log(found);

const numbers = [1, 2, 3, 4];

const fruits = ["사과", "바나나", "체리"];

const a = numbers.map((number) => number < 3);

console.log(a);

const b = numbers.filter((number) => number < 3);

// map 은 내부에 콜백에서 반환된 특정한 데이터를 기준으로해서 그 데이터들의 새로운 배열을 메소드가 실행된 자리에서 반환해준다.

// 배열갯수만큼 반복

console.log(b);

console.log(numbers);

const a = fruits.find((fruit) => /^바/.test(fruit));

//find. 정규식 처리 후 종료 더이상 찾지 않음.

console.log(a);

const b = fruits.findIndex((fruit) => /^체/.test(fruit));

//정규식 처리 후 종료 더이상 찾지 않음.

// findIndex => 체리를 찾고 index 순서로 2번째이기 때문에 2가 반환됨.

console.log(b);

const c = numbers.includes(3);

console.log(c);

// includse => 배열데이터 부분에 인수로 사용된 특정한 데이터가 포함이 되어있는지 확인

// numbers에 3이 포함되어 있기 때문에 => true

const d = fruits.includes("HYOEUN");

console.log(d);

// fruits 에 hyoeun이 포함되어있지 않기 때문에 => false

//.push(원본 수정 주의)

numbers.push(5);

// 가장 뒤쪽에 추가된다 => 뒤에 5가 추가됨

console.log(numbers);

//.unshift

numbers.unshift(0);

console.log(numbers);

// 가장 앞쪽에 추가된다 => 앞에 0이 추가됨

//.reverse() -> 거꾸로 뒤집는다. 원본 수정 주의

numbers.reverse();

fruits.reverse();

console.log(numbers);

// 5.4.3.2.1.0 순서로 뒤집어짐

 

console.log(fruits);

// 체리, 바나나, 순서 순으로 뒤집어짐

//.splice() -> 끼워넣기 원본 수정 주의

numbers.splice(2, 0, 999);

// index 순서 (2) , (3)개를 지운다.

 

console.log(numbers);

// 5,4,0만 남음

// .splice(2,0) 하면 원래대로 돌아감

fruits.splice(1, 0, "포도");

console.log(fruits);

 

2. 구조 분해 할당 (Destructuring assignment)
비구조화 할당이라고도 한다. 

const user = {
  name: "myomyo",
  age: 94,
  email: "myo123@mail.com",
  address: "korea",
};

const { name, age, email, address } = user;

console.log(`사용자의 이름은 ${name}입니다. `);

=> 사용자의 이름은 myomyo입니다.

console.log(`${name}의 나이는 ${age}년생 입니다. `);

=> myomyo의 나이는 94년생입니다.

console.log(`${name}의 이메일 주소는 ${email} 입니다. `);

=> myomyo의 이메일 주소는 myo123@mail.com 입니다.

 

console.log(address);

=> address 값을 추가해주지 않을 경우 undefined 가 출력됨 

=> korea

const fruits = ["사과", "바나나", "딸기"];
const [, , c] = fruits;
console.log(c);

==> 세번째에 해당되는 '딸기'가 출력됨 

 

3. 전개 연산자 (Spread)

const fruits = ["사과", "딸기", "배"];
console.log(fruits);
console.log(...fruits);
// 문자 데이터 형태로 쉼표로 구분된 각각의 아이템으로 배열데이터가 전개되어 나뉘어진다. (...) => 전개하는 연산자

function toObject(a, b, c) {
  return {
    a: a,
    b: b,
    c: c,
  };
}
console.log(toObject(...fruits));
// a:'사과 , b:'딸기' , c:'배'

 

+ 이때, fruits에 오렌지를 추가하고 전개연산자를 사용하여 매개변수에 a,b 다음에 ...c 를 사용하면 

const fruits = ["사과", "딸기", "배", "오렌지"];

function toObject(a, b, ...c) {
  return {
    a: a,
    b: b,
    c: c,
  };
}
console.log(toObject(...fruits));

==> a:'사과', b:'딸기', c:Array(2) 

a와 b는 알맞게 들어가고 나머지 데이터들은 모두 c로 들어가게된다. 

이것을 나머지 매개변수(rest parameter) 라고한다. 

 

+  함수내부에서 속성의 이름과 변수의 이름이 같을경우 하나만 남겨도 출력된 값은 같다. 

function toObject(a, b, ...c) {

   return {a, b, c}

}

console.log(toObject(...fruits));

 

+ 해당 함수 화살표함수로 짧게 정리하기

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

 

console.log(toObject(...fruits));