자바스크립트를 하게 되면, 매일 수도 없이 쓰게 되는 console 메소드!!!
=> 참고로, 객체 안에 내장된 함수를 메소드라고 부른다.
console 이라는 객체에 안의 메소드 log를 불러다가 쓰는 것
ex) console.log("hello");
그런데, 우리는 이 console 메소드에 관한 얼마나 알고 있을까??
이번 시간에는 console 메소드의 다양한 기능에 관해 알아보자!!
1. console.log( ... )
=> 인자로 전달된 값들을 화면으로 출력해준다.
=> 컴마(,) 를 사이에 두고, 새로 출력하고 싶은 인자들을 짚어넣을 수 있으며, 문자열을 짚어넣을 경우, 해당 문자열 이후에 자동으로 " " 띄어쓰기가 한 칸 붙는다.
위의 예시에서 "the answer is", 5 라고 is 다음에 띄어쓰기를 주기 않았지만 출력 값에는 띄어쓰기가 되있는 것을 확인할 수 있다.
2. console.group(...), groupEnd(...)
=> 화면에 출력 값이 많아질 때, 그것이 무엇에 관한 출력값인지 구분하기 위해 사용된다.
console.group(...) 안에 구분 하고 싶은 내용을 작성하고 -> groupEnd() 으로써 그 집합이 하나의 그룹이라고 지정할 수있다.
groupEnd(... )에는 내용을 적어도 그만 안 적어도 그만이다. 그저 코드 작성자가 무엇을 위한 End인지 확인용으로 안에 내용을 작성하지만, groupEnd(...) 안의 내용은 출력되지 않는다.
또한, console.group(...)은 중첩해서 사용할 수 있다.
=> "쇼핑몰 로그" 라는 대집합 속에 "회원 관련 작업"과 "상품 관련 작업"이라는 소집합들이 존재!!
3. console.clear()
콘솔 창이 지져분해지면,
console.clear()을 타입하면, 싹!! 청소할 수 있다. Terminal에서 clear 키워드를 사용하는 거과 같은 의미!!
이게 귀찮으면, 그냥
콘솔에서는 이 친구 눌러주면 된다.
4. console.dir(...)
console.log과 사용법은 같지만, 출력해주는 값이 다르다.
배열을 dir()에 담아줄 경우, log보다 더 많은 정보들을 출력해준다.
배열에서 사용가능한 내장 함수들, 길이 등등
객체에서도
그러나, 문자열이나 숫자일 때는 매우 조용하다.
일반적으로, 권장되는 사용법은 객체,함수,배열은 dir, 나머지는 log로 사용하는 게 좋다고 한다.
[TMI] : 함수도 사실은 객체이다.
여기까지 console() 메소드 편 끝!!!!
물론, 이 외에도 더많은 메소드들이 존재하지만, 지금 당장은 크게 쓸 일이 없어 보여서, 가장 활용도가 높아보이는 것들만 소개했다.
번외편!!!
- 자릿 수 구분하기!! [optional]
자바스크립트에서는 신기하게도 이게 에러가 안난다!!
천의 자리부터 구분을 줘서, 코드를 읽는 사람이 숫자의 자리를 쉽게 파악하게 하기 위해 사용된다고 한다.
=> 지적해주신 SY님께 감사를 표합니다.
자료 출처 및 참고 자료
https://developer.mozilla.org/en-US/docs/Web/API/Console/dir
https://www.zerocho.com/category/JavaScript/post/5b2b45cf1350f9001b662ba6
https://www.youtube.com/watch?v=YHrRY6IaJpQ&t=1s
https://www.freecodecamp.org/news/javascript-console-log-example-how-to-print-to-the-console-in-js/
