Basic JavaScript #1

JavaScript란?

JS(JavaScript)란 객체 기반의 스크립트 프로그래밍 언어이다.

JS는 HTML의 특정 요소들을 사용하여 이벤트에 따라 어떤 동작을 하도록 기능을 조작할 수 있다.

 

 

Javascript의 탄생

초기 웹사이트들은 HTML, CSS로만 만들어진 정적 웹사이트였다. (넷스케이프도 마찬가지)

1995년 넷스케이프에서 HTML, CSS만 사용하지 않고 웹 사이트를 사용자와 상호작용할 수 있길 원하였고, 그로 인해 10일만에  Javascript가 탄생하게 되었다. 

처음에는 모카(Mocha), 그 후 라이브 스크립트(LiveScript), 최종적으로 (JavaScript)로 변경

 

 

Javascript 특징

1. 객체 기반의 스크립트 언어

2. 동적이며 타입 명시가 필요 없는 인터프리티 언어

3. 객체지향 프로그래밍, 함수형 프로그래밍 모두 표현 가능

4. 이벤트를 처리하고 사용자와 상호작용을 가능

5. 위에서 아래의 순서대로 실행

 

 

const와 let

const는 변수가 변하지 않은 값을 사용한다. 즉, 재할당이 불가능하다.

let은 변수가 변하는 값을 사용한다. 재할당이 가능하다.

 

아래 코드를 보면 myName은 apple로 선언되어 있지만, 마지막에 myName을 banana로 재선언한다.

실행 결과는 당연히 재 선언된 값이 출력되는 것을 확인할 수 있다.

 

만약 const를 사용했을 시 재 선언을 하게 되면 오류가 나게 된다.

const a = 5;
const b = 2;
let myName = "apple"; // let

console.log(a + b);
console.log(a * b);
console.log(a / b);
console.log("hello" + myName);

myName = "banana"; // 재 선언

console.log("your new name is + myName");

 

let 사용 결과

 

const a = 5;
const b = 2;
const myName = "apple"; // const

console.log(a + b);
console.log(a * b);
console.log(a / b);
console.log("hello" + myName);

myName = "banana"; // 재 선언

console.log("your new name is + myName");

 

const 사용 결과

 

 

Booleans

true와 false말고 null과 undefined가 있다.

true와 false는 각각 true와 false라는 값이 있는 반면, null은 아무것도 없음을 의미한다. 

 

undefined는 변수의 공간은 존재하는데 값이 들어가지 않는 상태를 의미한다.

null와 undefined의 차이점은 null은 직접적으로 null이라고 값을 지정해주고 undefined는 자연적으로 지정된다.

const amIApple = true;
console.log(amIApple);

const amIBanana = false;
console.log(amIBanana);

const amINothing = null;
console.log(amINothing);

let amISomething;
console.log(amISomething);

 

Boolean 실행 결과

 

 

Arrays

배열은 1이 아닌 0부터 시작한다.

그렇기 때문에 daysOfWeek[4]의 값은 fri가 출력된다.

 

만약 선언된 배열에 새로운 값을 추가를 하고 싶으면 push를 사용한다.

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

console.log(daysOfWeek[4]);
console.log(daysOfWeek);

daysOfWeek.push("sun");

console.log(daysOfWeek);

 

Arrays 실행 결과

 

 

Objects

배열의 경우  key, value가 해당 값이 어떠한 값을 가르키는지 알기 힘들다.

Objects를 사용하면 그 객체에 대한 key와 value를 지정하여 해당 값이 어떠한 것인지 알 수 있다.

여기서 key는 name, porints, fat을 나타내고, value는 apple, 10, true이다. 

 

출력된 정보를 보면 name은 apple, points는 10, fat은 true라고 명시되어 나온다.

key값을 통해 해당 값만 출력할 수 있고, 수정도 가능하며 추가할 수도 있다.

// const player = ["apple", 10, true]; 배열의 경우
const player = {
    name: "apple",
    points: 10,
    fat: true,
};

console.log(player);
console.log(player.name); name만 출력

player.fat = false; // 수정
console.log(player); 

player.lastname = "potato"; // 업데이트
console.log(player);

 

Object 실행 결과

 

Function

함수는 동일한 작업을 여러번 반복하지 않고 재사용할 수 있고, 모듈화가 가능하며, 유지보수가 쉽다.

 

sayHello 함수 안에 인자 name, age를 받고 있다.

해당 함수를 호출하고 인자에 알맞은 값을 넣는다.

function sayHello(name, age) {
    console.log("Hello my name is " + name + " and I'm " + age);
}

sayHello("apple", 10);
sayHello("banana", 12);
sayHello("orange", 15);

/*
함수를 사용하지 않을 경우
console.log("Hello my name is apple and I'm 10");
console.log("Hello my name is banana and I'm 12");
console.log("Hello my name is orange and I'm 15");
*/

 

sayHello 함수 실행 결과

 

object를 활용하여 함수를 사용할 수 있다.

key를 함수 이름으로 선하여 함수를 호출한다.

const player = {
    name: "apple",
    sayHi: function (name) {
        console.log("hi " + name + "nice to meet you!");
    },
};

player.sayHi("banana");

sayHi함수 실행 결과

 

 

Return

Return은 값을 반환 한다.

console.log가 아닌 return을 사용하는 이유는 나온 값을 출력만 하는 것이 아닌 다시 재 가공할 수 있기 때문이다.

 

간단한 계산기 코드이다.

plus 함수로 나온 결과 값을 사용하여 minus 함수에 대입하여 minus함수의 결과 값을 만들어낸다.

minus 함수로 나온 결과 값을 multiply 함수에 대입하여 mulitply 함수의 결과 값을 만들어낸다.

이처럼 return을 통해 결과 값을 사용할 수 있다.

const calculator = {
    plus: function (a, b) {
        return a + b;        
    },
    minus: function (a, b) {
        return a - b;
    },
    multiply: function (a, b) {
        return a * b;
    },
    divide: function (a, b) {
        return a / b;
    },
    power: function (a, b) {
        return a ** b;
    }
};

const plusResult = calculator.plus(2, 3); // 2 + 3 = 5 
const minusResult = calculator.minus(plusResult, 10); // 5 - 10 = -5
const multiplyResult = calculator.multiply(minusResult, 5); // -5 X 5 = -25
const divideResult = calculator.divide(multiplyResult, plusResult); // -25 / 5 = -5
const powerResult = calculator.power(divideResult, plusResult); // -5^5 = -3125

 

calculator 함수 plus, minus, mult, div, power 실행 결과

 

 

Conditionals

조건문은 특정 조건 만족 시 실행하는 명령의 집합이며, 어떤 작업을 수행하고 싶을 때 사용되는 것이다.

 

prompt란 c언어의 scanf, python의 input과 같은 입력을 받는 역할을 한다.

prompt는 기본적으로 입력 받는 값이 string이다.

parseInt란 string을 number로 변경해준다.

즉, age를 숫자로 입력받는다.

 

[if문]

isNaN은 값이 NaN일 때 true, 값이 NaN이 아닐 때 false를 반환해주는 함수이다.

||은 or 연산, &&는 and 연산이다.

즉, 해당 값이 NaN이거나 age가 0보다 작으면 Please write a real positive number를 출력한다.

 

마지막 if문에서 ===는 같다를 의미하며 age가 100이면 wow you are wise를 출력한다.

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

if (isNaN(age) || age < 0) {
    console.log("Please write a real positive number");
} else if (age < 18) {
    console.log("You are too yound.");
} else if (age >= 18 && age <= 50) {
    console.log("You can drink");
} else if (age > 50 && age <=80) {
    console.log("You should exercise");
} else if (age > 80) {
    console.log("You can do whatever you want.");
} else if (age === 100) {
	console.log("wow you are wise");
}