[코드잇] 프로그래밍 기초 in Javascript

토픽 1. 프로그래밍 시작하기 in Javascript

❗️개인적으로 기록 및 정리하는 용으로 쓴 글이므로 정확하지 않습니다.❗️

👩🏻‍💻대코캠(대학생 코딩 캠프)이라는 대외활동을 통해'코드잇'이라는 곳을 알게 되었다. 대코캠 3기로 참여하여 한 달 동안 컴퓨터 개론, 웹 퍼블리싱 강의를 수료하였고 이를 통해 대외활동 이후에도 수강할 수 있도록 기간 연장을 받을 수 있게 되었다.

따라서, 나머지 기간동안 자바스크립트 수업을 이수할 예정이다. 현재 듣고 있는 강의는 '프로그래밍 in Javascript'이고 벨로그에 꾸준하게 기록하는 것을 목표로 한다.

자료형 개요

자바스크립트의 자료형은 숫자(Number), 문자열(String), 불린(Boolean)이 있다.

✔️ 숫자(Number)

1. 정수(Integer): 0보다 작은 음의 정수, 0, 0보다 큰 양의 정수
   ex) -8, -6, -1, 0, 5, 10

2. 소수(floating point): 소수점을 갖는 형태
   ex) 3.14, -1.1, 1.6

기본적으로 사칙연산이 가능하다.

✔️ 문자열(String)

큰 따옴표(" ")나 작은 따옴표('')로 감싸는 형태
ex) “Hello” ‘codeit’

✔️ 불린(Boolean)

참(true)과 거짓(false) 두 개의 값만 가지는 형태이다.
숫자나 문자열과는 다르게, 직접 값을 작성하는 것과는 다르게
어떤 조건에 의한 결과값으로 사용한다.
ex) 8 > 6 : true, 8 < 6 : false

추상화

추상(抽象)

뽑을 추, 코끼리 상

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

구체적인 정보를 꼭 필요한 핵심으로 바꾸는 것을 추상화(Abstraction)이라고 한다.

즉, 복잡한 것들을 목적에 맞게 단순화하는 것!

추상화의 대표적인 예시: 지도(map)

추상화는 단순하고 간결하게 표현하면서도 그 핵심만큼은 명확하게 드러내는 것이기 때문에 표현을 하는 입장에서도 이 표현을 접하는 입장에서도 훨씬 효과적인 소통이 될 수 있도록 하는 장점이 있다!

프로그래밍에서의 추상화

✅ 코드를 작성하는 자신

✅ 작성한 코드를 실행하는 컴퓨터

✅ 같이 코드 작성하는 동료

✅ 내가 만든 프로그램을 이용하는 사용자

프로그래밍은 추상화의 연속이라고 과언이 아니다.

추상화란?

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

변수(variable)

변수란 어떤 값을 담기 위해 이름을 붙인 상자라고 생각하면 된다.

// 변수 선언
let espressoPrice;
espressoPrice = 3000;

let espressoPrice = 3000;

console.log(espressoPrice);

여기에서 등호(=)는 수학에서 ‘같다’라는 의미와는 다르다.
프로그래밍에서 등호(=)하나는 할당 연산자라고 해서 오른쪽에 있는 값을 왼쪽에 ‘할당한다’라는 의미이다.

즉, 오른쪽에 있는 값 3000을 왼쪽 espressoPrice에 저장한다.

변수 이름을 잘 지정하는 것도 프로그래밍의 능력이다.

작명가이드

💢 꼭 지켜야 하는 룰(지키지 않으면 오류)

✔️ Javascript 식별자는 처음에 문자(a-z, A-Z), 밑줄 ( _ ), 달러 기호($)로 시작해야 한다. 두 번째 글자부터는 ‘숫자(0-9)’도 가능하다.

✔️ 대문자와 소문자는 구별한다. 'myname'과 'myName'은 다른이름이다.

✔️ 예약어(Javascript가 찜해놓은 단어)는 사용하면 안된다. 예를들면, if, for, let 같은 것들이 있다.

❗️지키면 좋은 룰(더 좋은 스타일을 위해)

✔️ 의미 없는 이름은 좋지 않다.

let a, b, c, d; 

✔️ 너무 추상적인 이름은 좋지 않다.

 let name;

✔️ 모든 변수 이름은 camelCase로 쓰는 것이 좋다.

let bad_variable_name;
let GoodVariableName;

변수명에는 띄어쓰기가 불가능하기 때문에, 띄어쓰기 역할을 대신 할 무언가가 필요하다. 그중 하나가 'camelCase'라는 것이다. 첫번째 글자는 소문자로 하고, 띄어쓰기가 있는 각 단어의 첫문자를 대문자로 표기하는 방식이다.

낙타처럼 굴곡이 있는 형태라서 camel이라고 명칭한다.

함수

변수 = 값
함수 = 명령들

변수를 선언할 때 쓰는 키워드는 let
함수를 선언할 때 쓰는 키워드는 function

//함수선언

function greetings() {
  console.log('Hi');
  console.log('안녕');
  console.log('Bonjour');
};

//함수호출

greetings();
greetings();

파라미터

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

welcome('Ellie');

여러개의 파라미터

function printSum(num1, num2) {
  console.log(num1 + num2);
}

printSum(10, 5);

function introduce(name, birth, nationality, job) {
  console.log('안녕하세요. 반갑습니다!');
  console.log('제 이름은 ' + name + '입니다.');
  console.log('생년월일은 ' + birth + '입니다.');
  console.log('국적은 ' + nationality + '입니다.');
  console.log('직업은 ' + job + '입니다.');
};

introduce('Ellie', '96.05.04', '대한민국', '웹디자이너');

리턴문

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);
let y = getTwice(2);

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