스파르타코딩클럽 내일배움캠프 TIL6

한재창·2022년 11월 7일
0

JavaScript

  • 프로그래밍 : 마우스 클릭 or 키보드 타이핑을 하는 것은 입력
    데이터의 정보를 저장한 뒤 처리, 화면에 나타내는 출력
    데이터의 입력 ⇒ 처리 ⇒ 출력이 바로 프로그램이 하는 일이고, 이렇게 프로그램이 정해진 방식에 따라 일할 수 있도록 작성해 놓는 것이 프로그래밍
  • 자바스크립트 : 대중적인 프로그래밍 언어
  • Node.js : 자바스크립트 언어의 문법에 맞게 코딩을 했을 때 컴퓨터가 이를 해석해서 처리할 수 있도록 해주는 일종의 전용번역기

변수

  • 데이터를 저장해놓고 사용하기 위해 쓰임
let name = 'JaeChang Han' // name이라는 변수에 JaeChang Han 이라는 값을 할당
console.log(name) // 변수 name이 가리키고 있는 값 JaeChang Han 을 출력

name = 'JaeChang' // 위에서 선언했던 name이라는 변수에 "JaeChang"이라는 값을 재할당
console.log(name) // 변수 name이 가리키고 있는 값 "JaeChang"을 출력

const name = "JaeChang Han" // const는 새로운 값을 주면 에러가 뜸
console.log(name)
name = "JaeChang" // 위에서 선언했던 name이라는 변수에 "JaeChang"이라는 값을 다시 재할당하려는 것이지만 실패. 에러 발생!

연산자

  • 템플릿 리터럴 (Template literals) : 백틱(``) 을 사용하여 문자열 데이터를 표현
const shoesPrice = 200000
console.log(`이 신발의 가격은 ${shoesPrice}원입니다`) 
// console.log('이 신발의 가격은 ' + shoesPrice + '원입니다') 와 동일
// + 를 활용한 문자열 붙이기보다 간결하게 표현할 수 있다는 게 보이시나요?
  • 증감연산자 : 자기 자신의 값을 증가시키거나 감소시키는 연산자(++, —),
    이 증감연산자를 변수앞에 놓는냐, 변수뒤에 놓느냐에 따라 차이가 있다.
let count = 1
const preIncrement = ++count
// 먼저 자기 자신에게 1을 더해서 재할당 한 후, 이를 preIncrement 에 할당
// count = count + 1
// const preIncrement = count
console.log(`count: ${count}, preIncrement: ${preIncrement}`) // count: 2, preIncrement: 2

let count = 1
const postIncrement = count++
// postIncrement에 자기 자신의 값을 먼저 할당하고, 이후에 1을 더해서 재할당
// const postIncrement = count
// count = count + 1
console.log(`count: ${count}, postIncrement: ${postIncrement}`) // count: 2, postIncrement: 1 
  • 대입연산자 : 어떤 값을 어떤 변수에 할당한다는 표현을 많이 했는데, 그게 바로 대입연산자를 사용한다는 의미
    = 뿐만 아니라 +=, -= 같은 것들을 통해서 연산과 대입을 한번에 할 수 있음
const shirtsPrice = 100000
const pantsPrice = 80000
let totalPrice = 0

totalPrice += shirtsPrice // totalPrice = totalPrice + shirtsPrice 와 동일
console.log(totalPrice) // 100000
totalPrice += pantsPrice // totalPrice = totalPrice + pantsPrice 와 동일 
console.log(totalPrice) // 180000

totalPrice -= shirtsPrice // totalPrice = totalPrice - shirtsPrice 와 동일
console.log(totalPrice) // 80000

반복문

  • while : while (조건) { 조건을 만족할 때 실행할 코드 }
let i = 20
while (i < 25) {
	console.log(`${i}도 정도면 적당한 온도입니다.`)
	i++ // 증감연산자를 활용해서 온도를 변화시킵니다.
}
  • for : for (begin; condition; step) { 조건을 만족할 때 실행할 코드 }

! 순서
1. i 변수를 선언하고 값을 할당합니다. (begin)
2. i 25보다 작은지 연산합니다. 결과값이 true라면 계속 실행. false라면 for 문 종료 (condition)
3. 중괄호 안의 코드가 실행됩니다.
4. i 1을 더해서 재할당하고 2번 과정부터 다시 반복합니다. (step)

for (let i = 20; i < 25; i++) {
	console.log(`${i}도 정도면 적당한 온도입니다.`)
}
  • 반복문과 조건문의 활용 : 짝수, 홀수 나타내기
for (let i = 1; i <= 20; i++) {
	if (i % 2 === 0) {
		console.log(`숫자 ${i}는 짝수입니다.`)
	} else {
		console.log(`숫자 ${i}는 홀수입니다.`)
	}
}

함수

  • 함수 : 반복되는 특정 작업을 수행해야 할 때 코드를 재사용하기 위해 함수를 사용한다.

  • 함수를 활용한 평균값 구하기

function item(a, b, c) {
  const sum = a + b + c;
  console.log(`총 합계는 ${sum}입니다.`);
  const avg = sum / 3;
  return avg;
}

const A = 1000;
const B = 10000;
const C = 100000;
const ITEM = item(A, B, C);
console.log(`평균값은 ${ITEM}입니다.`);

Class

  • class : 클래스를 미리 정의해놓으면 필요할 때마다 그 클래스를 사용해서 동일한 모양을 가진 객체를 만들 수 있다.
  • 생성자 : 나중에 객체가 '생성'이 될 때 자바스크립트 내부에서 호출이 되는 함수
  • this : this는 클래스를 사용해 만들어질 객체 자기 자신을 의미하고 this 뒤에 붙는 name, price, company는 객체의 속성
  • 객체 만들기 : const 변수명 = new 클래스명(생성자에서 정의한 매개변수들...)
const notebook1 = new Notebook('MacBook', 2000000, 'Apple')
  • 메소드 : 클래스에는 데이터(값)를 나타내는 속성 뿐만 아니라 함수와 같이 특정 코드를 실행할 수 있는 메소드도 정의할 수 있다. 객체를 생성한 후, 만들어진 객체의 메소드를 호출하면 된다.
class item {
  constructor(color, size, price) {
    this.color = color;
    this.size = size;
    this.price = price;
  }

  printInfo() {
    console.log(`color : ${this.color}, size :  ${this.size}, price : ${this.price}`);
  }
}

const shop = new item("red", "xl", 50000);
shop.printInfo();
// {color : red, size : xl, price : 50000

배열

  • 배열 : 같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 위해 사용하는 데이터 타입

  • 배열과 반복문을 활용한 예

const items = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000];
let sum = 0; // 합계를 구해 재할당하기 위해 변수 생성

// console.log 안에서 찍어주는 거랑 밖에서 찍어주는 거랑 다름
for (const item of items) {
  sum += item;
  console.log(sum);
}

const avg = sum / items.length;
console.log(sum, avg); // 5500, 550
profile
취준 개발자

0개의 댓글

관련 채용 정보