TIL - JavaScript(1) Console.log / Create a Variable

홍예찬·2020년 7월 22일
0
post-thumbnail

1. 기본적인 object와 method

console.log();

2. Comments(주석 남기기)

한 줄을 남길 경우에는 //
여러 줄을 사용할 경우에는 /* */
코드 중간에도 comment를 사용할 수 있다

3. 기본 데이터 유형

Number - 일반적인 숫자. 숫자는 따옴표를 사용하지 않음
String - 키보드에 있는 모든 문자. ‘’나 “”로 묶음
Boolean - 이 데이터는 true나 false의 두 가지 값만 나옴
Null - 값의 의도적인 부재, 따옴표가 없는 null
Undefined - 정의되지 않은 키워드로 표시. 따옴표가 없음. 값이 없음을 의미
Symbol- 기호는 고유 식별자로 복잡한 코딩에 유용
Object-관련 데이터 모음

4. 산술연산자

추가: +                  console.log(3 + 4); // Output: 7
빼기: -                   console.log(5 - 1); // Output: 4
곱하기: *               console.log(4 * 2); // Output: 8
나누기: /                console.log(9 / 3); // Output: 3
나머지: %

5. 끈 연결

‘+’연산자를 통해 두 개의 문자열을 추가할 수 있음

console.log('hi' + 'ya'); // Output: 'hiya'

여기서 중요한 점은 공백도 적용이 된다는 것

6. 특성(.length)

console.log(‘Hello’.length); //Prints 5

7. 문자열 방법(Methods)

마침표(점 연산자) / 방법의 명칭 / 괄호 열기 및 닫기

console.log('Hello').toUpperCase(); // Prints 'HELLO'
console.log('Hey').startsWith('H'); // Prints true

문자열 배열에서 좌우 공백을 제거하는 method는 .trim

8. object와 method

Javascript의object에는 기존의 console뿐만 아니라 다양한 object가 내장되어 있다.
예를 들어 산술보다 더 복잡한 수학 연산을 수행하려면 Math object를 사용하면 된다.
Math object에는 .random() method가 있다.

ex)

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

(Math.random()*50); 이 경우
1.math.random은 0과 1 사이의 난수를 생성한다.
2.그런 다음 그 숫자에 50을 곱하면, 이제 0에서 50 사이의 숫자가 나온다.
3.그런 다음, Math.floor()는 숫자를 가장 가까운 정수로 반올림한다.

터미널에 인쇄된 수를 보려면 console.log()를 사용

console.log(Math.floor(Math.random() * 50)); // 0과 50 사이의 랜덤 정수 인쇄

Math.ceil() :주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자를 integer로 반환
Math.floor() :주어진 숫자와 숫자가 같거나 작은 정수 중 가장 큰 수를 반환.

9. 변수 선언 방식

9-1. Create a Variable: var

변수 이름은 숫자로 시작할 수 없다.
변수 이름은 대소문자를 구분하므로 myName과 myname은 서로 다른 변수일 수 있다.
변수 이름은 키워드와 같을 수 없다.

9-2. Create a Variable: let

선언된 변수에 값을 할당하지 않으면 자동으로 정의되지 않는 값이 지정
변수의 값 재할당 가능, 변수에 값을 할당하지 않아도 변수를 선언할 수 있으며 이 경우 변수는 정의되지 않는 값으로 자동으로 초기화.

let meal = 'Enchiladas';
console.log(meal); // Output: Enchiladas
let meal = 'Burrito;
console.log(meal); // Output: Burrito

let price ;
console.log(price); // Output: undefined
price = 350;
console.log(meal); // Output: 350

9-3. Create a Variable: const(상수)

const 변수를 선언하고 값을 할당하는 방식에는 let 과 var와 동일한 구조를 따른다.
그러나 선언된 변수에 값을 할당하지 않을 수 없다. SyntaxError가 뜬다.
const 변수는 재할당 될 수 없다. TypeError가 뜬다.

9-4. var, let, const 차이점

var: 변수 재선언 가능. 따라서 에러가 나오지 않고 각기 다른 값이 출력됨

var title = 'titleOne'
    console.log(title) // Output:titleOne

var title = 'titleTwo'
    console.log(title) // Output:titleTwo

let: 변수 재선언 불가능. 재할당은 가능

let title = 'titleOne'
    console.log(title) // Output:titleOne

let title = 'titleTwo'
    console.log(title) 
    // Uncaught SyntaxError: Identifier 'title' has already been declared
    // const 역시 동일
  title = 'titleThree'
    console.log(title) // Output: titleThree

const: 변수 재선언 불가능. 재할당도 불가능.

const title = 'titleOne'
    console.log(title) // Output: titleOne

const title = 'titleTwo'
    console.log(title) 
    // Uncaught SyntaxError: Identifier 'name' has already been declared

    title = 'titleThree'
    console.log(title) 
    //Uncaught TypeError: Assignment to constant variable.

10. Mathematical Assignment Operators(수학 연산자)

let w = 4;
w = w+1;
console.log(w);  // Output: 5
ex)
let w = 4;
w +=1
console.log(w); // Output: 5

10-1. The Increment and Decrement Operator(증가 및 감소 연산자)

let a = '10';
a++;
console.log(a);
//Output: 11

11. String Concatenation with Variables(변수와 문자열 연결)

let myPet = 'armadillo';
console.log('I own a pet' + myPet + '.')
//Output: 'I own a pet armadillo.'

   여기서 중요한 점은 변수를 끌어올 때 따옴표를 쓰지 않는다!

12. String Interpolation(문자열 보간${})

const myName = 'yechan';
const myCity = 'Seoul';
console.log(`My name is ${myName}. My favorite city is ${myCity}.`);
//Output: My name is yechan. My favorite city is Seoul.

*typeof operator(연산자유형 확인)

let newVariable = 'Playing around with typeof.';
console.log(typeof newVariable);
//Output: string
profile
내실 있는 프론트엔드 개발자가 되기 위해 오늘도 최선을 다하고 있습니다.

0개의 댓글