[React] 강의 4주차 (1) -JS (데이터, 변수, 함수, 조건문)

[국비지원교육]  [패스트캠퍼스] React 강의 4주차 (1) - JS (JavaScript)

 

- 개요

- 데이터 종류

- 변수, 예약어

- 함수

- 조건문

 

---

 

 

[ Javascript  ] 

 

1. 표기법

 

- dash-case(kebab-case)

ex) the-quick-brown-fox

 

- snake_case

ex) the_quick_brown_fox

 

- camelCase

ex) theQuickBrownFox

 

- pascalCase

ex)TheQuickBrownFox

 

- Zero-based Numbering : 0기반 번호 매기기! 특수한 경우를 제외하고 0부터 숫자를 시작합니다.

 

let fruits = ['Apple', 'Banana', 'Cherry'];

console.log(fruits[0]); // 'Apple'
console.log(fruits[1]); // 'Banana'
console.log(fruits[2]); // 'Cherry'

console.log(new Date('2022-11-04').getDay()); // 5, 금요일
console.log(new Date('2022-11-05').getDay()); // 6, 토요일
console.log(new Date('2022-11-07').getDay()); // 7, 일요일

// 한 줄 메모
/* 한 줄 메모 */

/*
	여러 줄
    메모1
    메모2

*/

 

 

---

2. 데이터 종류 (자료형)

 

- String

- Number

- Boolean

- Undefined

- Null

- Object

- Array

 

// String(문자 데이터) 
// 따옴표를 사용합니다.

let myName = "Adlog";
let email = 'adlog@gmail.com';
let hello = `Hello ${myName}?!`;

console.log(myName); // Adlog
console.log(email); // adlog@gmail.com
console.log(hello); // Hello Adlog?!


// Number(숫자 데이터)
// 정수 및 부동소수점 숫자를 나타냅니다.

let number = 123; //정수
let opacity = 1.59; //부동소수점 숫자

console.log(number); // 123
console.log(opacity); // 1.59


// Boolean(불린 데이터)
// true, false 두가지 값밖에 없는 논리 데이터입니다.

let checked = true;
let isShow = false;

console.log(checked); // true
console.log(isShow); // false

// Undefined
// 값이 할당되지 않은 상태를 나타냅니다.

let undef;
let obj = { abc: 123 };

console.log(undef); // undefined
console.log(obj.abc); // 123
console.log(obj.xyz); // undefined


// Null
// 어떤 값이 의도적으로 비어있음을 의미합니다.

let empty = null;

console.log(empty); // null

// Object
// 여러 데이터를 Key: Value 형태로 저장합니다. {}

let user = {
	//Key: Value,
    name: 'adlog',
    age: 100,
    isValid: true
};

console.log(user.name); // adlog
console.log(user.age); // 100
console.log(user.isValid); // true


// Array(배열 데이터)
// 여러 데이터를 순차적으로 저장합니다. [ ]

let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana
console.log(fruits[2]); // Cherry

 

---

3. 변수, 예약어

 

1) 변수 : 데이터를 저장하고 참조(사용)하는 데이터의 이름 

ex) var(권장사항 아님), let, const

 

// 재사용이 가능!
// 변수 선언!

let a = 2;
let b = 5;

console.log(a + b); // 7
console.log(a - b); // -3
console.log(a * b); // 10 
console.log(a / b); // 0.4


// let =  값(데이터)의 재할당 가능!
// const =  값(데이터)의 재할당 불가능!

let a = 12;
const b = 10;
console.log(a); // 12
console.log(b); // 10

a = 999;;
b  = 999;
console.log(a); // 999
console.log(b); // TypeError: Assignment to constant variable.

 

 

2) 예약어 : 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어

let this = 'adlog'; //SyntaxError
let if = 123; // SyntaxError
let break = true; // SyntaxError

---

4. 함수

 

// 함수 선언
function helloFunc(){
	// 실행 코드
    console.log(1234);
}


// 함수 호출
helloFunc(); //1234


function returnFunc(){
 return 123;
}

let a = returnFunc();

conosle.log(a) // 123

// 함수 선언!
function sum(a, b){ //a, b는 매개변수(Parameters)
 return a + b;
}

//재사용!
let a = sum(1, 2); //1, 2는 인수(Arguments)
let b = sum(7, 12);
let c = sum(2, 4);

console.log(a, b, c); // 3, 19, 6

// 기명(이름이 있는) 함수
// 함수 선언!

function hello(){
	console.log(('Hello~');
}

// 익명(이름이 없는) 함수 
// 함수 표현!
let world = function(){
	console.log('World~');
}


//함수 호출!
hello(); // Hello~
world(); // World~

// 객체 데이터
const adlog = {
	name: 'Adlog',
    age : 100,
    // 메소드(Method)
    getName: function (){
    	return this.name;
    }
};

const hisName = adlog.getName();
console.log(hisName); // Adlog
// 혹은
console.log(adlog.getName()); // Adlog

 

---

 

5. 조건문 : 조건의 결과 (truthy, falsy)에 따라 다른 코드를 실행하는 구문

ex) if, else

 

let isShow = ture;
let checked = false;

if (isShow) {
	console.log('Show!') // Show!
}


//실행안됨
if (checked){
	console.log('Checked!');
}

let isShow = true;  or let isShow = false; 

if (isShow) {
	console.log('Show!');  //true 일때 출력 //Show!
} else {
	console.log('Hide?'); //false 일때 출력 //Hide?
}

 

---

[JavaScript] 자바스크립트 소수점 계산 오류 가볍게 이해하기

참고 : https://bigtop.tistory.com/47

[JavaScript] 자바스크립트 소수점 계산 오류 가볍게 이해하기