티스토리 뷰
1-4. 변수
* let 변수이름=값
변수 <변수이름>을 선언했고 해당 변수에 <값>을 할당했다고 함.
ㅇ 자바스크립트에서는 변수를 선언하는 const 라는 키워드도 있어요!
const 변수이름 = 값
const는 let과 달리 변수에 값을 재할당할 필요가 없을 때 써요. 해당 변수가 고정된 값을 계속 갖고 있을 때
1-6. 연산자(1)
* 산술연산자 Numeric operators
그 중 ** 는 거듭제곱
ex) console.log(10 ** 2)하면 100을 출력
1-7. 연산자(2)
let a = 1000
let b = 2000
let c = a+b
let d = c*0.8
console.log(`총 ${d}원에 물건을 구입합니다`)
-> ${c * 0.8} 이렇게 쓰기
ㅇ Template literals
: 내장된 표현식을 허용하는 문자열 리터럴
템플릿 리터럴 안에서 변수 뿐만 아니라 연산한 결과도 중간에 넣을 수 있음
1-11. 반복문(2)
for (begin; condition; step) { 조건을 만족할 때 실행할 코드 }
1-13. 함수(1)
* 함수란? 특정 작업을 수행하는 코드의 집합(코드 자체를 만들어 저장해놓고 사용하는 것)
ㅇ 함수의 선언
function 함수명(매개변수들...) {
이 함수에서 실행할 코드들
return 반환값
}
function calculateAvg(price1, price2) {
const sum = price1 + price2 // 매개변수인 price1, price2을 변수처럼 활용!
console.log(`두 상품의 합계는 ${sum}입니다.`)
const avg = sum / 2
return avg // 평균가격을 리턴!
}
ㅇ 함수의 호출
const 변수명 = 선언한 함수명(매개변수들...)
함수를 선언할 때는 선언한 함수명을 적어주고 괄호를 연 다음,
매개 변수를 전달할 그 데이터들, 변수들을 명시해 주면 됨.
이 때, 함수가 어떤 값을 반환함.
따라서 대입연산자를 활용해서 어떤 변수에 함수가 반환한 값을 할당해 주면 됨.
const priceA = 1000
const priceB = 2000
// 함수의 호출
const avg1 = calculateAvg(priceA, priceB)
console.log(`두 상품의 평균은 ${avg1}입니다.`)
priceA, priceB 라는 변수를 선언했고 각각 데이터를 할당함
앞서 정의한 calculateAvg 함수를 호출함
위의 두 변수를 calculateAvg(priceA, priceB) 이렇게 매개 변수로 넘기는 것
각각 priceA, priceB 에 있던 데이터가 매개변수들 priceA, priceB 에 할당됨
이들을 더한 합 sum 을 구하게 되고 평균 avg 까지 구해서 결과를 리턴하는 것
(priceA, priceB 에 할당되어있는 1000, 2000이라는 데이터가 실제로 함수 안에서는
price1, price2라는 변수에 다시 할당되는 것 //코드의 흐름이 함수 안으로 들어옴
함수가 리턴한 값이 avg1이라는 변수에 할당되는 것)
1-14. 함수(2)
내가 푼 Quiz
function calcAvg(price1, price2, price3){
const sum = price1 + price2 + price3
const avg = sum /3
return avg
}
const priceA = 1000
const priceB = 2000
const priceC = 3000
const avg1 = calcAvg(priceA, priceB, priceC)
console.log(`평균은 ${avg1}입니다.`)
굳이 sum 정의할 필요 없이 바로 avg 변수로 할당하기
const avg = (price1 + price2 + price3) /3
1-15. 클래스와 객체(1)
ㅇ 객체(Object) 타입
객체란 물리적으로 존재하거나 추상적으로 생각할 수 있는 것중에서 자신의 속성을 갖고 있고 다른 것과 식별 가능한 것
ㅇ 클래스(Class) 선언
클래스란 객체를 만들때 마치 설계도처럼 사용하는 것
(그래서 흔히들 클래스는 템플릿이고 객체는 이를 구체화한 것이라고도 함)
class Notebook {
constructor(name, price, company) {
this.name = name
this.price = price
this.company = company
}
}
- 생성자 (constructor)
: 나중에 객체가 '생성'이 될 때 자바스크립트 내부에서 호출이 되는 함수
- this와 속성(property)
: this는 클래스를 사용해 만들어질 객체 자기 자신을 의미하고 this 뒤에 붙는 name, price, company는 객체의 속성
ㅇ 객체 만들기
const 변수명 = new 클래스명(생성자에서 정의한 매개변수들...)
const notebook1 = new Notebook('MacBook', 2000000, 'Apple')
클래스를 활용해 객체를 만들 때는 new 라는 키워드를 먼저 써주고
클래스명을 마치 함수처럼 호출하면서 매개변수을 전달해주면 됩니다.
그러면 해당 클래스의 생성자가 호출되면서 객체가 생성되고 객체의 속성들에 매개변수값들이 할당됩니다.
만들어진 객체는 변수에 할당해줍니다.
기본 타입의 데이터들을 변수에 할당하면 변수를 사용해 해당 데이터에 접근할 수 있었습니다. 객체도 마찬가지입니다.
객체도 변수에 할당하고 나면 해당 변수를 활용해 객체에 접근할 수 있습니다.
객체의 속성 하나하나에 접근해 데이터를 갖고와야 할 때도 있겠죠?
이 때는 this.속성명 을 사용합니다.
console.log(notebook) // Notebook { name: 'Macbook', price: 2000000, company: 'Apple' }
console.log(notebook.name) // MacBook
consoel.log(notebook.price) // 2000000
console.log(notebokk.company) // Apple
※ 전체 코드
class Notebook{
constructor(name, price, company){
this.name = name
this.price = price
this.company = company
}
}
const notebook1 = new Notebook('Mac', 2000000, 'Apple')
console.log(notebook1)
console.log(notebook1.name)
console.log(notebook1.price)
console.log(notebook1.company)
//Notebook 이라는 객체 클래스를 선언했고,
//이를 활용해서 만든 객체가 notebook1 에 할당되어 있음
1-16. 클래스와 객체(2)
ㅇ 메소드 (method)
클래스에는 데이터(값)를 나타내는 속성 뿐만 아니라 함수와 같이 특정 코드를 실행할 수 있는 메소드도 정의
할 수 있습니다. 객체를 생성한 후, 만들어진 객체의 메소드를 호출하면 됩니다.
// 클래스 Product 선언
class Product {
constructor(name, price) {
this.name = name
this.price = price
}
// constructor 을 정의하고 클래스의 선언을 끝내는 것이 아니라
//어떤 함수와 비슷한 형태의 무언가를 또다시 정의하고 있음.
//이가 바로 메소드임
printInfo() {
console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
}
}
//메소드 명( ){해당 메소드를 나중에 호출했을 때 실행할 코드 적기}
// 객체 생성 및 메소드 호출
const notebook = new Product('Apple Macbook', 2000000)
notebook.printInfo() // 상품명: Apple Macbook, 가격: 2000000원
//객체 속성에 접근하는 것처럼 메소드도 호출함
//객체가 할당된 변수명.메소드명() 이렇게 호출
ㅇ 객체 리터럴(Object Literal)
자바스크립트에서는 객체 리터럴을 활용해서 바로 객체를 만들 수도 있습니다.
객체 리터럴은 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법
const 변수명 = {
속성명: 데이터,
메소드명: function () { 메소드 호출시 실행할 코드들 }
}
Q: 왜 굳이 클래스를 정의할까?
A: 재사용성.
한 번 클래스를 만들어두면 같은 속성과 메소드를 갖고 있는 객체들을
new라는 키워드와 함께 보다 빠르게 객체를 만들 수 있음
(훨씬 더 간결한 코드로 만들 수 있기 때문)
1-17. 배열(1)
ㅇ 배열(Array)
같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 위해 사용하는 데이터 타입
(같은 형식의 데이터를 순서대로 저장하는 것)
ㅇ 배열 안의 데이터
배열에 있는 데이터 각각을 우리는 요소 (element) 라고 부릅니다.
이 요소들에 쉽게 접근해서 바로 쓸 수 있게 하는 것? 인덱스(index) like 객체의 속성명
- 인덱스(index)는 배열 안의 데이터들이 자리잡은 순서(0부터 시작함)
ㅇ 배열의 길이
length
배열 안의 요소들 개수(길이)를 샐 때 사용하는 속성
console.log(rainbowColors[rainbowColors.length - 1])
// length 를 응용하여 배열의 마지막 요소도 쉽게 찾아서 출력 가능!
1-18. 배열(2)
ㅇ 요소 추가와 삭제
배열을 선언하고 난 이후 새로운 요소 더할 때는 push(), 뺄 때는 pop() 이라는 메소드를 사용함
ㅇ 배열과 반복문
반복문 활용
const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
for (let i = 0; i < rainbowColors.length; i++) {
console.log(rainbowColors[i])
}
i 라는 숫자 데이터를 인덱스로 활용해서 해당 데이터들에 순차적으로 접근함
★ 간단한 형식의 for 문
const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
for (const color of rainbowColors) {
console.log(color)
}
for (const B of A){}
배열에서 요소들을 차례대로 하나씩 찾아 color라는 변수에 할당합니다. (자동으로 배열의 끝까지 반복문이 실
행됨)
▶ Quiz
const price = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000]
let sum = 0
for(const each of price){
sum += each
}
let avg = sum / price.length
console.log(sum, avg)
//대입연산- sum이라는 변수에 sum과 price 더해서 다시 할당
//sum = 0, 100, 300, 600 ~ 누적됨