node.js
= 자바스크립트 문법에 맞게 코딩을 했을때 이것을 해석하는 컴퓨터 전용 번역기
vs Code에서 js파일 만들고 터미널 - new 터미널 생성
> 터미널
node hello.js
이라고 치면, hello world 가 출력된다.
node.js는 자바스크립트 파일을 실행할 수 있는 일종의 전용 번역기
> 변수
값을 저장해놓은 데이터 또는 값을 가리키는 일종의 이름표
변수를 사용하면 데이터가 의미하는 바르 정확히 나타낼 수 있고, 나중에 데이터를 사용하기 쉽다.
> let 키워드 사용
let 변수이름 = 값
변수(=variable)
const는 let과 달리 다시 변수에 값을 재할당할 수 없다.(=상수)
*var는 더이상 사용하지 않음
let과 const만 기억하기
<데이터타입>
- 기본 타입
- number, string, boolean, null, undefined
- 객체 타입
console.log(10);
// 숫자는 따옴표로 감싸줄 필요 없다.
let age = 37 ;
console.log(age);
—--
let isMan = true
let isWoman = false
// 불린데이터
console.log(isMan)
console.log(isWoman)
—----
let name = null ;
// null : 텅텅 비어있는 값
let age
// 어떤 값도 할당하지 않음 --> undefined
console.log(name)
console.log(age)
결과값 : 순서대로 null , undefiend 라고 뜬다.
—---------
<연산>
console.log(‘my’ + ‘car’)
=> my car
console.log(1 + ‘2’)
=> 12
( *문자열과 숫자를 연결하면, 문자로 출력된다. )
let shoesPrice = 200000
console.log(‘이 신발가격은’ + shoesPrice + ‘원 입니다’) 라고 문자열 붙이기를 하지 않고,
백틱( ` ` )으로 감싼 아래와 같은 문장으로 표현하면 더 쉽다.
console.log(`이 신발가격은 ${shoesPrice}원 입니다.`)
console.log(10%3) : %는 나머지 연산자 (결과값 : 1 출력된다)
console.log(10**2) : 10의 2승을 의미
> 증감연산자 (자기자신을 증가/감소시키는 연산자)
let count = 1
const preIncrement = ++count;
//count에는 +1이 더해지고, 그 count가 preIncrement에 들어간 것
// 즉 , 콘솔창에 찍힐때 count는 이미 2가 되어있음
// count = count + 1
// const preIncrement = count 이런 순으로 적용이 된것
console.log(`count : ${count} , preIncrement : ${preIncrement} 입니다`)
//결과값 : count : 2 , preIncrement : 2 입니다 라고 찍힘
—-----------
let count1 = 1
const postIncrement = count1++;
console.log(`count : ${count1} , postIncrement1 : ${postIncrement} 입니다`)
// preIncrement = count
// count = count + 1
// 결과값은 2, 1 로 나옴 ( 먼저 count 값을 넣어주고, 추후 count1의 값을 1 증가시키는거)
—------------------
let a = true
let b = true
// && and
console.log(a&&b)
// || or
console.log(a||b)
a= false
console.log(a&&b)
// || or
console.log(a||b)
—--------
console.log('apple'==='apple')
>결과값 True
console.log('apple'=== 'Apple')
> 결과값 : false
—---------
조건문
조건의 결과값이 바로 앞에 우리가 배운 불린임
- if
- else, else if
if ( ) { } else { }
if문의 조건을 만족하지 못하면 -> else
else if 는 조건절이 반드시 붙어야 한다.
const shoes = 250000
if (shoes <40000){
console.log('이 신발을 살게용')
}
else if(shoes <= 50000){
console.log('고민해보겠습니다')
}
else{
console.log('타이꾸일러!!!')
}
—-----------
let distance = 100
if(distance <2){
console.log('걸어가장')
}
else if(distance <=2 && distance<5){
console.log('택시타장')
}
// distance <=2 이 조건이 true 인지 확인
// distance <5 이 조건이 true 인지 확인
// 2개 조건이 모두 true여야 else if 문이 실행되는 것
else {
console.log('기차타장')
}
—----------------
반복문
: 조건을 설정해서 우리가 원하는만큼만 반복
while ( 조건절 ) {
조건을 만족시 실행할 코드
}
> 언젠간 반드시 반복문값이 false가 되어 반복문이 종료가 되어야한다는 점 잊지 말기
let temp = 20
while (temp < 25){
console.log(`${temp}도는 적당합니다`)
temp++
}
console.log(temp)
—------------
for문
: while과 같은 반복문, 좀 더 명시적으로 반복문을 표현할 수 있음
for ( begin ; condition ; step )
begin : 변수 선언, 값 할당
condition : 조건을 만족하는지 체크(해당 조건이 만족하면 body 실행)
step : 앞서 선언했던 변수에 증감연산자 등을 활용해서 값을 변화시키게 됌(나중에 반복문이 끝날 수 있도록 해주는 역할)
for (let temp = 20 ; temp < 25 ; temp++){
console.log(`${temp}는 적당합니다`)
}
—----------
Q. 1~10까지의 숫자중 3으로 나누었을때 나머지가 0인 숫자 출력하기
for ( let num = 1 ; num <= 10 ; num ++ ) {
if ( num % 3 === 0 ) {
console.log( `${num}은 3으로 나누었을 때 딱 떨어지는 숫자입니다. ` )
}
}
// 1부터 20까지 숫자중 홀수인 경우 숫자 ~은 홀수입니다, 짝수인경우 숫자 ~는 짝수입니다 출력
for ( let num = 1 ; num <= 20 ; num ++ ){
if(num % 2 === 0 ) {
console.log(`${num}은 짝수입니다.`)
}
else{
console.log(`${num}은 홀수입니다`)
}
}
—---------------
함수
function 함수명 ( 매개변수(=파라메터) ) {
}
> 파라메터 : 해당 function 바디 내에서 사용할 일종의 변수라고 생각 , 인풋을 매개변수라고 생각
function calculateAvg( price , price2 ) {
const sum = price + price2
console.log(`두 상품의 총합은 ${sum}원 입니다.`)
const avg = sum / 2
return avg
}
// 이 리턴한 값이 아래에서 들어가게 되는 것
const priceA=1000
const priceB=2000
const avg1 = calculateAvg(priceA,priceB)
// priceA와 priceB의 값을 calculateAvg 함수에 전달한다.
// calculateAvg 에서 계산되어 return해준 avg 값 이 avg1에 들어가게 되는 것
console.log(`A와 B의 평균은 ${avg1}원 입니다.`)
const priceC=4000
const priceD=5000
const avg2 = calculateAvg(priceC,priceD)
console.log(`C와 D의 평균은 ${avg2}원 입니다.`)
—-----------------------
1-14 퀴즈 푼것
function avgFunct(prd1, prd2, prd3){
const allprd = prd1 + prd2 + prd3
console.log(`allprd는 ${allprd} 입니다.`)
const avg = allprd / 3
console.log(`avg는 ${avg}입니다.`)
return avg
}
let product1 = 10000
let product2 = 20000
let product3 = 30000
let avg1 =avgFunct(product1,product2,product3)
console.log('av1의 값은'+avg1+'입니다')
//60000이니까 3만원 나와야됌 결과값은
—-----------
클래스와 객체
클래스 : 객체를 만들때 마치 설계도처럼 활용하는 녀석
흔히들 탬플릿이라고 하고 객체는 이를 구체화한것이라고 한다.
생성자 : 생성자는 함수와 많이 비슷하다.
이 생성자는 말그대로 나중에 객체가 ‘생성'될때 자바스크립트 내부에서 호출이 되는 함수라고 생각하면 된다.
class notebook {
constructor(name,price,company) {
this.name=name
this.price=price
this.company=company
}
}
> this : 클래스를 사용해서 객체를 만들때, 바로 객체 자신을 가리키는 키워드
> this.name : 이 this.뒤에 붙는 name,price,company는 이 객체의 속성을 의미한다.
const notebook1 = new notebook(‘mac’,2000000, ‘apple’)
> const notebook1이라고 변수를 선언했다.
> 이 Notebook1에 notebook이라고 하는 ‘객체'를 만들어서, 할당을 할거다
> new 라고 써주고, 뒤에 클래스명을 마치 함수처럼 호출하면서 매개변숫값을 전달해주면 된다.
> 이럼 해당 클래스(notebook)의 생성자가(constructor) 자동으로 호출이 되고, ‘객체’ 가 생성되면서 갹체의 속성들에 매개변숫값들이 전달된다.
class Notebook{
// constructor : 말그대로 객체가 생성될 떄 호출되는 함수
constructor(name,price,company){
this.name = name
this.price = price
this.company = company
// this.속성 : 각각의 this.뒤의 속성에 매개변수를 할당할 것
}
}
const notebook1 = new Notebook('mac',20000000,'apple')
// 이 3개의 데이터가 객체의 속성으로 할당되겠지
//notebook1은 Notebook이라는 '객체'가 할당된 '변수'이다.
// 이 notebook1을 통해서 이 notebook '객체'자체에 접근할 수 있는 것
console.log(notebook1)
console.log(notebook1.name)
console.log(notebook1.price)
console.log(notebook1.company)
—------------
클래스와 객체 (이어서)
클래스에는 데이터를 나타내는 속성뿐만 아니라 함수와 같이 특정 코드를 실행할수잇는 메소드도 실행할 수 있다.
class Product {
constructor ( name, price ) {
this.name = name
this.price = price
}
printInfo() {
console.log(`상품명 : ${this.name}, 가격 : ${this.price}원`
// 객체의 속성에 접근할 땐 this.속성명 으로 접근한다!!
}
}
const notebook1 = new Product (‘mac’,20000000)
notebook1.printInfo()
// 위에서 변수를 통해 객체의 속성에 접근했던 것처럼
// 변수를 통해 메소드를 호출한 것
—-----------------
<객체 리터럴>
: 자바스크립트에서는 객체 리터럴을 활용해서, 바로 객체를 만들 수 있다.
객체리터럴은 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법이다.
2개 이상의 속성과 메소드가 있을 때는 쉼표로 구별해주고 가독성을 위해 줄바꿈도 해주는 게좋다.
const 변수명 = {
속성명 : 데이터,
메소드명 : function (){}
}
const computer1 = {
name : ‘mac’,
price : 20000,
printInfo: function () {
console.log( `상품명: ${this.name}, 가격 : ${price}`)
}
}
—-> 이렇게 객체 리터럴으로 빠르게 만들 수 있는데, 이렇게 사용하지 않는 이유?
바로 재사용성 때문이다.
1-16 퀴즈 _ 넘무재미쪙 >_<
class clothes {
constructor(color,size,price){
this.color = color,
this.size=size,
this.price = price
}
printInfo(){
console.log (`해당 옷의 Price는 ${this.color} , size는 ${this.size} , price는 ${this.price}입니다.`)
}
}
const cloth1= new clothes(‘red’,’xs’,20000)
cloth1.printInfo()
const cloth2= new clothes(‘blue’,’large’,40000)
cloth2.printInfo()
const cloth3= new clothes(‘green’,’medium’,30000)
cloth3.printInfo()
—------------------------
배열
const arr1 = new Array { 1,2,3,4,5}
// 우리가 Array라는 클래스를 선언한 적은 없지만, 자바스크립트 내부적으로 이미 갖고 있는 것
const arr2 = [1,2,3,4,5]
// 이 두번째 방법을 주로 활용한다.
배열에 있는 데이터 각각을 우리는 요소(엘리먼트)라고 부른다.
배열에서는 ‘인덱스'가 객체의 속성명과 같은 역할을 해준다.
‘인덱스'는 배열 안의 데이터들이 자리잡은 순서라고 생각하면 된다.
> index는 0부터 시작한다는 사실!
const arr =[1,2,3,4,5]
console.log(arr)
const alphabet = ['a','b','c','d','e']
console.log(alphabet[0])
console.log(alphabet[1])
console.log(alphabet[2])
console.log(alphabet[3])
console.log(alphabet[4])
// 배열이 엄청 숫자가 많다면 일일히 셀 수가 없음,
// 따라서 배열의길이(개수)를 바로 알 수 있는 방법이 필요
// --> length 사용
console.log(alphabet.length)
// 따라서, 인덱스는 length -1 을 해주어야겠지(인덱스가 0부터 시작하니께)
const indexnum = alphabet.length - 1
console.log('마지막 인덱스 번호는' + indexnum + '입니다.' )
—------------
> 배열에 요소를 추가하거나 빼는 방법 : push , pop
alphabet.push(‘f’)
console.log(alphabet)
alphabet.pop()
// 배열의 마지막 요소 ‘f’ 제거
> 반복문을 사용하여 배열 한개한개 출력하기
// 배열과 반복문
for (let i = 0 ; i <alphabet.length ; i++ ){
console.log(alphabet[i])
}
// 위처럼 배열 길이, i 시작 , i 증가 식을 쓰지 않고
// 변수 선언 of 배열이름 하면, for문이 알아서 돌면서 위에 세웟던 식과 같은 기능을 해준다.
for (const alph of alphabet){
console.log(alph)
}
> 1-18 퀴즈 - 나 못풀었었음!!!
let prices = [10000,20000,30000,40000,50000,60000,70000,80000,90000,100000]
// 가격들을 합친 것
let sum = 0
for ( price of prices ){
sum += price
}
// 가격 평균
const avg = sum / prices.length
console.log(`합계는 ${sum}이고, 평균은 ${avg}이다.`)
🥸 기억하자!!!
포인트1. sum과 avg를 for문 밖으로 빼주어야 한다는 것
포인트2. sum +=price
포인트3. const avg = sum / prices.length
'📙 자바스크립트 공부' 카테고리의 다른 글
| [js] 객체 공부 (0) | 2022.12.04 |
|---|---|
| [js] 파이어베이스 연결하는데 계속 보이는 addEventListener ? 넌 구체적으로 뭐하는 친구니? (생활코딩) (0) | 2022.11.19 |
| 11/17 자바스크립트 공부 (0) | 2022.11.17 |
| 11/16 자바스크립트 공부 (1) | 2022.11.17 |
| [js] 변수와 상수 (0) | 2022.11.04 |
댓글