[Javascript] 기초 정리 (세미콜론, 자료형, 변수, 함수..)

Front-end

[Javascript] 기초 정리 (세미콜론, 자료형, 변수, 함수..)

코소미 2021. 11. 10. 13:21

자바스크립트 기초 정리 - 세미콜론, 자료형, 변수, 함수

🔸 세미콜론 ( ; )

문장의 구분을 짓기 위해 사용된다. 문장의 마침표 (.) 역할

🔸 Datatype (자료형)

숫자 (Number) : 정수(integer) , 소수(Floating Point)
문자 (String)
불린 (Boolean) : 참(true) , 거짓(false)

🔸 변수 (variable)

변수 선언은 let 또는 var을 이용해서 선언할 수 있다.

var espressoPrice;
espressoPrice = 3000;
let americanoPrice;
americanoPrice = 4500;
let cafalattePrice = 5000;

console.log(espressoPrice);
console.log(americanoPrice * 2);
console.log(espressoPrice + cafalattePrice * 2);

변수 작명 TIP (출처 codeit)

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

(1) JavaScript 식별자는 '문자(a-z, A-Z)', '밑줄(_)' 혹은 '달러 기호($)'로 시작해야 한다. 두 번째 글자부터는 '숫자(0-9)'도 가능하다

(2) '대문자'와 '소문자'는 구별한다. (예시 : myphone != myPhone)

(3) '예약어(JavaScript가 찜해놓은 단어)'는 사용하면 안 됨. (예시 : if, for, let )

- 지키면 좋은 룰

(1) 의미있는 이름 사용.

변수와 함수를 여기저기서 적절히 활용해야 하는데, 이름이 a, b, c, d처럼 의미 없이 설정되어 있으면 어떤 값을 저장해뒀는지 찾기도 어렵고 활용하기도 어렵다! 또한 프로그램의 가독성이 떨어져서 나중에 코드를 볼 때, 공동 작업을 할 때 불편하다.

let a, b, c, d;

(2) 추상적인 이름은 좋지 않다.

상황에 따라 그냥 name이라는 변수명이 적합한 상황도 있을 수 있겠지만, 다양한 '이름'들이 있기 때문에 name은 너무 추상적일 수 있다. 조금 더 구체적인 이름을 사용하자!

let name;

(3) 변수 이름은 'camelCase'로 쓰는 것이 좋다.

변수명에는 띄어쓰기가 불가능하기 때문에, 띄어쓰기 역할을 대신 할 무언가가 필요하는데. 그 중 하나가 'camelCase' 이다.

let bad_variable_name; // 스네이크
let goodVariableName; // 카멜

'snakeCase' 가 편하다면 스네이크 형식으로 작성해도 되지만, 제일 중요한건 일관성있게 변수명을 작성하는게 제일 좋다!

🔸 함수 (function)

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

function greetings() {
    console.log('Hi');
    console.log('안녕');
    console.log('こんにちは');
    console.log('你好');
    console.log('Guten Tag');
    console.log('Bonjour');
    console.log('Buongiorno');
};

//함수 호출
greetings();

🔸 매개변수 (파라미터 Parameter)

console.log(값) // <- '값'에 해당하는 부분이 파라미터

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

//함수호출
함수이름(값); //값이 파라미터로 전달

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

//함수호출
함수이름(값);

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

printSum(10 , 5); //15

🔸 return : 다시 돌려준다, 반환한다.

Input (파라미터가 있을수도, 없을수도) → 정해진 일 수행하고 (함수 function) → OutPut (return)

function getTwo(){
    return 2;
};

console.log(getTwo()); //2

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

console.log(getTwice(5)); //10

let x = getTwice(5);
let y = getTwice(2);
console.log(x * y); //40