8일차 TIL : 자바스크립트 기초

변시윤·2022년 11월 7일
0

내일배움캠프 4기

목록 보기
8/131
post-custom-banner

학습내용

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

연산자

문자열 + 숫자

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

profile
개그우먼(개발을 그은성으로 하는 우먼)
post-custom-banner

2개의 댓글

comment-user-thumbnail
2022년 11월 8일

반복해서 익숙해지는게 가장 중요한 것 같아요
자연스러워지는 그날까지 화이팅!

1개의 답글