학습내용

• 자바스크립트 기초
  • 변수
  • 데이터타입
  • 연산자
  • 조건문
  • 반복문
  • 함수
  • 클래스와 객체
  • 배열

연산자

문자열 + 숫자

console.log(1+2)
> 3

console.log("1"+2)
> "12"

문자열과 숫자열을 더하면 숫자를 문자열로 인식

산술연산자(Numeric operators)

나머지 %

console.log(10 % 3)
> 1

거듭제곱∗∗

console.log(10 ** 2) = 10 x 10
> 100

증감연산자(Increment and Decrement operators)

자기 자신의 값을 증가(++)시키거나 감소(--)시키는 연산자로 변수 앞 or 뒤에 위치하는지에 따라 결과가 달라진다.

• 변수 앞에 올 때

  let count = 1
  const preCount = ++count
  console.log(`count: ${count}, preCount: ${preCount}`)
  > count: 2, preCount: 2

  1. count + 1 = 2
  2. preCount = count = 2
     
     

• 변수 뒤에 올 때

  let count = 1
  const postCount = count++
  console.log(`count: ${count}, postCount: ${postCount}`)
  > count: 2, postCount: 1

  1. postCount = count = 1
  2. count= count + 1 = 2

대입연산자(Assignment operators)

• a += b
  a + b 값을 a에 할당하기( = a = a+b)
• a -= b
  a - b 값을 b에 할당하기( = a = a-b)

const shirtsPrice = 100000
const pantsPrice = 80000
let totalPrice = 0

totalPrice += shirtsPrice
console.log(totalPrice)
> 100000

totalPrice += pantsPrice
console.log(totalPrice)
> 180000

totalPrice -= shirtsPrice
console.log(totalPrice)
> 80000

논리연산자(Logical perators)

논리연산자를 사용해서 특정한 조건을 추출할 때는 boolean을 발견하면 그 다음 조건은 무시해버리는 ||와 &&의 특성을 활용한다.
ex) 내일배움캠프 4기(100%)의 A반(50%) 중 5조(10%) -> 5조 A반 내일배움캠프 4기

연산자를 활용한 조건문

if(limit < 2){
    console.log("걷기")
} else if(limit >= 2 && limit < 5) {
    console.log("택시")
} else {
    console.log("기차")
}

const limit = 1
> "걷기"

const limit = 3
> "택시"

const limit = 10
> "기차"

---

클래스와 객체

클래스 선언과 객체 생성

객체를 생성하기 위한 설계도. 클래스를 정의해두면 클래스를 사용해서 동일한 형태의 객체를 쉽게 생성할 수 있다.

class favMovies {
    constructor(title, director, release){
        this.title = title
        this.director = director
        this.release = release
    }
}

const first = new favMovies('박쥐', '박찬욱', 2009)
const second = new favMovies('Pulp Fiction', 'Quentin Tarantino', 1994)
const third = new favMovies('Gravity', 'Alfonso Cuaron', 2013)

favMovies라는 클래스를 정의해서 first, second, `third 세 개의 객체를 생성

메소드(method)

클래스 내에서 특정 코드를 실행할 수 있는 방법으로 함수와 비슷하다.

class favMovies {
    constructor(title, director, release){
        this.title = title
        this.director = director
        this.release = release
    }

	// 메소드
    movieInfo() {
        console.log(`${this.director} 감독이 연출한 ${this.title}은(는) ${this.release}년에 개봉했다.`)
    }
}

const first = new favMovies('박쥐', '박찬욱', 2009)
first.movieInfo()
> 박찬욱 감독이 연출한 박쥐은(는) 2009년에 개봉했다.

객체 리터럴(Object Literal)

클래스와 같은 템플릿 없이 빠르게 객체를 생성하는 방법

const second = {
    title: '박쥐',
    director: '박찬욱',
    release: 1009,
    movieInfo: function(){
        console.log(`${this.director} 감독이 연출한 ${this.title}은(는) ${this.release}년에 개봉했다.`)
    }
}

second.movieInfo()
> 박찬욱 감독이 연출한 박쥐은(는) 2009년에 개봉했다.

클래스와 객체 리터럴의 차이
클래스와 객체 리터럴은 결과적으로 같은 값을 호출하지만 재사용성이라는 큰 차이가 있다. 클래스의 경우 한 번 클래스를 정의하면 같은 속성과 메소드를 지닌 객체를 간결한 코드로 생성 가능하지만 객체의 경우엔 불가능하다. 그러므로 같은 형태의 객체를 2개 이상 생성시에는 객체 리터럴이 아닌 클래스를 사용해야 한다.

---

배열

마지막 요소 출력하기

요소의 순번이 0부터 시작하는 배열의 특성을 이용해, 배열의 길이에서 -1을 한다면 마지막 요소의 값을 구할 수 있다.

const languageList = ['Korean', 'English', 'Spanish', 'Japanese', 'Chinese', 'Cantonese']
console.log(languageList[languageList.length - 1])
> Cantonese

요소 추가 및 제거

• push 배열의 마지막에 새로운 요소 추가
• pop 배열의 마지막 요소 제거

배열을 사용한 반복문

• for문 기본형

  for (let i = 0; i < languageList.length; i++){
      console.log(languageList[i])
  }

  
  

• for문 간략화

   for (language of languageList) {
       console.log(language)
   }

---

1주차 내용은 예전에 공부했던 내용이라서 헷갈리는 부분만 다시 정리했다. 개발은 기초를 공부하고 또 해도 전혀 과하지 않은 것 같다. 개념을 다 알고 있어도 막상 코드를 짤 때는 생각이 안나고, 잘 쓰다가도 한동안 안쓰면 또 까먹기 때문이다.... 이번에는 제발 안까먹기를....