[JavaScript] 기초 - 코드 기초, 타입, 변수

rsuubinn·2023년 1월 4일

목록 보기

1/10

📚 Chapter1. 코드 기초

✏️ Chapter1-1. 코드 실행

console.log()

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

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

✏️ Chapter1-2. 코드 독해

JavaScript 엔진이 코드 읽는 법

기계어 : 컴퓨터가 0과 1의 조합으로 모든 정보를 표현하고 이해하는 언어
프로그래밍 언어 : 사람이 다룰 수 있게 문법과 의미를 지닌 언어

JavaScript 엔진은 코드를 위에서부터 아래로 코드를 읽고, 해석하고, 평가하다가 문제가 있으면 에러를 발생시키고, 해당 지점에서 코드 실행을 바로 중단한다.

주석(comment)

코드에 간단히 메모
JavaScript 에서의 주석은 // 다음에 작성하거나, /*, */ 사이에 작성하면 된다.
주석 처리된 코드는 JavaScript 엔진이 인식하지 않기 때문에 자유롭게 사람의 언어, 자연어를 작성 가능하다.

// 문자열 'hello world'를 설명하는 주석입니다. 주석은 가능하면 코드 위에 작성합니다.
'hello world';

/*
여러 줄의 코드도 주석 처리 가능하다.
console.log('hello world');
*/

// 하지만 /* */ 방식 주석은 중복하여 사용 불가능
/*/* 안녕하세요. */*/ // Uncaught SyntaxError: Unexpected token '*'

값과 표현식

a b c d // Uncaught SyntaxError: Unexpected identifier

123; // 123

값(value) : 읽고, 평가가 완료되어 하나의 의미를 가지는 코드
표현식(expression) : 하나의 값으로 평가될 수 있는 코드
연산자(operator) : + 기호와 같이 산술 연산이나 논리 연산 등을 할 수 있는 기호

✏️ Chapter 1-3. 코드 출력

구구단 출력하기

// 구구단 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

📚 Chapter 2. 타입

✏️ Chapter2-1. Number 타입

Number 타입

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

100; // 정수
-100; // 음수
100.123 // 실수

typeof 연산자로 해당 값이 숫자 타입인지 확인 가능

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

산술 연산자(arithmetic operator) : + - * / 수학 기호

console.log(1 + 2); // 3

⭐️ Math 내장 객체

Math.floor() : 괄호 안의 숫자를 내림하여 반환
Math.ceil() : 괄호 안의 숫자를 올림하여 반환
Math.round() : 괄호 안의 숫자를 반올림하여 반환
Math.abs() : 괄호 안의 숫자 절대값을 반환
Math.sqrt() : 괄호 안의 숫자 루트값 반환
Math.pow() : 괄호 안의 첫번째 숫자를 밑, 두번째 숫자를 지수인 수 반환

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 타입

String(문자열) : 인간의 언어, 자연어를 JavaScript 에서 표현하기 위한 데이터 타입
따옴표('), 쌍따옴표(""), 백틱(`)으로 감싸면 된다.

'사과'
"바나나"
`포도`

+ 연산자로 문자열을 이어 붙일 수 있다.
이 때 + 는 문자열 연결 연산자 로써 쓰인다.

'Hello' + 'World'; // HelloWorld
'1' + 1; // 11 (String 타입과 Number 타입의 더하기 연산);

문자열의 length 속성

문자열 값에 .length 를 붙이면 문자열의 길이 확인 가능

console.log('HelloWorld'.length); // 10

인덱스(index)

문자열의 각 문자는 순서를 가지고 있다.
각 문자가 몇 번째에 위치하는지 인덱스(Index) 로 확인할 수 있다.
첫 번째 문자의 인덱스는 0 이다. (Zero-based numbering)

let str = 'Hello World!';
console.log(str[0]); // 'H'
console.log(str[4]); // 'o'

⭐️ 문자열 주요 메서드

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을 반환

'Hello World'.indexOf('H'); // 0
'Hello World'.indexOf('h'); // -1

includes() : 문자열 내에 특정 문자가 포함되어 있는지 확인 (참, 거짓 반환)

'Hello World'.includes('H'); // true
'Hello World'.includes('h'); // false

Boolean 타입

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

true;
false;

falsy

불리언 타입은 아니지만, 자바스크립트에서 false 로 여겨지는 값

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

비교연산자(comparison operator)

===, !== : 엄격한 동치 연산자, 두 피연산자의 값과 타입이 같으면 true, 다르면 false 를 반환한다. 엄격한 동치 연산자는 보이는 값이 같아도, 두 값의 타입이 다르면 false가 된다.

100 === (10 * 10); // true
100 === '100'; // false(number 타입과 string 타입의 비교)

==, != : 느슨한 동치 연산자, 두 피연산자의 타입이 달라도 값이 같으면 true, 다르면 false를 반환한다. (예외가 많아 현대 웹 개발에서는 사용을 권장하지 않음)

100 === '100'; // true

>, <, >=, <= : 대소 관계 비교 연산자, 두 피연사자의 값의 크기를 비교한다.

100 > 200; // false ("100은 200보다 크다."는 거짓)
200 > 100; // true ("200은 100보다 크다."는 참) 
100 >= 100; // true ("100은 100보다 크거나 같다."는 참)
200 <= 100; // false ("200은 100보다 작거나 같다."는 거짓)

논리연산자(logical operator)

|| : 논리합(OR)
두 값 중 하나만 true 여도 true 로 판단한다.

	true || true; // true
	true || false; // true

두 값이 모두 false 면 false 로 판단한다.

	true || false; // true
	false || false; // false

&&: 논리곱(AND)
두 값이 모두 true 면 true 로 판단한다.

	true || true; // true
	true || false; // false

두 값 중 하나만 false 여도 false 로 판단한다.

	true || true; // true
	true || false; // false

! : 부정(NOT)
오른쪽 피연산자와 반대의 사실을 반환

!true; // false
!0; // true
!''; // true
!1; // false;

📚 Chapter3. 변수

✏️ Chapter3-1. 변수의 선언과 할당

변수의 선언과 할당

변수 : 특정 데이터에 이름 붙이기
변수 선언 : 특정 데이터를 컴퓨터가 기억할 수 있도록 메모리 공간을 확보하고 그 메모리 공간에 이름을 부여하는 것

let num; // 변수 선언

변수 선언 키워드인 let을 사용하여 변수를 선언하면 컴퓨터는 값을 저장하기 위한 메모리 공간을 확보
그 공간의 이름을 num 으로 기억하는데 이것이 바로 변수

num = 5; // 값의 할당

// 구구단 5단
let num; // 변수 선언
num = 5; // 값의 할당

console.log(num * 1); // 5
console.log(num * 2); // 10
console.log(num * 3); // 15
console.log(num * 4); // 20
console.log(num * 5); // 25
console.log(num * 6); // 30
console.log(num * 7); // 35
console.log(num * 8); // 40
console.log(num * 9); // 45

요약 및 정리

변수를 선언할 때는 let 키워드를 사용하여, 뒤에 선언하고자 하는 변수명 입력

let name;

선언된 변수에 값을 할당할 때는 할당 연산자 (=)를 사용

name = 'honggildong';

변수의 선언과 값의 할당을 동시에 할 수 있음

let name = 'honggildong';

아무것도 할당하지 않은 변수

아무것도 할당되지 않은 변수는 undefined 가 자동으로 할당된다.
JavaScript의 초기화 라는 특징

let variable;
console.log(variable); // undefined

값의 재할당

let 키워드로 선언한 변수에 새로운 값을 할당할 수 있다.
이를 재할당 이라고 한다.
재할당에도 할당연산자 = 를 사용한다.

let num = 5; 
console.log(num); // 5
num = 7;
console.log(num); // 7

재할당이 불가능한 변수(상수)

let 키워드가 아닌 const 키워드를 사용하면 재할당이 금지된다.

const num = 5; 
console.log(num); // 5;
num = 7; // Uncaught TypeError: Assignment to constant variable.

네이밍 규칙

식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.

let name, $head, _score; // 사용 가능한 변수명

숫자로 시작하는 것은 허용하지 않는다.

let 1st; // 사용할 수 없는 변수명

예약어(프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어) 는 식별자로 사용할 수 없다.

let true; // 사용할 수 없는 변수명

변수명은 변수의 존재 목적을 이해할 수 있도록 의미를 명확히 표현해야 한다.

// 변수의 존재 목적을 이해할 수 없는 변수명
let x = 100;
let y = 5;

// 변수의 존재 목적을 명확히 알 수 있는 변수명
let name = 'kimcoding';
let age = 25;

네이밍 컨벤션

JavaScript 에서는 일반적으로 카멜 케이스(camelCase) 를 사용한다.
카멜 케이스는 낙타의 등모양에서 유래된 이름이다.
첫 단어의 첫문자는 소문자로, 그 이후에 연결되는 단어의 첫 문자는 대문자로 작성하는 방법이다.

// 카멜 케이스(camelCase)
let firstName = 'gildong';
let lastName = 'hong';

✏️ Chapter3-2. 변수 활용하기

연산의 결과를 변수에 반영하려면 재할당을 하면 된다.

let number = 10;
number = number + 2;
console.log(number); // 12

number = number * 3;
console.log(number); // 36

⭐️ 템플릿 리터럴(template literal)

백틱(`)을 사용하는 방법을 템플릿 리터럴 이라고 한다.
문자열 내부에 변수 삽입할 수 있는 기능 은 매우 유용하게 사용되므로 반드시 알아두어야 한다.

let firstName = 'gildong';
let lastName = 'hong';
console.log(`Hi, my name is ${lastName}${firstName}.`); // 'Hi, my name is honggildong.'