나빼고 다 아는 JS 기초 - 조건문, 객체, 자료구조

자신만만 했던 나는 안녕...

 

어제부터 시작된 JS 수업~!

본격 머리에 쥐가 나기 시작했다 낄낄

---

 

오늘의 문제 1. if문보다 switch문이나 삼항연산자는 어때

 

오늘의 문제1.

조건문으로 if문은 많이 봐왔기때문에 일단 if문으로 풀었다

function getGrade(score) {
  if (score >= 90) {
    return 'A';
  } else if (score >= 80) {
    return 'B';
  } else if (score >= 70) {
    return 'C';
  } else if (score >= 60) {
    return 'D';
  } else {
    return 'F';
  }
}

 

근데 너무 쉬우니까 오히려 잘쓰지않았던 switch문이나 삼항연산자로 문제를 풀어보는것도 좋은 연습이겠단 생각이 들었다.

 

switch문

function getGrade(score) {
  switch (true) {
    case score >= 90:
      return 'A';
      //braek는 retun넣으면 어짜피 종료되기때문에 넣지않았다.
    case score >= 80:
      return 'B';
    case score >= 70:
      return 'C';
    case score >= 60:
      return 'D';
    default:
      return 'F';
  }
}

 

 

삼항연산자

function getGrade(score) {
  return score >= 90
    ? 'A'
    : score >= 80
    ? 'B'
    : score >= 70
    ? 'C'
    : score >= 60
    ? 'D'
    : 'F';
}

 

 

 

 

오늘의 문제 2. 객체 유연하게 다뤄보기

객체는 Object라고도 이야기한다

부끄럽게도 객체가 오브젝트란 사실을 안지 얼마 되지않았다.

그래서 전혀 다른개념인줄;; 나빼고 몰래카메라한줄 알았다

 

// 점 표기법
cat.name = 'mandoo';

// 대괄호 표기법
cat['name'] = 'mandoo';

객체의 속성들을 표현하는방법엔 점과 대괄호 표기법이 있는데 편한걸로 쓰면된다.

 

 

delete cat.dislike;        // 속성 삭제

그리고 속성을 만약 삭제하고싶다면? 속성앞에 delete를 추가하면 끝이다.

 

 

오늘의 문제2.

위 개념들로 오늘의 문제 2번도 무난하게 해결 👇👇

cat.name = 'mandoo';
delete cat.dislike;
cat.age = 2;
cat.like = 'tuna';

 

 

 

객체는 알겠는데 말이에요,,,

내가 알고 있는 객체(Object)는 알고보니 객체 리터럴이였다.

* 리터럴(literal)은 그냥 "있는 그대로" 라는 뜻, 값을 직접 써서 만드는 거

 

아무래도 슈붕보단 팥붕이다

 

그런데 생성자함수라는 어려운 말로 나를 또 혼란스럽게 하는 개념이 나왔다

사실 몇번 들어본 개념이긴한데 쉽게 설명하면 붕어빵틀이라고 생각하면 된다

---

// 객체 리터럴로 10마리 만들면...
let cat1 = { name: 'mandoo', age: 2, like: 'tuna' };
let cat2 = { name: 'nabi', age: 3, like: 'chicken' };
let cat3 = { name: 'mimi', age: 1, like: 'milk' };
// ... 계속 반복...

 

10마리의 고양이정보를 객체로 만든다고 상상해보자. 그런데 똑같은 코드가 반복되고 있다.

이럴때 붕어빵틀처럼 고양이객체 만드는 틀을 먼저 만들어두는것(= 생성자함수)이다.

 

 

// 1단계: 붕어빵 틀 만들기 (생성자 함수)
function Cat(name, age, like) {
    this.name = name;   // this는 "이 고양이" 라는 뜻
    this.age = age;
    this.like = like;
}

// 2단계: 틀로 찍어내기 (인스턴스 생성)
let cat1 = new Cat('mandoo', 2, 'tuna');
let cat2 = new Cat('nabi', 3, 'chicken');
let cat3 = new Cat('mimi', 1, 'milk');

console.log(cat1); // Cat {name: 'mandoo', age: 2, like: 'tuna'}
console.log(cat2); // Cat {name: 'nabi', age: 3, like: 'chicken'}

 

여기서 인스턴스 생성으로 수많은 고양이들을 만들어낼수 있는것..!

인스턴스를 만드는 방법은 보다싶이 객체앞에 new 키워드를 붙이면 된다

 

 

 

 

3. 자료구조....그게뭔데...

이번 구름과정에서 제일 걱정되는 파트 바로 자료구조/알고리즘이 되시겠다

이것만큼은 내가 아는 지식이 1도 없었기때문에 오로지 강의와 내 의지만으로 익혀야하는...ㅠ

근데 어렵게 설명해놔서 그렇지 사실은 별거없는거 같긴하다 (는 착각인가)

 

 

 

 

스택 (Stack) - 그릇 쌓아올리기

쌓인 그릇이 있다면 마지막에 쌓은 그릇순으로 꺼내야하듯이 마지막에 넣은 자료가 먼저 나오는 구조를 말한다. (LIFO)

 

let stack = [];

// push: 데이터 넣기 (위에 쌓기)
stack.push('접시1');
stack.push('접시2');
stack.push('접시3');

console.log(stack); // ['접시1', '접시2', '접시3']

// pop: 데이터 꺼내기 (위에서부터)
console.log(stack.pop()); // '접시3' (마지막에 넣은 게 먼저 나옴)
console.log(stack.pop()); // '접시2'
console.log(stack);       // ['접시1']

 

여기서 stack이란 배열이 있다.

push는 배열의 끝에 요소를 추가하는 것

pop은 배열끝에 있는 요소를 꺼내는 것이 되겠다.

 

 

 

 

 

 

큐 (Queue) - 줄서기

스택과 반대로 특징은 먼저 들어간 자료가 먼저 나온다는것 (FIFO)

let queue = [];

// push: 데이터 넣기 (뒤에 추가)
queue.push('손님1');
queue.push('손님2');
queue.push('손님3');

console.log(queue); // ['손님1', '손님2', '손님3']

// shift: 데이터 꺼내기 (앞에서부터)
console.log(queue.shift()); // '손님1' (먼저 넣은 게 먼저 나옴)
console.log(queue.shift()); // '손님2'
console.log(queue);         // ['손님3']

큐에서의 push는 스택과 동일하게 배열끝에 요소를 추가하는것

shift는 제일 앞에 있는 요소를 꺼내는것이 된다.

반대 unshift도 있는데 제일 앞에 요소자리에 추가하는 것이 되는것

 

 

 

 

참고자료

https://yesdohyun.tistory.com/21

[알고리즘] 자료구조 개념 / 스택, 큐, 덱, 힙 ( Stack, Queue, Deque, Heap)