자바스크립트 기본 끄적끄적

웹에 웹사이트를 만들고 싶을 때, 웹사이트를 interactive로 만들고 싶을 때(역동적이고 효과적인 웹사이트)

ES5, ES6는 ECMAScript의 약자이다. ES는 Specification의 버전을 알려주는 것이고 Specification은 작동 설명서 같은 것이다.

바닐라 자바스크립트는 javascript의 한 종류로 Library가 없는 것을 나타낸다.

작은 결과물을 만들 때는 repl이라는 사이트에서 코딩하는 것도 편안하다.

프로그램을 깔 필요도 없고 결과물도 옆에서 바로 볼 수 있기 때문이다.

ps. 단점으로 log를 살펴볼 때 가끔 작동하지 않는 것도 있고 너무 길거나 크면 나오지 않는다.

https://replit.com/login?goto=%2Frepls

Log In

---

html에서 js를 삽입시 항상 body 안쪽의 가장 아래쪽에 있어야 한다.

log를 확인하기 위해서는 크롬창에서 f12를 눌러 console 버튼을 누르면 확인할 수 있다.

 

Variable(변수) 변경되거나 변경될 수 있는 것

ex) a = 2 -> a는 변수이다.

변수를 선언할 때는 let을 사용한다.

 

상수를 선언할 때는 const를 사용한다.

상수는 변수처럼 바꿀 수 없다.

ex) const a = 30;

a = 4; -> a는 상수이므로 오류가 난다.

 

var는 varible이고 var도 변수처럼 값을 바꿀 수 있다. 하지만 var보다는 let을 쓴다.(지금은 잘 쓰지 않음)

---

camel case란 변수명을 처음에는 소문자로 시작해서 다음 단어의 시작은 대문자로 적어주는 것을 의미한다.

ex) dayOfWeek

 

리스트를 만들고 싶을 때는 array를 사용하고 하나씩 정보를 저장하려고 한다면 object를 사용해 value값을 입력해야 한다.

//array
const week = [1,2,3,4,5]
console.log(week);
const array = ['week', 'cut', 'broke']
console.log(array);

//object
const infoo = {
    name : "KT",
    age : 27,
    gender : "Male",
    isJob : false
}

console.log(infoo.age);

infoo.age = 28;

console.log(infoo.age);

object안에 array를 넣어줄 수 있다. 안에 object와 array로 된 것도 삽입 가능하다.

const infoo = {
    name : "KT",
    age : 27,
    gender : "Male",
    isHappy : false,
    hobby : ["cook", "drawing", "game"],
    favFood : [
        {
            name:"fish",
            health: true
        },
        {
            name:"chicken", 
            health: false
        }
    ]
}

console.log(infoo);

array와 object에서 가장 중요한 것은 ", "를 빼먹지 않을 것

 

console.log의 console은 object이고 log는 함수이다. console object에서 함수 log부분만 불러와서 보겠다는 뜻이다.

---

함수 만들기

function을 이용해서 함수를 작성한다.

함수의 () 부분은 argument라고 한다.

argument는 변수 같은 것이다.

이해가 되지 않는다면 talk부분을 지워서 확인해보면 이해할 수 있다.(설명은 아래에)

function say(talk){
    console.log("Hello!", talk);
}

say("arong");

//Hello! arong 으로 출력

자바스크립트가 하는 것은 "arong"값을 가장 위에 있는 talk이라는 것에 넣은 다음 "Hello!" 옆에 있는 talk으로 들어가게 된다.

함수에서 쓰고 싶은 변수가 2개 이상이면 argument를 추가로 적어주면 된다.

function say(talk, age){
    console.log("Hello!", talk, "im", age, "years old");
}

say("arong", 40);

//Hello! arong im 40 years old

`(백틱)을 사용하면 좀 더 효율적으로 작성할 수 있다.

function say(talk, age){
    console.log(`Hello! ${talk} im ${age} years old`);
}

say("arong", 40);
//Hello! arong im 40 years old

변수를 선언해서 그 안에서 함수를 사용하고 싶을 때에는 log가 아닌 return을 사용해야 한다.

function say(talk, age){
    console.log(`Hello! ${talk} im ${age} years old`);
}

const useReturn = say("arong", 40);
console.log(useReturn);
//Hello! arong im 40 years old
//undefined

5번째 라인은 "useReturn은 say 함수의 실행된 값이다"라는 의미이다.

실행 순서를 보면 useReturn은 say를 실행시키고 say는 안에 있는 log를 찍는다. 그리고 외부의 있는 console.log로 useReturn을 해보면 리턴 값이 없으므로 정의되지 않았다고 뜨게 된다. say함수에서 log를 찍었을 뿐 반환한 것이 없기 때문이다.

function say(talk, age){
    return `Hello! ${talk} im ${age} years old`;
}

const useReturn = say("arong", 40);
console.log(useReturn);
//Hello! arong im 40 years old

say함수의 log를 return으로 바꿔주게 되면 useReturn에서 say함수의 return 값을 받게 되고 log에서 useReturn의 반환 값을 찍어주게 된다. 그러므로 log는 한 번만 출력된다.

log를 지우면 아무것도 뜨지 않는 이유는 say함수에서 return 즉, 값을 변수 useReturn으로 반환해줄 뿐 log를 사용하지 않았기 때문이다.

---

위에서 console은 객체(object)이고 log는 함수라는 얘기를 했었는데 이 의미는 직접 만들어보면 알 수 있다.

const calculator = {
    plus : function(a,b) {
        return a + b;
    },
    minus : function(a,b){
        return a - b;
    }
}

	      //console.log()
const plus = calculator.plus(5, 5);
const minu = calculator.minus(7, 3);
console.log(plus);
console.log(minu);
//10
//4

먼저 객체인 calculator를 생성한다. 객체이므로 const 객체명 = {}로 작성한다.

함수명으로 사용할 value를 작성 후 function으로 함수를 정의해준다.

객체 외부에서 plus 변수를 작성 후 calculator(객체) 안의 plus(함수)를 선언한다.

(const plus와 calculator의 plus는 전혀 다른 plus이다.)

주석 처리한 console.log를 보면 calculator.plus와 구성이 같은 것을 알 수 있다.

 

console에는 log 말고도 여러 가지 요소가 있는데 그중에서 console.error()도 많이 사용한다.

console.error("error");라고 작성하면 확인 가능하다.