내일배움캠프 7일차 : 자바스크립트 기본 문법 2

오늘도 자바스크립트 문법 강의를 들었다. 어제는 그래도 들을만하다고 생각했는데, 내용이 깊어질수록 쉽지 않은 것 같다. 이럴수록 더 기초에 집중해야한다는 생각이다. 기초중 이해가 되는 것들은 넘기고 이해가 가지 않거나 금방 잊어버릴 것 같은 것들을 여기에 적으며 다시 이해해보려한다.

 

- 조건문

• switch문
  변수값에 따라 해당되는 case중 하나를 선택하여 실행한다. 각 케이스가 끝날 때 break로 끝맺어줘야 한다.
  let fruit = "사과";
  
  switch (fruit) {
    case "사과":
      console.log("사과는 빨간색입니다.");
      break;
    case "바나나":
      console.log("바나나는 노란색입니다.");
      break;
    default:
      console.log("해당하는 과일이 없습니다.");
      break;
  }
• 삼항 연산자와 단축 평가
  let x;
  let y = x || 10;
  console.log(y); 
  x값이 없을 경우 기본값을 10으로 사용

 

- 반복문

* for문

• 기본적인 for문
  for (let i = 0; i < 10; i++) {  
  console.log(i);
  }
  let 초기값, 조건식, 증감식 사용하여 반복 횟수 제어
  (0에서 10보다 작은수까지 1씩 더하며 반복)
• 배열과 함께 사용하는 for문
  let numbers = [1, 2, 3, 4, 5];
  for (let i = 0; i < numbers.length; i++) {  
  console.log(numbers[i]);
  }
  배열 요소 개수만큼 반복
• for...in문
  let person = { name: "John", age: 30, gender: "male"};
  for (let key in person) {  
  console.log(key + ": " + person[key]);
  }
  객체의 프로퍼티에 순서대로 접근하여 출력

* while문

let i = 0;

while (i < 10) {
  console.log(i);
  i++;
}

조건이 참인경우에만 반복 (0 ~ 9까지 출력)

 

*break & continue문

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; or continue;
  }
  console.log(i);
}

break문의 경우, 4까지만 출력 후 반복문 종료

continue문의 경우, 5 제외 0 ~ 9까지 출력

 

- 객체 생성

• 기본적인 객체 생성
  let person = {  name: "홍길동",  age: 30,  gender: "남자"};
  객체 person. 객체는 '{}' 중괄호로 만들며, 값은 (:)콜론으로 구분하여 나타냄. 각 속성은(,)쉼표로 구분
• 생성자 함수를 사용한 객체 생성
  function Person(name, age, gender) {
    this.name = name;  
    this.age = age;  
    this.gender = gender;
  }
  let person1 = new Person("홍길동", 30, "남자");
  let person2 = new Person("홍길순", 25, "여자");
  생성자함수 Person을 사용해서 객체 person1, person2 생성. 객체를 일괄적으로 생산 가능
• 객체 속성 접근
  let person = {  name: "홍길동",  age: 30,  gender: "남자"};
  console.log(person.name);   // "홍길동"
  console.log(person.age);    // 30
  console.log(person.gender); // "남자"
  person 객체의 속성에 접근하여 출력. 객체 속성에 접근 할 때 (.)을 활용하여 속성 이름 입력

 

- 객체 메소드

• Object.key() / Object.value() 메소드
  let person = {  name: "홍길동",  age: 30,  gender: "남자"};
  let keys = Object.keys(person); /Object.values(person);
  console.log(keys);   // ["name", "age", "gender"] /["홍길동, 30, "남자"]
  객체 person의 속성 이름을 배열로 반환 / 객체 person의 속성 값을 배열로 반환
• Object.entries() 메소드
  let person = {  name: "홍길동",  age: 30,  gender: "남자"};
  let entries = Object.entries(person);
  console.log(entries);
  객체의 이름과 속성 값을 2차원 배열로 반환
• Object.assign() 메소드
  let person = {  name: "홍길동",  age: 30,  gender: "남자"};
  let newPerson = Object.assign({}, person, { age: 35 });
  console.log(newPerson);   // { name: "홍길동", age: 35, gender: "남자" }
  기존 객체 복사하여 새로운 객체를 만든다.

 

사실 뒷부분 학습을하면서 이해가 안되는 부분이 많은데 기초부분에 대한 기억이 휘발되면서 발생하는 문제같다. 이번 정리하면서 뒷부분 이해되지 않았던 것들이 이해되는것을 보니 무작정 진도를 나가기보다는 강의 앞부분을 정독이 먼저라는 생각이 들었다. 아직 처음인데 빠르게 진도를 나가느냐고 급한 마음이었는데 아무리 급해도 제대로 알고 하는게 진짜 빠르게 가는 방법이라는 생각이 들었다. 막막한 기분이지만 자바스크립트를 마스터하는 그 날까지 파이팅