[포스코x코딩온] 웹 풀스택 과정 5주차 회고 | Javascript 고급

 

오늘은 앞으로 많이 사용하게 될 추가적인 javascript 문법과 form 전송에 대해 배웠다. form 전송은 Node.js에서 다루기 때문에, 다음 글로 따로 블로깅할 예정이다.

Javascript 추가 문법

📌구조분해 할당

구조분해 할당이란, 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있도록 하는 js 표현식이다.

🚩 배열 구조 분해

const [변수] = 배열의 형태로 구조 분해하여 할당한다.

• 기존의 lists[0], lists[1] 과 같은 방식보다 간단하게 변수에 값을 할당할 수 있다.

const lists = ['apple', 'grape'];
[item1, item2, item3 = 'peach'] = lists;
console.log(item1, item3);
// 출력 결과
// apple grape peach

• const로 선언된 배열 자체는 바꿀 수 없지만, 그 안의 원소들은 바꿀 수 있다.

item1 = "peach";
console.log(item1, item3);
// 출력 결과
// peach peach

• 두 변수의 값을 교환할 수 있다.

let x=1, y=3;
[x, y] = [y, x];
console.log(x, y);
// 출력 결과
// 3 1

🚩 객체 Object

객체 구조분해에 앞서, 우선 대략적으로 객체에 대해 배웠다.

• 객체는 key: value 형태로, 여러 속성을 하나의 변수에 저장할 수 있는 구조이다. (key가 변수, value가 변수에 할당된 값)
• 중괄호{ }로 생성한다.
• Value는 모든 유형이 될 수 있다. (배열, 함수도 가능)
• 특수문자가 들어가는 경우, 문자열" "로 변수를 선언해야 한다.

const Person = {
  name: "kim",
  age: 20,
  gender: "F",
  friends: ['Alex', 'Kevin'],
  hello: function(){
    console.log('hello');
  }
  "j-1": "America'
}

• 객체명.key값 또는 객체명['key값'] 형태로 접근하여 value를 불러올 수 있다.

console.log(Person.age); // 출력 결과 20
Person.age = 25;
console.log(Person.age); // 출력 결과 25

console.log(Person["name"]); // 출력 결과 kim
console.log(Person["j-1"]); // 출력 결과 America
// j-1과 같이 특수문자가 포함된 key 값은 배열 형태 [ ]로 불러와야 한다.

• 배열 안에 객체를 넣어 사용하는 경우가 많다.

const Persons = [
  {
    name: 'kim',
    age: 20,
  }
  {
  	name: 'park',
  	age: 23,
  }
  {
    name: 'lee',
    age: 25,
  }
]

🚩 객체 구조 분해

const{변수} = 객체의 형태로 구조 분해하여 할당한다.

• 객체 안의 속성을 변수명으로 사용해야 한다.

const {name, city, gender, key1 = "hi"} = Person;
console.log(name, city, gender, key1);

📌 spread 연산자 (...)

• spread 연산자는 객체나 배열의 값을 전개해준다.
• 배열의 병합에 용이하다. (기존에는 js 내장된 concat() 함수 사용)

const a = [1, 2, 3];
const b = [4, 5];
// 기존 방법
const concat = a.concat(b);
console.log(concat); // 출력 결과: [1, 2, 3, 4, 5]

// spread 연산자 사용
const spread = [...a, ...b];
console.log(spread); // 출력 결과: [1, 2, 3, 4, 5]

• 문자열도 해체할 수 있다.

const c = 'hello';
console.log([...c]); // ['h', 'e', 'l', 'l', 'o']

• rest 파라미터 ...rest: spread 연산자를 매개변수로 사용한 것으로, 함수 호출 시 여러 인자를 받을 수 있도록 한다.

function get(a, ...rest) {
  console.log(a);
  console.log(...rest);
}
get(10, 20, 30, 40, 50);
// 실행 결과
// 10
// 20 30 40 50

📌 클래스

• 객체를 생성하기 위한 템플릿이다.
• 클래스는 대문자로 시작하도록 한다.
• 클래스의 생성자(constructor)는 값이 생성되었을 때, 해당 값이 들어가 클래스가 생성되도록 해준다.
• 클래스 내의 메소드는 function 키워드를 쓰지 않는다.

class Cat {
  // 생성자
  constructor (name, age) {
 	// 속성
    this.name = name;
    this.age = age;
  }
  // 메소드
  mew(){console.log("야옹")}
  eat(){console.log("먹이를 먹습니다.")}
}
const cat1 = new Cat("나비", 1); // 객체 생성됨
console.log(cat1); // Cat {name: "나비", age: !}
cat1.mew(); // 야옹
cat1.eat(); // 먹이를 먹습니다.