codepen에서 java script 세팅

이제 code pen에서 당분간은 html과 css를 사용하지 않기 때문에 JS부분 상단바를 더블클릭한 후, 그 밑 console 버튼을 클릭해 JS와 동일하게 상단바를 더블 클릭한다. console이란 쉽게 말해 처리하는 중간 과정을 확인할 수 있는 출력 창이다.

console.log()

console.log()는 괄호 안의 정보를 console창에 출력할 수 있는 코드이다.
여기서 숫자는 괄호 안에 바로 작성하고 (ex.console.log(13)) 문자의 경우는 ("") 쌍따옴표 안에 작성한다. (ex.console.log("hello world"))
그리고 ; 코드의 마지막에는 세미콜론을 찍도록 한다.

console.clear()

codepen의 특성상 우리가 코드를 수정할 때마다 자동으로 처음부터 코드를 실행한다. 만약 우리가 "1234"를 출력하려고 한다.
하지만 codepen은 이 "1234"를 작성하는 과정 "1","12","123"마저 코드의 완성으로 인식하여 console창에 출력하게 된다.물론 우측 상단에 clear버튼을 눌러도 되지만 이런 경우를 방지하기 위해 console.clear()라는 코드를 쓴다. 이 코드는 이 코드를 기점으로 전에 있는 코드들의 출력을 지운다. 이렇게 되면 우리가 원하는 "1234"만 출력할 수 있게된다.

숫자와 문장

Java script의 성질을 알아보자. 우리가
consolo.log(10 + 10);을 출력한다고 해보자. 어떻게 출력될까? 답은 20이다. 기본적으로 JS는 연산이 가능하다. 사칙연산의 우선 순위도 그대로 작동하고 문장 + 문장, 문장 + 숫자도 가능하다
console.log("안" + "녕"); --> "안녕"
console.log("안" + 10); --> "안10"
문장과 숫자를 더하게 되면 숫자는 숫자 10이 아니라 그저 문자1과 0으로 인식해서 더한다. 그래서 "안10"이라는 문장이 나오는 것이다.
console.log("안" + 10 + 20); 는 "안1020"으로 나오게 되는데 숫자끼리는 값으로 연산을 하지만 기본적으로 앞에서 뒤로 순차적으로 계산하기 때문에 "안" + 10 = "안10"이라는 문장과 "20"이라는 문장을 더한 값이 나오는 것이다.
하지만 console.log("안" + (10 + 20) 은 "안30"으로 출력된다. 수학처럼 괄호안의 (10 + 20)부터 연산하는데 이 연산은 숫자끼리의 연산으로 값이 30이 나오고 "안" + "30"의 과정으로 "안30"이 도출된다.
비슷한 예로 console.log("안" + 10 * 20)가 있다.
"안" + 10 * 20
-> "안" + 200 -> "안" + "200" -> "안200"