1주차 프로그래밍 시작하기 in JavaScript [코드잇 부스트 백엔드 스터디]

 

<프로그래밍 시작하기 in JavaScript>

 

1. 자바스크립트 첫 걸음

 

01. 자바스크립트 소개

 

• 자바스크립트란 웹사이트를 만들고 싶다면 반드시 배워야 하는 프로그래밍 언어

• 처음 등장 했을 당시엔 인기가 없었으나 2015년 이후 큰 발전을 함

• 웹 개발 뿐만 아니라 모바일 앱이나 블록체인 등 다양한 범위에서 범용적으로 사용됨

 

언어를 학습할 때 하는 실수 → 단순히 문법만을 공부하는 것

 

💡프로그래밍의 원리에 초점을 두는 것이 좋다

☑️프로그래밍의 기본 개념을 먼저 이해하고 이것을 바탕으로 언어의 문법들을 활용하는 학습을 할 것

 

02. 첫 번째 자바스크립트 코드

 

console.log()

• 괄호안의 메시지를 콘솔창에 출력하는 명령어다.

• 가장 대표적인 디버깅 방법으로 쉽게 말해, 자바스크립트가 출력을 하도록 도와주는 기능이다.

 

 

2. 프로그래밍 기본 개념

 

세미콜론

 

프로그래밍 언어에서 마침표 → ; (세미콜론)

javascript는 자동으로 세미콜론을 붙여주는 기능이 있음

하지만 여러 문장을 한줄에 입력할 때는 세미콜론이 필요함

 

코멘트

 

// 슬래시 두 개는 한 줄 코멘트 방식이기 때문에 도중에 줄 바꿈을 하면 코멘트가 풀림 → 그럴 땐 /* */ 사이에 넣는다

• 어떤 의도로 코드가 작성 되었는 지 설명할 때

• 구현한 코드가 어떤 동작을 하는지 기록할 때

 

자료형 개요

 

☑️자료형

• 숫자(Number)→ 정수 , 소수

• 문자열(String) → 양쪽 따옴표 통일 필수, 더하기 기호로 문장 연결 가능

• 불린(Boolean)→true & false

 

추상화 개요

 

💡추상화

• 구체적인 정보는 숨기고 꼭 필요한 핵심만 뽑아내서 표현하는 방식

• 간결하게 표현하면서도 핵심 만큼은 명확하게 드러내는 것이기 때문에 표현을 하는 입장에서도 도움이 된다

 

변수

 

반복 입력하는 구체적인 숫자는 오타를 만들어낸다

숫자는 의미 전달이 어렵다

 

→💡변수를 활용한다

자바스크립트에서의 변수 선언

let 변수이름

 

 

함수

 

• 함수는 다양한 명령들을 저장하는 것

• 복잡한 내용은 함수에 숨기고 핵심은 함수 이름에 드러내는 방식으로 추상화

 

function 함수이름() {
명령; 
명령;
};

 

파라미터 

 

함수이름(파라미터)

• 함수를 호출할 때 괄호에 넣는 값을 파라미터, 매개변수라고 말한다

파라미터 →함수에서 선언할때 매개변수로

인자→사용을 할때 , 호출을 할때 넣는 것 (매개변수에 들어가는곳)

 

 

여러 개의 파라미터

function 함수이름(a,b) { //파라미터를 콤마로 구분한다 };

 

 

return 문

 

javascript에서 함수의 output은 return이다

function getTwo(number){
	return number*2;
}

 

 

 

실습 정리

 

1. 칼로리 계산기 

// 코드를 작성해 주세요.
let espresso = 10;
let milk = 170;
let chocolateSyrup = 50;
let whippedCream = 60;

// 메뉴별 칼로리
console.log(espresso); // 에스프레소 칼로리
console.log(espresso + milk); // 라떼 칼로리
console.log(espresso + chocolateSyrup + milk); // 모카 칼로리
console.log(espresso + chocolateSyrup + milk + whippedCream); // 모카 (휘핑 추가) 칼로리

 

 

2. 자랑스러운 애국가

/ 여기에 코드를 작성하세요
function printChorus(){
    console.log('무궁화 삼천리 화려 강산');
    console.log('대한 사람 대한으로 길이 보전하세');
}


// 애국가 가사
console.log('1절');
console.log('동해 물과 백두산이 마르고 닳도록');
console.log('하느님이 보우하사 우리나라 만세');
printChorus();

console.log('2절');
console.log('남산 위에 저 소나무 철갑을 두른 듯');
console.log('바람서리 불변함은 우리 기상일세');
printChorus();

console.log('3절');
console.log('가을 하늘 공활한데 높고 구름 없이');
console.log('밝은 달은 우리 가슴 일편단심일세');
printChorus();

console.log('4절');
console.log('이 기상과 이 맘으로 충성을 다하여');
console.log('괴로우나 즐거우나 나라 사랑하세');
printChorus();

 

3. 내 노트북 용량은?

 

function teraToGiga(a){
  console.log(a + 'TB는');
  console.log(1024*a+'GB 입니다.');
};
function teraToMega(b){
  console.log(b + 'TB는');
  console.log(1024*1024*b+'MB 입니다.');
};
// TB -> GB 테스트
teraToGiga(2);
// TB -> MB 테스트
teraToMega(2);

 

 

4. 나의 체질량지수는?

function bmiCalculator(name, weight, height){
 let res;
 res = weight / (height*height/10000);
  console.log(name+'님의 체질량지수는 '+ res+ '입니다.');
};

// 테스트 코드
bmiCalculator('홀쭉이', 43.52, 160);
bmiCalculator('코린이', 61.25, 175);
bmiCalculator('통통이', 77.76, 180);

 

 

5. 1년 뒤엔 얼마를 받을까?

function interestCalculator(myMoney, saveTerm, interestRate) {
  let res;
  res = myMoney * saveTerm *interestRate/100
  return res; 
};

// 조건 입력 테스트
let myMoney = 3650000; // 맡긴 금액 (원)
let saveTerm = 1; // 맡기는 기간 (년)
let interestRate = 4; // 이자율 (%)

// 수령액 계산 테스트
let myInterest = interestCalculator(myMoney, saveTerm, interestRate);
let totalMoney = myMoney + myInterest;

// 출력 테스트
console.log('맡긴 금액은 ' + myMoney + '원 입니다.');
console.log('이자는 ' + myInterest + '원 입니다.');
console.log('최종 받을 금액은 ' + totalMoney + '원 입니다.');

 

 

퀴즈 오답정리 

 

let x = 10;
let y = 20;

function myFunction(a, b) {
  return a + b;
}

let myAnswer = myFunction('x', 'y');

console.log(myAnswer);

myFunction

• a,b 라는 파라미터를 입력 받아서 두 값을 더하기로 연산하고, 그 결과를 리턴값으로 돌려주는 함수

함수에 문자열 x 와 문자열 y 를 파라미터로 전달한 결과를 변수에 저장한다.

 

💡여기서 파라미터로 전달한 문자열 x,y는 변수가 아니다. 문자열의 덧셈이 수행된다.

따라서 결과적으로 문자열 xy가 myAnswer 의 값으로 저장된다.