[ codeit ] 프로그래밍 기초 in JS - 프로그래밍 시작하기 in JS

 자바스크립트 첫 걸음 

1강. 자바스크립트 프로그래밍?

웹사이트를 만들고싶다면 반드시 배워야하는 프로그래밍 언어, web을 넘어 다양한 분야에 활용

1989년 웹의 첫 등장, 90년대 보편화

JS의 다양한 활용

언어의 문법 x 프로그래밍의 원리 o 

 

2강. 준비하기

VSCode 

 

3강. Hello Codeit!

Ctrl S  저장하기

Ctrl O 불러오기

 

4강. 프로그래밍 첫걸음 떼기

console.log(15)

 

 프로그래밍 맛보기 

1강. 세미콜론

문장이 끝났다는 의미, 예상치못한 오류방지

 

2강. 코멘트

// 주석 comment

/* 여러줄 주석입니다. */

어떤 의도로 코드가 작성되었는지 설명할 때, 구현한 코드가 어떤 동작을 하는지 기록할 때

 

3강. 자료형 개요

프로그래밍이란? 컴퓨터로 복잡한 계산을 하는 것

자료형(Data type)

숫자(number) : 정수(integer) , 소수(floating point) : 사칙연산 가능

                     -6, -1, 0, 2 ..      3.14, -1.1 ..

문자열(string) : "" 또는 ' '로 감싼 코드

불린(boolean) : true, false : 어떤 조건에 의한 결과값으로 사용

 

4강. 추상화 개요

( 추상 : 여러가지 사물이나 개념에서 공통되는 특성이나 속성따위를 추출하여 파악하는 작용 )

추상화(Abstraction) : 꼭 필요한 핵심만 나타내는 것, 복잡한 것들을 목적에 맞게 단순화하는 것,

                           불필요한것들을 숨기고 목적을 명확히하여 핵심만 드러내기!

 

5강. 변수

console.log(3000 *2);
console.log(4200 *2);
console.log(4800 *2);
console.log(3000 *2 + 4200 *2);

단점: 반복 입력하는 구체적인 숫자는 오타를 만들어낸다, 숫자에 대한 의미전달이 어렵다

 

변수(variable) : 값을 담기위한 상자

//변수 선언
//let espressoPrice;
//espressoPrice = 3000; // = 값을 할당하는 의미

let espressPrice = 3000;
let lattePrice = 4300;
let mochaPrice = 4800;

console.log(espressPrice *2);
console.log(lattePrice *2);
console.log(mochaPrice *2);
console.log(espressPrice *2 + lattePrice *2);

장점: 반복값 적용 용이, 값이 변경되었을 때 쉽게 수정 가능, 오류가 난 곳을 쉽게 찾을 수 있음, 이해가 쉬워짐

+ var 과 let의 차이

scope는 해당 코드가 사용될수 있는 범위로 var는 함수 레벨 스코프이고 let, const는 블럭 레벨 스코프

var의 경우 호이스팅되면서 초기 값이 없으면 자동으로 undefined를 초기값으로 하여 메모리를 할당해서 var의 경우 선언 전에 해당 변수를 사용하려고 해도 메모리에 해당 변수가 존재하기 때문에 에러가 발생하지 않음

let, const의 경우 호이스팅이 되면서 초기 값이 없다면 var처럼 자동으로 초기값을 할당하지 않음(const의 경우 선언시 초기값을 할당하지 않으면 문법 에러).

간단하게 정리하면, var의 경우 버그 발생과 메모리 누수의 위험 등이 있기 때문에 var말고 let, const를 사용하시는 것이 좋습니다.

babel : let으로 작성한 코드를 var로 하위버전 브라우저를 지원가능하도록 해주는 컴파일러

 

6강. 작명 가이드

변수만들 때 꼭 지켜야하는 룰

1) 변수는 숫자, 문자( a-z, A-Z ), 밑줄(_), 달러기호($)로, 첫글자는 숫자 불가

2) 대문자, 소문자 구별

3) 예약어 사용 불가 ex) if, for, let 등

 

지키면 좋은 룰

1) 의미있는 이름

2) 구체적인 이름

3) camel표기법

 

그 외 약속들 : 스타일가이드, 코딩 컨벤션

airbnb js 스타일 가이드 : github.com/ParkSB/javascript-style-guide

google js 스타일 가이드 : google.github.io/styleguide/jsguide.html

w3schools.com 스타일 가이드 : www.w3schools.com/js/js_conventions.asp

standard JS : standardjs.com/rules-kokr.html

idiomatic JS : github.com/rwaldron/idiomatic.js/tree/master/translations/ko_KR

 

참고) 들여쓰기 설정하기

vscode 설정창( ctrl + / cmd + ) - editor tab 검색 - detect indentation 설정 - tab size 변경, editor:insert space 체크

기존 코드 정렬(shift alt F / shift option F) : ctrl a (전체선택) - 마우스 우클릭 - fomat document 

 

7강. 칼로리계산기

let e = 10;
let m = 170;
let c = 50;
let w = 60;

 

8강. 함수

변수 = 값;

함수 = 명령들;

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

//함수 선언
function greetings(){
    console.log('Hi');
    console.log('안녕');
    console.log('Bonjour');
};

//함수 호출
greeting();

console.log(); 도 함수의 일종

"추상화"

 

9강. 자랑스러운 애국가

10강. 파라미터

parameter 매개변수 : 함수호출에서의 값이 파라미터로 전달되는 개념

//함수 선언
function 함수이름(파라미터){
    console.log(파라미터);
};

//함수 호출      ↗//값 ->파라미터에 전달
함수이름(값); →↗

function welcome(name){
    console.log('안녕하세요' + name + '님!');
};

welcome('코드잇'); //안녕하세요 코드잇님!
welcome('홍길동'); //안녕하세요 홍길동님!
welcome('김영희'); //안녕하세요 김영희님!

function printSquare(x){
    console.log(x*x);
}

printSquare(2); //4
printSquare(5); //25
printSquare(6); //36

 

11강. 내 노트북 용량은?

//1회차
function teraToGiga(data){
  console.log( data + 'TB는')
  console.log( data * 1024 + 'GB' + ' 입니다.');
}
function teraToMega(data){
  console.log( data + 'TB는')
  console.log( data * 1024 * 1024 + 'MB' + ' 입니다.');
}

// TB -> GB 테스트
teraToGiga(2);
// TB -> MB 테스트
teraToMega(2);


//결과
//2TB는
//2048GB 입니다.
//2TB는
//2097152MB 입니다.

//2회차 goodjob!
function teraToGiga(data){
    console.log(data + 'TB는');
    console.log(data * 1024 + 'GB 입니다.');
}

function teraToMega(data){
	console.log(data + 'TB는');
    console.log(data * 1024 * 1024 + 'GB 입니다.');
}

teraToGiga(2);
teraToMega(2);

 

12강. 여러개의 파라미터

function printSum(a, b){
    console.log(a + b);
}
printSum(10, 5);

function introduce(name, birth, nationality, job){
    console.log('안녕하세요! 반갑습니다.');
    console.log('제 이름은' + name + '입니다.');
    console.log('생년월일은' + birth + '이고,');
    console.log('국적은' + nationality + '입니다.');
    console.log('직업은' + job + '입니다.');
    console.log('잘 부탁드립니다!');
}
introduce('코드잇', '17.05.18','한국','개발자');

 

13강. 나의 체질량지수는?

// 여기에 코드를 입력해 주세요.
function bmiCalculator(name, weight, height){
  console.log( name + '님의 체질량지수는 ' + weight / (height *height / 10000) + '입니다.');
}

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

다른 답 _ 변수사용

// 여기에 코드를 입력해 주세요.
function bmiCalculator(name, weight, height){
  BMI = (weight / (height *height / 10000));
  console.log( name + '님의 체질량지수는 ' + BMI + '입니다.');
}

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

 

//2회차 goodjob!
function bmiCalculator(name, weight, tall){
	console.log(name + '님의 체질량지수는' + (weight/(tall*tall/1000)) + '입니다.'
}

//2회차 -2 verygood!!
function bmiCalculator(name, weight, tall){
	var bmi = weight/(tall*tall/1000);
	console.log(name + '님의 체질량지수는' + bmi + '입니다.'
}

 

14강. return문

INPUT(=파라미터) -> [ 함수 function ] -> OUTPUT(=return)

              

함수에서의 output

function getTwo(){
    return 2;
}
console.log(getTwo());
// =
console.log(2);

function getTwice(number){
    return number * 2;
}
console.log(getTwice(5));
// =
console.log(10);

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

let x = getTwice(5); //10
let y = getTwice(2); //4

console.log(x * y); //40

 

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

// 내 코드
function interestCalculator() {
  return amount * term * rate / 100;
}

// 조건 입력 테스트
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 + '원 입니다.');

// 해답코드
function interestCalculator(amount, term, rate) {
  return amount * term * rate / 100;
}

// 조건 입력 테스트
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 + '원 입니다.');

다른 프로그래밍 언어의 경우, 매개변수가 없는 함수에 인자를 넣어 호출하거나, 매개변수가 있는데 인자를 넣지 않고 호출하는 경우 에러가 발생하곤 합니다. 하지만 자바스크립트에서는 매개변수의 총 개수보다 인자의 개수가 작다면 전달되지 않은 매개변수의 값은 undefined 가 됩니다. 반대로 매개변수 총 개수보다 인자를 더 많이 넣어 호출했다면 그 인자는 전달되지 않습니당.

파라미터가 정의되지 않은 함수에 인자를 넣어 호출했기 때문에 이 인자는 전달되지 않습니다. 하지만 let 을 통해 해당하는 값들을 함수 밖에서 다 초기화 하셨기 때문에 이 값들이 함수안에서 연산되어 반환되는 것이죠. 그래서 결과에서는 차이가 없는 것입니다. 결과에선 차이가 없지만, 코드의 정확한 이해를 위해 정확히 인자 호출개수 만큼 파라미터를 정의해주시는게 좋을 것 같아요.

//2회차  noooooooooooo!!! 손코딩으로 완성
function interestCalculator(amount, term, rate){
    return amount * term * (rate/100);
}

let amount = 365000;
let term = 1;
let rate = 4;
            
console.log(interestCalculator);

console.log('맡긴 금액은' + amount + '원 입니다.');
console.log('이자는' + interestCalculator + '원 입니다.');
console.log('최종 받을 금액은' + amount + interestCalculator +'원 입니다.');

 

16강. 퀴즈로 복습하기

Q.

let x = 10;
let y = 20;

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

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

console.log(myAnswer);

A.

변수 x, y와 무관하게 문자열'x', 문자열'y'를 출력하므로 결과는 xy