2024. 05. 22 (수) 4주차 - Daily Coding - Day03

6강

- let, const, var

- 연산자

 

변수를 선언하는 3가지 방법

let	const	var
- ES6 이후 - 변수 - 블록 스코프	- ES6 이후 - 상수(사용 권장) - 블록 스코프	- ES5 이전 - 변수 (사용 권장 x) - 함수 스코프

 

상수 - 변하지 않는 값

변수 - 변하는 값

let	const	var
- 처음에 값을 선언해도 되고 안해도 됨 - 중간에 선언 한 값을  바꿀 수 있음 // let(ES6), block scope let age = 10; //console.log(age); 결과 값 10 age = 21; console.log(age); //console.log(age); 결과 값 21 let name; console.log(name); //결과 값 undefined	- 처음에 값을 무조건 선언해줘야 됨 - 상수이기에 중간에 값을 바꿀 수 없음 // const (ES6) const birthYear = 1992; cosole.log(birthYear); //결과 값 1992 birthYear = 2002; cosole.log(birthYear); //결과 값 Error 발생 //const의 경우 상수이기때문에 한 번 선언한 값에 대해 변경이 불가하다 const name; console.log(name); //결과 값 Error 발생 //const의 경우 무조건 값을 선언해줘야한다	// var (ES5), function scope var name = 'LEE'; console.log(name); // 결과 값 LEE name = 'KIM'; console.log(name); // 결과 값 KIM var age; console.log(age); // 결과 값 undefined

 

 

연산자 (가장 많이 쓰이는 연산자)

1. 할당 연산자 (Assignment Operators)

let appleBox = 2;
console.log(appleBox);
appleBox +=10; //더하기
console.log(appleBox);
appleBox *=2; //곱하기
console.log(appleBox);
appleBox -=2; //빼기
console.log(appleBox);
appleBox /=3; //나누기
console.log(appleBox);
appleBox %=2; //나머지(몫)
console.log(appleBox);

 

----------------- 6-2강(05/22)에서 이어서 진행 예정 -----------------

 

2. 타입 변환과 타입 강제

// 타입 변환 타입 강제
const year = '1992'; // string
console.log(Number(year) + 10); // Number
console.log(Number('hello')); // NaN
console.log(String(30), 30);

console.log('난' + 30 + '입니다.'); //string
console.log('20' - 5); // Number

 

3. 비교 연산자 (Comparison Operators)

Truthy	Falsy
- Boolean 에서 True 로 인식 - Falsy한 값을 빼고 전부 - "0" 빈문자열 X - "false" - [] / {}	- Boolean에서 false로 인식 - false - 0, 0n - '', "" 빈문자열 O - Null / Undefined / NaN

// 3. 비교 연산자 (Comparison Operators)
const age = 10;
const ages = '10';
console.log(age == ages); // true '=='의 경우 값만 동일하면 'true'로 출력 됨
console.log(age === ages); // false '==='의 경우 값, 타입이 동일해야지 'true'로 출력 됨

const stringIsTrue = 'true'; //string
const booleanIsTrue = true; //boolean, 
const numberIsTrue = 1; //Number

console.log(booleanIsTrue == stringIsTrue);
// flase, 두개 모두 number로 형변환이 이루어지고
// boolean 타입이 number로 형변환이 이루어질 경우 1 로 표현 됨
// string의 경우 number로 형변환이 되면 NaN 으로 됨

console.log(numberIsTrue == booleanIsTrue); // true
// 둘다 number로 형변환이 될 경우 1 이므로 true 로 표현 됨

 

4. 산술 연산자 (Atrithmetic Operators)

// 4. 산술 연산자 (Atrithmetic Operators)
let num = 3;
num++; // 4 출력
num--; // 3 출력

 

5. 논리 연산자 (Logical Operators)

// 5. 논리 연산자 (Logical Operators)
//왼쪽의 값이 truthy할 일 경우 오른 쪽의 값을 false 또는 String값으로 반환한다
const a1 = true && true; // true
const a2 = true && false; // false
const a3 = false && true; // false
const a4 = false && 3 == 4; //false
const a5 = 'Cat' && 'Dog' // Dog, 빈 문자열이 아닐 경우 Truthy
// true && 'Dog' => 'Dog'
// 양쪽에 boolean 이 아닌 다른 타입의 값으로 이루어질 경우 그 값을 온전히 유지한다 

const a6 = false && 'Cat';
// 왼쪽에 false값이 들어오면 오른쪽에 어떤 값이 있더라도 'false'를 반환한다'

const a7 = 'Cat' && false; // false


//어느 한 쪽이 true면 true로 리턴한다.
//어느 한 쪽이 truthy 값이라면 무조건 true 리턴 대신 형변환하지 않고 리턴을 한다
//양쪽이 truthy 값이라면 앞쪽걸 리턴한다
const o1 = true || true; // true
const o2 = false || true; // true
const o3 = true || false; // true
const o4 = false || 3 == 4; // false
const o5 = 'Cat' || 'Dog'; // 'Cat'
const o6 = false || 'Cat'; // 'Cat'
const o7 = 'Cat' || false; // 'Cat'

 

6. 삼항 연산자 (Conditional Operators)

// 6. 삼항 연산자 (Conditional Operators)
const age = 17;

const AdultCheck = age >= 18 ? '성인' : '미성년'
//위 아래 같은 표현식
if(age >= 18) return '성년';
else return '미성년';

 

 

7강

Falsy(false)한 값 => 0, false, "", undefined, null, NaN

 

함수

함수는 입력과 출력이 존재하는 로직의 단위

자신의 외부 코드가 호출할 수 있는 하위 프로그램

//함수, Function
function logger() {
    console.log('logging...')
}

logger(); //logging...


function bySomeFruits(bananaCount) {
    const fruits = `바나나 ${bananaCount}개를 샀다`;
    return fruits;
}

const bananas = bySomeFruits(5);
console.log(bananas);



function bySomeFruits(bananaCount, lemonCount) {
    const fruits = `바나나 ${bananaCount}와 ${lemonCount}개를 샀다`;
    return fruits;
}

const bananasAndlemons = bySomeFruits(3, 10);
console.log(bananasAndlemons);

 

 

함수 선언식

function 함수명 () {

    구현 로직

}

- 호이스팅 영향 받음

- 선언 위에서 호출 가능

// 1. 함수 선언식, 장점 : 함수를 선언하기 이전에 실행해도 오류가 나지 않음.
function calecAge (birthYear) {
    return 2024 - birthYear;
};

console.log(calecAge(1992)); //32

 

 

함수 표현식(권장)

const 함수명 = function() {

     구현 로직

}

- 호이스팅 영향 받지 않음

- 클로저, 콜백 사용 가능

// 2. 함수 표현식
const nowAge = function calecAge2 (birthYear) {
    return 2024 - birthYear;
};

console.log(nowAge(1992)); //32

 

 

 

화살표 함수

const 함수명 =  () =>  {

     구현 로직

}

// 3. 화살표 함수
const todayAge = (birthYear) => {
    return 2024 - birthYear;
}

console.log (todayAge(1992)); //32

 

🧐회고

아 드디어  function (***) 이라고 할 때 ( ) 안에 무언가를 쓰는거와 안쓰는거의 차이를 확실히 알았다 와

이거 진짜 궁금했었는데 말이다

 

( ) 안에 넣는 걸 '매개변수' 라고 말한다고 한다

함수에서 매개변수(argument)가 있는 함수는 반드시 매개변수를 규격에 맞게 적어줘야한다.

즉 매개변수를 여러 개 선언해주었다면 그 개수에 맞게 선언해주어야 한다

 

예시)

function bySomeFruits(bananaCount) {

const fruits = `바나나 ${bananaCount}개를 샀다`;

return fruits;

}

const bananas = bySomeFruits(5);

console.log(bananas);

function bySomeFruits(bananaCount, lemonCount) {

const fruits = `바나나 ${bananaCount}와 ${lemonCount}개를 샀다`;

return fruits;

}

const bananasAndlemons = bySomeFruits(3, 10); //2개의 매개변수 인풋

console.log(bananasAndlemons);