[Front-End] JavaScript 시작

콘솔(Console)

콘솔은 개발자에게 오류와 같은 중요한 메시지를 표시하는 패널이다. 

컴퓨터가 코드로 하는 작업들은 기본적으로 우리 눈에 보이지 않아서 콘솔에 직접 프린트하여 화면에 내용을 표시하고 볼 수 있다.

▶ console 키워드 :  코드에서 사용할 수 있는 객체, 데이터 및 작업 모음을 나타낸다.

▶ .log() 메서드 : console.log()로 사용하여 괄호 안에 넣은 내용을 콘솔에 프린트한다.

ex) 콘솔에 5를 출력한다.

console.log(3);

+) 세미콜론은 줄 또는 문장의 끝을 나타내고, JavaScript에서 코드는 일반적으로 세미콜론없이도 실행되지만 세미콜론으로 각 문장을 끝내는 습관을 익히는 것이 좋다.

 

 

주석

주석은 코드가 수행하는 작업을 설명하고 코드를 사용하는 개발자에게 지침을 남기거나 기타 유용한 주석을 추가 할 수 있습니다. 프로그램이 실행될 때 컴퓨터가 무시할 주석

▶ 주석 유형① 

//(두 개의 슬래시)을 사용하여 한 줄을 주석처리한다.

// 1. Prints 3 to the console
console.log(3);

console.log(5);  // 2. Prints 3 to the console 

▶ 주석 유형②

/*주석을 시작하고, */주석을 종료하여 여러 줄을 주석처리한다.

/*
This is example.
console.log(10);
*/

console.log(/*not working*/ 3);  // Prints 3 

 

 

데이터 타입

JavaScript에는 7가지 기본 데이터 유형이 있다.

• 숫자 : 소수를 포함한 임의의 수. ex) 4, 23.42 등

• 문자열 : 작은 따옴표 ' ... '또는 큰 따옴표 " ... "로 묶인 모든 문자들(문자, 숫자, 공백, 기호 등).

• Boolean : true 또는 false 두 가지 값만 가능.

• Null : 따옴표없이 null로 표현되고, 값이 의도적으로 없음을 나타냄.

• Undefined(정의되지 않음): 따옴표없이 undefined로 표현되고, null과는 다른 용도로 사용되지만 값이 없음을 나타냄.

• 기호 : 언어의 새로운 기능인 기호는 고유한 식별자이며 복잡한 코딩에 유용.

• 객체(Objects) : 관련 데이터 모음.

→ 처음 6개는 원시 데이터 유형으로 간주된다. 즉, 언어에서 가장 기본적인 데이터 유형이라고 할 수 있다.

 

 

산술 연산자

산술 연산자를 사용하여 수학적 계산을 수행할 수 있다.

① 덧셈 : +

② 뺄셈 : -

③ 곱셈 : *

④ 나눗셈 : /

⑤ 나머지 : %

console.log(2 + 3); // Prints 5
console.log(3 - 2); // Prints 1
console.log(5 * 2); // Prints 10
console.log(6 / 2); // Prints 3
console.log(9 % 2); // Prints 5

 

 

 

문자열 연결

+ 를 사용하여 두 문자를 이어 붙여 연결할 수 있다. 

console.log('he' + 'llo'); // Prints 'hello'

 

속성

length 라는 문자열의 문자 개수를 저장하는 속성이 있다. 

이처럼 여러 속성들은 마침표와 속성 이름을 사용하여 사용될 수 있다.

console.log('hello'.length); // Prints 5

 

 

메소드

JavaScript는 다양한 문자열 메서드를 제공한다. 

1. 마침표(점 연산자) 2. 메소드 이름 3. 여는 괄호와 닫는 괄호로 표현하여 메소드를 사용할 수 있다.

ex) 메소드 예시

console.log('hello'.toUpperCase()); // 문자열을 대문자로 반환 Prints 'HELLO'
console.log('Hey'.startsWith('H')); // 괄호 사이의 'H'가 있는지 판단 Prints true
console.log('    remove    '.trim()); // 공백을 제거 Prints remove

⤷ String 메소드를 볼 수 있는 사이트 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

String - JavaScript | MDN

 

 

내장 객체

console 외에도 JavaScript에 내장된 다른 객체들이 있다.

예를 들어, 산술보다 더 복잡한 수학 연산을 하려는 경우 JavaScript에는 기본 제공 Math 객체가 있다.

ex) 객체의 장점은 메소드가 있다는 것이고, 내장 Math 객체에서 0과 1 사이의 난수를 반환하는 .random() 메서드를 호출할 수 있다.

console.log(Math.random()); // Prints a random number between 0 and 1

0에서 30 사이의 난수를 생성하기 위해 이 결과에 50을 곱할 수 있다.

Math.random() * 30;

Math.floor()는 10진수를 가지고 가장 가까운 정수로 내림한다.

Math.floor(Math.random() * 50);

결과적으로 0과 30사이의 정수인 난수가 출력할 수 있다.

console.log(Math.floor(Math.random() * 30)); // Prints a random whole number between 0 and 30

⤷ Math 객체의 속성과 메서드를 볼 수 있는 사이트 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

Math - JavaScript | MDN