[JS]01. 기본 문법

1. const and let

const : 상수(constant)

let : 변수(variable), 변수를 처음 생성할 때만 작성 

→ const를 기본으로 사용하고, 이후 variable를 업데이트 해야하는 상황에는 let을 사용

let myName = "nico";
console.log("Hello " + myName) // Hello nico

myName = "nicolas"
console.log("Hello " + myName) // Hello nicolas


const mySisterName = "benny"
console.log("Hello " + mySisterName) // Hello benny

mySisterName = "berry"
console.log("Hello " + mySisterName) //!error!

 

 

var : 변수를 선언하는 가장 기본적인 방법(언제든지 값을 업데이트 사용할 수 있음)

 

* 변수 이름 작성 방법 

JS : const veryLongVariableName (camel case)

python : very_long_variable_name (snake case)

 

---

2. Booleans

* true or false를 사용하는 경우 

1) 사용자가 로그인을 했는가?

2) 비디오가 재생되고 있는가?

3) 웹사이트가 로딩되고 있는가?

 

null : 아무것도 없음(값이 존재하지 않음) (!= false)

* false : false 라는 값이 존재함 

 

undefined : 특정한 데이터 타입으로 지정되지 않음 

→ 메모리 공간은 있으나(변수는 존재하지만) 값이 할당되지 않은 경우

let something;	// something이란 변수가 존재
console.log(something); 	// undefined

 

---

3. Array

기존의 Array에 새로운 data를 추가하고 싶을 때 → .push()

const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"];

console.log(daysOfWeek);	//print()와 같은 역할 
							//mon, tue, wed, thu, fri, sat
                            
console.log(daysOfWeek[5]);	// sat (index는 0부터 시작)                           

daysOfWeek.push("sun");		//.append()와 같은 역할

console.log(daysOfWeek);	//mon, tue, wed, thu, fri, sat, sun


daysOfWeek[4] = myBirthDay; 	// index 4의 value update
console.log(daysOfWeek);	//mon, tue, wed, thu, myBirthDay, sat, sun

* Array의 목적 : 하나의 variable 안에 data list를 갖는 것

 

⇒ 데이터를 최선으로 관리하는 법!

 

---

4. Object

const playerName = "soy";
const playerPoints = 1234;
const playerHandsome = true;
const playerFat = "little bit";
    // 하나의 개체(player)에 대한 모든 variable의 property를 지어줘야 함

const player = ["soy", 1234, true, "little bit"];
    // 각 요소들이 무엇을 의미하는 지 알 수 없음

 

// object 생성 
const player = {
    name : "soy",
    points : 1234,
    fat : true
};

console.log(player);
console.log(player.name);
// player -> object, name -> player 안 요소 
// console -> object, log -> console 안에 존재하는 요소 

console.log(player["name"]);	//soy 출력

player.name = "Nico";
console.log(player.name); 
	// Nico로 출력 -> const(player)를 변경한 것이 아니라, object(const) 안 요소의 값을 변경한 것임

//player = false; 
	// const를 하나의 값으로 취급할 경우에 오류 발생 (player를 boolean 값으로 취급)

player.lastName = "Lee";// object에 값 추가 
console.log(player);
	// {name: 'Nico', points: 1234, fat: true, lastName: 'Lee'}

    
player.points = player.points + 15 // points 값 update
console.log(player.points);		// 1249 출력

 

---

 

5. Function and Argument 

function : 코드를 캡슐화, 여러 번 재사용 가능

argument : fuction에서 실행하고자 하는 데이터를 function에게 보내는 방법 

// 함수의 기본 형태
function 함수 이름(arr1, arr2, ... , arrN)
{
	수행문
	    // arr은 지역변수로 함수 내 블럭 안에서만 존재 
}

===========================================================

function sayHello(nameOfPerson, age)
{
    // nameOfPerson, age는 현재 이 블럭 안에서만 존재 (지역 변수)
    console.log("Hello my name is " + nameOfPerson);
    console.log("I'm " + age + " years old");
 
}
sayHello("Dahl", 20); // nameOfPerson = "Dahl", age = 20
	// Hello my name is Dahl
	// I'm 20 years old
sayHello("Mika", 25); 
sayHello("Sandy", 85);

 

* object 안에서 function을 작성하는 방법 

const player = {
    name : "domato",
    
    // 함수 이름 : function(arr) { code }
    sayHello : function (notMyName){
        console.log("Hola! " + notMyName);
    }
}

console.log(player.name);	// domato
player.sayHello("Dahl");	// Hola! Dahl

 

** calculator 만들기

const calculator = {
    add: function(a, b) {
        console.log(a + b);
    },

    subtract: function(a, b) {
        console.log(a - b);
    },

    div: function(a, b) {
        console.log(a / b);
    },

    multiply: function(a, b) {
        console.log(a * b);
    },

    square: function(a, b) {
        console.log(a ** b);
    }
};

calculator.add(2, 4)		// 6
calculator.subtract(2, 4)	// -2
calculator.div(2, 4)		// 0.5
calculator.multiply(2, 4)	// 8
calculator.square(2, 4)		//16

 

---

6. Return

return : function이 정상적으로 작동했을 때 반환하는 값

-> return을 한 후 해당 function은 종료됨 (return 뒤에 코드를 작성해도 실행되지 않음 )

 

 

* return을 사용하는 이유 

- function 외부에서 value를 제공 받기 위해서 (value를 replace)

const age = 96;
function calculateKrAge(ageOfForeigner) {
    return ageOfForeigner + 2;
        //return : function이 정상적으로 작동했을 때 반환하는 값 
};

const KrAge = calculateKrAge(age); // fuction의 return value
console.log(KrAge); //98

===========================================================

function calculateKrAge02(ageOfForeigner) {
    ageOfForeigner + 2;
    return "Hello";
};

const KrAge02 = calculateKrAge02(age);
console.log(KrAge02) // Hello

 

*  calculator 만들기_return 사용 

const calculator = {
    add: function(a, b) {
        return a + b;
    },

    subtract: function(a, b) {
        return a - b;
    },

    div: function(a, b) {
        return a / b;
    },

    multiply: function(a, b) {
        return a * b;
    },

    square: function(a, b) {
        return a ** b;
    }
};

// depend on each other(interactive)
const addResult = calculator.add(2, 4);
const subtractResult = calculator.subtract(addResult, 4);
const divResult = calculator.div(subtractResult, 4);
const multiplyResult = calculator.multiply(divResult, addResult);
const squareResult = calculator.square(multiplyResult, subtractResult);

console.log(addResult)		// 2+4 = 6
console.log(subtractResult)		// 6-4 = 2
console.log(divResult)		// 2/4 = 0.5
console.log(multiplyResult)	// 0.5*6 = 3
console.log(squareResult)	// 3**2 = 9

 

---

7. Condtional

 

조건문 기본 형식 
if(condition){
    // condition === ture
    // condition have to boolean!
} else {
    // condition === false
}

======================================================================

const age = prompt("How old are you?");
    // prompt() : 창을 띄워서 사용자에게 값을 받음 
    // 요즘에는 잘 사용하지 않는 방법

console.log(age);   // console.log(typeof age); -> string

// type 변경하는 방법 
console.log(parseInt(age)); // parseInt() : data type을 int로 변경

======================================================================

const age = parseInt(prompt("How old are you?")); 
	//prompt()의 값을 int로 변환 

console.log(isNaN(age)); 
	// isNaN() : NaN인지 아닌지 boolean으로 표현(false -> NaN이 아니라는 뜻)

prompt() 사용시 나타나는 화면(탭의 아이콘이 로딩 형태를 띰 -> prompt()를 띄우는 동안 브라우저는 멈춤 상태)

const age = parseInt(prompt("How old are you?"));

if(isNaN(age)) {
    // isNaN(age) === true
    console.log("Please write a number");
} else {
    // isNaN(age) === false
    console.log("Thank you for writing your age");
}

* '=='와 '==='의 차이 

== : 두 변수의 값만 비교 (변수의 자료형은 고려하지 않음)  -> !=

ex) 2 == "2" (true)

ex) 0 == false (true)

 

=== : 두 변수의 값과 자료형도 함께 비교(엄격한 비교) -> !==

ex) 2 === "2" (false) : 2 == int, "2" == string

ex) 0 === false (true) : 0 == int, false == boolean

 

 

const age = parseInt(prompt("How old are you?"));

if(isNaN(age) || age < 0) {
    // isNaN(age) -> true or age < 0
    console.log("Please write a positive number");
} else if(age < 18) {
    // age < 18 -> true
    console.log("You're too young");
} else if(age >= 18 && age <= 50) {
    // age < 18 and age <= 50 -> true
    console.log("You can drink");
} else if(age > 50 && age <= 80){
    // age > 50 and age <= 80 -> true
    console.log("You might want to consider reducing your drinking.");
} else if(age === 100) {
    // age === 100
    console.log("You're wise")
} else if(age > 80) {
    // age > 80
    console.log("You can do whatever you want")
    
    // age > 80 이 age == 100 보다 앞의 순서에 적히면 age === 100의 조건문은 실행되지 않음
    // age가 80보다 큰 경우에는 age > 80의 코드가 먼저 실행되기 때문 (condtion의 overlap)
}

 

* Operator

1) or ||

true || true === true

false || true === true

true || false === true

false || false === false

 

2) and &&

true && true === true

false && true === false

true && false === false

false && false == false