학습내용
- 자바스크립트 기초
- 변수
- 데이터타입
- 연산자
- 조건문
- 반복문
- 함수
- 클래스와 객체
- 배열
console.log(1+2)
> 3
console.log("1"+2)
> "12"
문자열과 숫자열을 더하면 숫자를 문자열로 인식
나머지 %
console.log(10 % 3)
> 1
거듭제곱∗∗
console.log(10 ** 2) = 10 x 10
> 100
자기 자신의 값을 증가(
++
)시키거나 감소(--
)시키는 연산자로 변수 앞 or 뒤에 위치하는지에 따라 결과가 달라진다.
변수 앞에 올 때
let count = 1
const preCount = ++count
console.log(`count: ${count}, preCount: ${preCount}`)
> count: 2, preCount: 2
count
+ 1 = 2preCount
= count
= 2변수 뒤에 올 때
let count = 1
const postCount = count++
console.log(`count: ${count}, postCount: ${postCount}`)
> count: 2, postCount: 1
postCount
= count
= 1count
= count
+ 1 = 2
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
논리연산자를 사용해서 특정한 조건을 추출할 때는 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 세 개의 객체를 생성
클래스 내에서 특정 코드를 실행할 수 있는 방법으로 함수와 비슷하다.
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년에 개봉했다.
클래스와 같은 템플릿 없이 빠르게 객체를 생성하는 방법
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주차 내용은 예전에 공부했던 내용이라서 헷갈리는 부분만 다시 정리했다. 개발은 기초를 공부하고 또 해도 전혀 과하지 않은 것 같다. 개념을 다 알고 있어도 막상 코드를 짤 때는 생각이 안나고, 잘 쓰다가도 한동안 안쓰면 또 까먹기 때문이다.... 이번에는 제발 안까먹기를....
반복해서 익숙해지는게 가장 중요한 것 같아요
자연스러워지는 그날까지 화이팅!