코드스테이츠

2.20 JavaScript

스우티 2023. 2. 20. 14:44

JavaScript는 원래 브라우저에서 실행하기 위해 만들어진 프로그래밍 언어입니다. 그래서 HTML 파일과 JavaScript 파일을 함께 브라우저에서 실행해야 작동합니다. 혹은 따로 Node.js라는 JavaScript 런타임을 컴퓨터에 설치해야 합니다. 

 

Glossary

  • REPL(Read-Evaluate-Print loop): 읽고(read), 평가(evaluate)하고, 출력(print)을 반복(loop)하는 가장 간단한 개발 환경입니다. 내가 작성한 코드가 문법에 맞는지 틀린지 간단하게 실행해볼 수 있습니다.
  • 프로그램(program): 작업(task) 수행을 위한 코드 모음
  • 프로세스(process): 프로그램 실행의 결과물.

console.log()

‘hello world’라고 입력하고 엔터를 치는 순간 JavaScript 엔진은 이 코드를 읽고, 평가하고, 출력합니다. REPL아니고 코드를 직접 실행하는 경우에는 console.log() 메서드로 출력을 할 수 있습니다. 괄호 안에 'hello world'를 입력하고 엔터를 눌러 출력합니다.

1
console.log('hello world'); // hello world

Glossary

  • console.log(): 개발자 도구 콘솔이나 터미널에 원하는 값을 출력할 수 있게 돕는 메서드

JavaScript 코드는 브라우저, Node.js REPL 등 다양한 환경에서 실행할 수 있다.

 

Glossary

  • 기계어: 컴퓨터가 이해할 수 있는 숫자로만 구성된 언어. 사람이 쉽게 이해할 수 없다.
  • 프로그래밍 언어: 개발자가 프로그램을 작성하기 위한 언어. 기계어와 다르게 사람이 다룰 수 있는 수준의 문법과 의미를 지닌다.
  • 자바스크립트(JavaScript): JavaScript는 브라우저, 서버, 모바일 개발이 가능한 멀티 패러다임 프로그래밍 언어입니다.
  • JavaScript 엔진: JavaScript 코드를 실행할 수 있는 프로그램입니다. 크롬에 내장된 v8이 대표적입니다.

주석

초창기 많은 개발자는 개발을 하면서 메모를 할 필요성을 느끼기 시작했습니다. 아무리 직관적이고 간결하게 코드를 작성하려 해도, 내가 작성한 코드를 다른 개발자에게 쉽게 설명하기 어려웠습니다. 과거의 내가 열심히 작성했던 코드를 왜 그렇게 작성했는지도 기억하기 쉽지 않았죠.

그래서 코드에 간단히 메모를 하기 위해 주석(comment)를 추가했습니다. JavaScript에서 주석은 // 다음에 작성하거나, /*, */ 사이에 작성하면 됩니다. 주석 처리된 코드는 JavaScript 엔진이 인식하지 않기 때문에 자유롭게 사람의 언어, 자연어를 작성할 수 있습니다.

1  // 문자열 'hello world'를 설명하는 주석입니다. 주석은 가능하면 코드 위에 작성합니다.
2  'hello world';
3
4  /* 
5  여러 줄의 코드를 주석 처리할 수 있습니다.
6  console.log('Hello');
7  */

값과 표현식

REPL에 a b c d를 입력해봅시다. 아마 Uncaught SyntaxError: Unexpected identifier가 발생할겁니다. 문법 에러가 발생했습니다.

a b c d // Uncaught SyntaxError: Unexpected identifier

 

123을 입력해봅시다. 이제는 에러가 발생하지 않습니다. 문법을 잘 지켰네요.

123; // 123

 

이렇게 읽고, 평가가 완료되어 하나의 의미를 가지는 코드가 값(value)입니다. 값을 표현하기 위해서는 다양한 방식이 있습니다. 예를 들어, 숫자값 1995를 표현하기 위해서는 아래와 같은 다양한 코드로 쓸 수 있습니다. 이렇게 하나의 값으로 평가될 수 있는 코드를 표현식(expression)이라고 합니다. + 기호와 같이 값에 변화를 줄 수도 있습니다. 이렇게 산술 연산이나 논리 연산 등을 할 수 있는 기호를 연산자(operator)라고 합니다.

 

1995;
1000 + 900 + 90 + 5;
1900 + 95;

 

Glossary

  • 값(value): 하나의 고유한 의미를 가지는 코드. JavaScript 엔진이 하나의 값으로 읽고 평가할 수 있어야 한다.
  • 표현식(expression): 값으로 평가될 수 있는 코드.
  • 연산자(operator): 특정 연산을 수행할 수 있는 코드.

console.log()

‘hello world’라고 입력하고 엔터를 치는 순간 JavaScript 엔진은 이 코드를 읽고, 평가하고, 출력합니다. REPL아니고 코드를 직접 실행하는 경우에는 console.log() 메서드로 출력을 할 수 있습니다. 괄호 안에 'hello world'를 입력하고 파일을 실행하면 출력 결과를 아래와 같이 확인할 수 있습니다.

1
console.log('hello world'); // hello world
  • console.log(): 개발자 도구 콘솔이나 터미널에 원하는 값을 출력할 수 있게 돕는 메서드

구구단 출력하기

지금까지 배운 내용을 기반으로 구구단을 출력해 봅니다. 예를 들어, 2단의 결과를 출력하기 위해서는 값을 직접 입력할 수도 있지만

console.log(2);
console.log(4);
console.log(6);
console.log(8);
console.log(10);
console.log(12);
console.log(14);
console.log(16);
console.log(18);

* 연산자로 좀 더 직관적으로 2단이라는 것을 표현할 수도 있습니다.

// 구구단 2단을 출력해 보세요.
console.log(2 * 1); // 2
console.log(2 * 2); // 4
console.log(2 * 3); // 6
console.log(2 * 4); // 8
console.log(2 * 5); // 10
console.log(2 * 6); // 12
console.log(2 * 7); // 14
console.log(2 * 8); // 16
console.log(2 * 9); // 18

 

 

'안녕하세요.'.length; //6

'hello world' .toUpperCase( ); // 'HELLO WORLD'

'HELLO WORLD'
> 
12345. length //Uncaught SyntaxError: Unexpected identifier 'length'
> 
> 12345. toUpperCase( )
Uncaught SyntaxError: Unexpected identifier 'toUpperCase'
> 
> 12345. 123. toFixed( )
Uncaught SyntaxError: Unexpected number
> 

 

Number 타입

JavaScript의 여러 데이터 타입 중 Number는 일상생활에서 흔히 접할 수 있는 숫자를 자바스크립트에서 표현하기 위한 데이터 타입입니다. 정수(integer)와 실수(float)을 모두 표현할 수 있습니다.

100; // 정수를 표현할 수 있습니다.
-100; // 음수를 표현할 수 있습니다.
100.123; // 실수를 표현할 수 있습니다.

typeof 연산자로 해당 값이 숫자 타입인지 확인할 수 있습니다.

typeof 100; // 'number'
typeof -100; // 'number'
typeof 100.123; // 'number'

같은 숫자 값 간에는 간단한 사칙연산을 할 수 있습니다. 아래 예시에서 사용한 수학 기호 (+ - * / )를 자바스크립트에서는 산술 연산자(arithmetic operator)라고 부릅니다.

console.log(1 + 2); // 3
console.log(1 - 2); // -1
console.log(1 * 2); // 2
console.log(1 / 2); // 0.5
console.log(9 % 2); // 1 (9를 2로 나눈 나머지 구하기)

 

Math 내장 객체

좀 더 복잡한 계산을 위해서는 Math 내장 객체를 사용합니다. Math 내장 객체의 대표적인 메서드에 대해서 알아보겠습니다.

  • Math.floor(): 괄호 안의 숫자를 내림하여 반환합니다.
  • Math.ceil(): 괄호 안의 숫자를 올림하여 반환합니다.
  • Math.round(): 괄호 안의 숫자를 반올림하여 반환합니다.
  • Math.abs(): 괄호 안의 숫자의 절대값을 반환합니다.
  • Math.sqrt(): 괄호 안의 숫자의 루트값을 반환합니다.
  • Math.pow() : 괄호 안의 첫 번째 숫자를 밑, 두 번째 숫자를 지수인 숫자를 반환합니다.
  • -math.pow(x, y) 함수는 x의 y 거듭제곱 (x의 y승)을 반환
Math.floor(100.621); // 100
Math.ceil(100.621);  // 101
Math.round(100.621); // 101
Math.round(100.421); // 100
Math.abs(-100); // 100
Math.abs(100); // 100
Math.sqrt(4); // 2
Math.sqrt(2); // 1.4142135623730951
Math.pow(2, 5); // 32

 

String 타입

JavaScript 데이터 타입 String(문자열)은 인간의 언어, 자연어를 JavaScript에서 표현하기 위한 데이터 타입입니다. 따옴표(’), 쌍따옴표(”), 백틱(`)으로 감싸면 됩니다. 맥북의 경우 백틱은 영어로 전환하고 물결(~)을 누르면 입력할 수 있습니다.

한자나 이모지와 같은 특수문자도 문자열로 만들 수 있고, 숫자와 문자를 조합해서 문자열로 만들 수도 있습니다. 특히 백틱으로 만든 문자열은 줄바꿈도 가능합니다.

 

'사과'
"JavaScript"
"欢迎你"
"😇"
"최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다."
`JavaScript (줄여서 JS)는 일급 함수를 사용하는 가벼운 객체 지향 인터프리터 언어이며 
웹페이지의 스크립트 언어로 잘 알려져 있지만, 브라우저가 아닌 환경에서도 많이 사용된다.
프로토타입 기반, 다중 패러다임 스크립트 언어이며, 동적이고 명령어, 객체 지향, 함수 프로그래밍
스타일을 지원한다.`

 

+ 로 문자열을 이어붙일 수 있습니다. 문자열과 문자열을 이어붙일 때의 + 는 문자열 연결 연산자로써 쓰입니다. 다른 타입과 이어붙이려고 하면 모두 문자열로 변합니다. 특히, 숫자와 이어붙이기를 시도하다가 예상 못한 결과를 얻지 않도록 조심합니다. 위 이유로 가능하면 다른 타입 간의 연산을 하지 않도록 조심해야 합니다.

"안녕하세요" + "!!"; // 안녕하세요!!
"감사합니다." + " " + "🙏" // 감사합니다. 🙏
1 + "1" // 11

 

문자열의 length 속성

문자열의 length 속성을 이용하여 문자열의 길이를 확인할 수 있습니다. 문자열 값에 .length 를 붙이면 됩니다.

console.log('欢迎你'.length); // 3
console.log('최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.length); // 48

 

인덱스(Index)

문자열의 각 문자는 순서를 가지고 있습니다. 각 문자가 몇 번째에 위치하는지 인덱스(Index)로 확인할 수 있습니다. 첫 번째 문자의 인덱스는 0입니다. JavaScript는 우리 일상생활에서 순서를 셀 때 1부터 1, 2, 3 … 세는 것이 아니고, 0부터 세는 점을 주의해주세요. 이를 Zero-based numbering이라고 합니다.

let str = 'codestates';
console.log(str[0]); // 'c'
console.log(str[4]); // 's'

 

문자열 주요 메서드

문자열의 유용한 메서드 일부를 소개합니다.

  • toLowerCase() : 문자열을 소문자로 변경합니다.
  • toUpperCase() : 문자열을 대문자로 변경합니다.
  • concat() : 문자열 연결 연산자 + 처럼 문자열을 이어붙일 수 있습니다.
  • slice() : 문자열의 일부를 자를 수 있습니다.
'HELLO WORLD'.toLowerCase(); // 'hello world'
'hello world'.toUpperCase(); // 'HELLO WORLD'
'hello '.concat('world'); // 'hello world'
'hello world'.slice(0, 5); // 'hello'
  • indexOf() : 문자열 내에 특정 문자나 문자가 몇 번째 위치하는지 확인합니다.
    • 만약 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회합니다.
    • 포함되어 있지 않으면 -1 을 반환합니다.
'🍎🍓🍉🍇'.indexOf('🍎'); // 0
'🍎🍓🍉🍇'.indexOf('🖥'); // -1
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Eich'); // 34
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Dahl'); // -1

 

  • includes() : 문자열 내에 특정 문자나 문자가 포함되어 있는지 확인합니다.
'🍎🍓🍉🍇'.includes('🍎'); // true
'🍎🍓🍉🍇'.includes('🖥'); // false
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.includes('Eich'); // true
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.includes('Dahl'); // false
 

 

 

Boolean 타입

Boolean(불리언)은 사실 관계를 구분하기 위한 타입입니다. 불리언 타입의 값은 true 혹은 false 둘 중 하나입니다.

true;
false;

 

falsy

불리언 타입은 아니지만, 자바스크립트에서 false로 “여겨지는” 값이 일부 있는데, 이를 falsy 값이라고 합니다. 반대로 true로 “여겨지는” 값은 truthy 값이라고 합니다. truthy 값은 매우 많아서, falsy 값을 암기하면 구분하기 쉽습니다.

// 대표적인 falsy 값
false
0
-0
0n
""
''
``
null
undefined
NaN

비교연산자(comparison operator)

불리언은 비교연산자(comparison operator)로 두 값이 같은지 다른지를 확인할 때 유용합니다.

 

  • === , !== : 엄격한 동치 연산자 두 피연산자의 값과 타입이 같으면 true, 다르면 false 를 반환합니다. 엄격한 동치 연산자는 보이는 값이 같아도, 두 값의 타입이 다르면 false 가 됩니다. 
    123 === (100 + 23); // true ("123의 값과 100 + 23의 값은 같다."는 사실이기 때문에 true)
123 === '123'; // false ("123의 값과 '123'의 값은 같다."는 사실이 아니기 때문에 false)
123 !== (100 + 23); // false ("123의 값과 100 + 23의 값은 같지 않다."는 사실이기 아니기 때문에 false)
123 !== '123'; // true ("123의 값과 '123'의 값은 같지 않다."는 사실이기 때문에 true)
  • ==, != : 느슨한 동치 연산자 느슨한 동치 연산자는 “대체로” 타입이 달라도 값이 같으면 true, 다르면 false를 반환합니다. 이렇게 “느슨하게” 동치 여부를 판단하기 때문에 예외가 많아 현대 웹 개발에서는 사용을 권장하지 않습니다. 참고로 다른 프로그래밍 언어에서는 == , != 를 주로 사용하는데, JavaScript에서는 ===, !== 로 비교해야 합니다. 
    12 == '12' // true

 

  • > , < , >= , <= : 대소 관계 비교 연산자 두 피연산자의 값의 크기를 비교합니다. 수학에서의 부등호 기호의 사용법과 유사합니다. 
  • 100 > 200; // false ("100은 200보다 크다."는 거짓) 200 > 100; // true ("200은 100보다 크다."는 참) 100 >= 100; // true ("100은 100보다 크거나 같다."는 참) 200 <= 100; // false ("200은 100보다 작거나 같다."는 거짓)

논리연산자(logical operator)

논리연산자(logical operator)로 두 값 간의 논리 관계를 확인할 수 있습니다.

 

  • || : 논리합(OR)
    • 두 값 중 하나만 true 여도 true 로 판단합니다. 
      true || false; // true
false || true; // true
100 > 200 || 200 > 100; // true ("100은 200보다 크다" 혹은 "200은 100보다 크다" 중 하나는 true)
    • 두 값이 모두 false 면 false 로 판단합니다. 
      false || false // false
200 < 100 || 20 < 10; // false
  • && : 논리곱(AND)
    • 두 값이 모두 true 면 true 로 판단합니다. 
      true && true // true
200 > 100 && 20 > 10; // true
    • 두 값 중 하나만 false 여도 false 로 판단합니다. 
      true && false // false
false && true // false
100 > 200 && 200 > 100; // false

논리 부정 연산자(!)의 경우, 사실 관계를 반대로 표현합니다.

  • ! : 부정(NOT)
    • 오른쪽 피연산자와 반대의 사실을 반환합니다.
!true // false
!(100 > 200) // true

 

  • falsy, truthy의 반대 값을 반환합니다.
!0 // true
!'' // true
!1 // false
!'코드스테이츠' // false