Tutorial

 

바닐라 JS로 크롬 앱 만들기 강의 정리 # 2.0 ~ # 2.12

 

 

variable을 표현하는 두가지 방법

 

const -> 상수 default

let -> 변수를 변경해야 할 필요가 있을 때 사용

var -> 사용하지 말자 -> 코드의 의도를 파악할 수 없음

 

Primitive types

• Boolean : 참 and 거짓 -> const a = true; or const b = false;
• Null : null은 JavaScript의 원시 값 중 하나로, 어떤 값이 의도적으로 비어있음을 표현
• Undefined : 값을 할당하지 않은 변수 -> const a; (이런식으로 값을 넣지 않음)
• Number : 숫자 -> const num = 1;
• String : 문자열 -> const str = "abc"; 쌍 따옴표 or 홑 따옴표 시작과 끝을 동일하게 해줘야 함
• BigInt : Number가 표현할 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체 -> (BigInt는 정수 리터럴의 뒤에 n을 붙이거나(10n) 함수 BigInt()를 호출해 생성할 수 있습니다.)
• Symbol : 심볼 값은 객체 프로퍼티(object properties)에 대한 식별자로 사용될 수 있습니다; 이것이 심볼 데이터 형식의 유일한 목적 (ECMAScript 6 에 추가됨) (잘 모릅니다.)

 

 

Arrays

연속된 같은 타입의 값을 활용할 떄 유용하다 

ex) days

const days = ["mon", "tue", "wed", ...]

 

Objects연관되어 있는 property들을 그룹으로 묶어 저장할때 사용 ex) player

const player = {
	name: "jun",
    age: "30",
    fat: true,
    ...
}

 

Functions

어떤 코드를 캡슐화 하여 재사용 가능하게 만든 것

ex) calculator

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

 

 

간단한 Calculator 만들기

const calc = {
	plus: function (a,b) {
    	console.log(a + b);
    },
    minus: function (a,b) {
    	console.log(a - b);
    },
    times: function (a,b) {
    	console.log(a * b);
    },
    divide: function (a,b) {
    	console.log(a / b);
    },
    power: function (a,b) {
    	console.log(a ** b);
    }
}

 

Return

return을 통해 변수를 함수의 결과물을 받아오고 이를 재활용 할 수 있다.

return 키워드를 사용하면 이후의 코드는 실행되지 않는다.

const calc = {
	plus: function (a,b) {
    	return a + b;
        console.log("hi") // dead code
    },
    minus: function (a,b) {
    	return a - b;
    },
    times: function (a,b) {
    	return a * b;
    },
    divide: function (a,b) {
    	return a / b;
    },
    power: function (a,b) {
    	return a ** b;
    }
}

const plusValue = calc.plus(1,2)
const minusValue = calc.minus(plusValue, 1)
const result = calc.times(plusValue, minusValue);
console.log(result)

 

 

 

References

https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures

자바스크립트의 자료형 - JavaScript | MDN

https://nomadcoders.co/javascript-for-beginners/lectures/2883