1) Number
console.log(5+6); // 출력 결과: 11
console.log(3*9); // 출력 결과: 27
console.log(8/2); // 출력 결과: 4
console.log(10%3); // 출력 결과: 1상세설명)
Number는 우리가 다른 언어에서도 알 수 있는 숫자형이다. 다음 코드처럼 console.log() 괄호 안에 원하는 계산식을 입력하면 계산이 되어서 출력이 된다.
2) String
console.log(1+1); // 숫자 2출력
console.log('1'+'1');
console.log('Hi my name is Sinbmil, i am hungry');
console.log('Hi my name is Sinbmil, i am hungry'.length);상세 설명)
String으로 하기 위해서는 작은 따옴표를 사용해야 되는데 1번째 줄은 사용을 안해서 계산을 하면 결과가 2가 출력이 되는 것이고 2번째 줄을 사용을 했기때문에 11이 출력이 된다. 길이를 구하고 싶을 때는 length를 사용하면 된다.
출력 결과)
3) 변수
var num = 7;
console.log(num);
num = 10;
console.log(num);
var name = 'Sinbmil';
console.log(name); // name 출력
var sentence1 = 'Hello my name is ' + name
console.log(sentence1); // sentence 출력상세 설명)
변수를 선언하기 위해서는 var을 선언해야 되고 그 후에 다른 값으로 초기화 할 수 있다. 변수를 선언하고 그 변수를 다른 곳에서 사용하려면 위 코드의 name처럼
+변수명을 붙여주면 된다. var말고도 블록 스코프 특징을 갖는 const와 let을 사용해도 된다.
const는 한 번 값을 할당하면 다른 값을 할당할 수 없고 초기화할 때 값을 할당하지 않으면 에러가 발생한다.
-> 다른 값을 할당해야 하는 상황이 생겼을 때 let을 사용하면 됩니다.
출력 결과)
4) Template Literal
var name = 'Sinbmil';
var sentence1 = 'Hello ' + name +' Hi ' +name +'\
\
Good Morning'
console.log(sentence1); // 출력
var sentence2 = 'COCO MAKE ME\nDo it'
console.log(sentence2);
var letter = `Hello ${name}
Hi ${name} Good evening`; // letter 변수에 대입
console.log(letter); // 출력
상세 설명)
sentence1 변수에서 줄바꿈을 하기 위해 엔터를 했지만 출력을 할 때는 줄바꿈이 안된다. sentence2에서 실제로 줄바꿈을 하기 위해 Do 앞에 \n을 해주었다.
template을 사용하기 위해서는
그레이브엑센트(shift + ~ 문자)를 사용해야 하는데 letter 변수를 예로 들면 처음시작할 때 그레이브엑센트를 해주고 name처럼 변수를 사용해서 문장에 넣을려고 하는 것은 ${변수명}이렇게 해주고 문장끝에 다시 그레이브엑센트로 닫아주면 된다. 또한 ${}안에 변수명 뿐만 아니라 계산식을 넣어도 계산식이 출력되서 나온다.
출력 결과)
5) log와 dir의 차이
JavaScript에서는 주로 console.log를 이용해서 출력을 하는데 console.dir을 사용하는 경우도 있다. 이 두개의 출력 메소드가 어떤 점이 다른지 한 번 알아 보았다.
console.log
-> 요소를 HTML과 같은 트리 구조로 출력
-> DOM 요소에 대해 특별한 처리를 제공
console.dir
-> 요소를 JSON과 같은 트리 구조로 출력
-> DOM JS 객체의 전체 표현을 보려고 할 때 유용
느낀점)
console.log와 console.dir을 통해서 출력하는 것을 알게 되었고 다른 것들은 대체로 다른 언어와 비슷한데 Template Literal을 통해서 그레이브엑센트를 알게 되었다. 항상 키보드를 보면서 이 문자는 언제 쓰는지 몰랐는데 Node.js를 통해서 알게될 줄을 몰랐다. Template Literal이 문자열을 더 쓰기 편하게 만들어 놓은것이라 문자열을 사용하게 되면 자주 사용할 것 같다.
