[새싹 성동 2기] 자바스크립트의 기초: 변수, 자료형, 연산자, 그리고 호이스팅

코딩/자바스크립트

[새싹 성동 2기] 자바스크립트의 기초: 변수, 자료형, 연산자, 그리고 호이스팅

insu90 2024. 11. 12. 20:12

자바스크립트(JavaScript)는 웹 개발에서 가장 중요한 프로그래밍 언어 중 하나입니다. 이 글에서는 자바스크립트의 기초적인 개념인 변수, 자료형, 연산자, 호이스팅 등을 다룰 것입니다. 자바스크립트를 처음 배우는 사람도 쉽게 이해할 수 있도록 간단하고 상세하게 설명하겠습니다.

1. 표현식과 문장, 키워드

표현식(Expression)

표현식은 값을 생성하는 코드 단위입니다. 예를 들어, 5 + 3은 8을 생성하는 표현식입니다. 표현식은 다른 표현식이나 문장에서 사용될 수 있습니다.

문장(Statement)

문장은 작업을 수행하는 코드 단위입니다. 대부분의 문장은 하나 이상의 표현식으로 구성됩니다. 예를 들어, let x = 5 + 3;는 표현식 5 + 3을 사용하여 x에 값을 할당하는 문장입니다. 문장은 세미콜론(;)으로 끝나는 경우가 많습니다.

키워드(Keyword)

특정 작업을 수행하거나 언어의 구조를 정의하는데 사용되는 예약된 단어입니다. 식별자(변수, 함수 등)으로 사용할 수 없습니다.

2. 자바스크립트의 변수와 식별자

식별자(Identifier)

식별자는 변수, 함수, 클래스 등의 이름을 정의하는 데 사용됩니다. 자바스크립트에서는 식별자가 반드시 문자(A-Z, a-z), 밑줄(_), 달러 기호($)로 시작해야 합니다. 숫자(0-9)로 시작할 수 없으며, 대소문자를 구분합니다. 예를 들어 myVariable과 myvariable은 다른 변수로 취급됩니다. 자바스크립트에서는 보통 카멜 케이스를 사용합니다.

변수 선언

자바스크립트에서는 변수를 선언할 때 var, let, const를 사용합니다. 각 키워드는 변수의 특성과 동작 방식이 다릅니다.

var: 변수 선언 시 호이스팅(hoisting)이 발생합니다. 이는 변수 선언이 함수 또는 전체 코드의 맨 위로 끌어올려지는 현상입니다.
let: 변수 선언 시 호이스팅이 발생하지만, 초기화되기 전까지는 변수를 사용할 수 없습니다.
const: 선언과 동시에 값을 할당해야 하며, 그 값은 변경할 수 없습니다.

예시 코드

console.log(x1);    // undefined <== hoisting
var x1;
console.log(x1);    // undefined
x1 = 100;
console.log(x1, typeof (x1));    // 100 number




// console.log(x2); // ReferenceError: Cannot access 'x2' before initialization
let x2;
console.log(x2);    // undefined
x2 = 200;
console.log(x2, typeof (x2));    // 200 number




const x3 = 300;     // const must be initialized
x3 = 400;           // TypeError: Assignment to constant variable.

3. 호이스팅(Hoisting)

호이스팅은 자바스크립트에서 변수와 함수 선언이 코드의 맨 위로 끌어올려지는 현상입니다. 자바스크립트 인터프리터가 코드를 실행하기 전에 변수나 함수 선언을 처리합니다.

변수 호이스팅

var로 선언한 변수는 호이스팅되어 undefined로 초기화됩니다. 반면 let과 const로 선언한 변수는 초기화되기 전까지 사용할 수 없습니다.

//호이스팅 관련
변수 선언이 호이스팅되고, undefined로 초기화 
console.log(a); // undefined
var a = 100;
console.log(a); // 100

위의 코드는 아래와 같이 해석되어 실행
var a;
console.log(a);
a = 100;
console.log(a);

//////////////////////////////

console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 100;
console.log(a); // 100

위 코드는 다음과 같이 동작
let a;              // TDZ 보관
console.log(a);     //  
a = 100;            // TDZ 해제 => 참조가 가능
console.log(a);

함수 호이스팅

함수 선언은 호이스팅되어 코드 어디서든 호출할 수 있습니다. 하지만 함수 표현식은 변수와 마찬가지로 호이스팅되며, 초기화 전에 호출할 수 없습니다.

hello();
function hello() {
    console.log('Hello');
}
hello();


위 코드는 다음과 같이 동작
function hello() {
    console.log('Hello');
}

hello();  //hello 변수의 실행식
hello();  //hello 변수의 실행식2


/////////////


hello();        // TypeError: hello is not a function
var hello = function () {
    console.log('Hello');
};
hello();

// 위 코드는 아래와 같이 동작한다

var hello;
hello();        // TypeError: hello is not a function
hello = function () {
    console.log('Hello');
};
hello();


//////////////////

//let으로 해본 결과

hello();             // ReferenceError: Cannot access 'hello' before initialization
let hello = function () {
    console.log('Hello');
};
hello();

//위에서 한 번 나왔던 레퍼런스 에러와 동일한 이유이다.

4. 자바스크립트의 자료형

자바스크립트에서 변수는 여러 가지 자료형을 가질 수 있습니다. 자바스크립트의 자료형은 크게 원시 값(Primitive)과 객체(Object)로 나눌 수 있습니다.

원시 값(Primitive)

원시 값은 불변(immutable) 데이터로, 자바스크립트에서 가장 기본적인 자료형입니다. 다음은 원시 값의 종류입니다.

Null: 값이 없음을 나타냅니다.
Undefined: 값이 정의되지 않은 상태입니다.
Boolean: true 또는 false 값을 가집니다.
Number: 숫자형 데이터입니다.
String: 문자열 데이터입니다.
Symbol: 유일한 값을 나타내는 데이터입니다.

BigInt: 매우 큰 숫자 데이터를 다룰 수 있는 타입입니다.

Type	typeof return value	Object wrapper
Null 타입	"object"	N/A
Undefined 타입	"undefined"	N/A
Boolean 타입	"boolean"	Boolean
Number 타입	"number"	Number
BigInt 타입	"bigint"	BigInt
String 타입	"string"	String
Symbol 타입	"symbol"	Symbol

객체(Object)

객체는 여러 개의 값(속성)을 하나의 단위로 묶은 데이터 구조입니다. 배열, 함수, 객체 리터럴 등이 객체에 포함됩니다.

자료형 변환

자바스크립트에서는 자료형을 변환할 수 있습니다. 예를 들어, 문자열을 숫자로 변환하거나, 숫자를 문자열로 변환할 수 있습니다. 강제 자료형 변환을 위해서는 String(), Number(), Boolean()과 같은 함수를 사용합니다.

////문자열 변환
const n = 52;
console.log(n, typeof n);                   // 52 number
console.log(String(n), typeof String(n));   // 52 string

console.log(n + 10);                        // 62  <= 52 + 10
console.log(String(n) + 10);                // 5210 <= '52' + 10

const b = true;
console.log(b, typeof b);                   // true boolean
console.log(String(b), typeof String(b));   // true string


////숫자 변환
const s = '123';
console.log(s, typeof s);                   // 123 string
console.log(Number(s), typeof Number(s));   // 123 number

console.log(s + 456);                       // 123456 <= '123' + 456 <= 문자열 연결
console.log(Number(s) + 456);               // 579 <= 123 + 456 <= 숫자 더하기 연산

const x = '숫자';
console.log(x, typeof x);                   // 숫자 string
console.log(Number(x), typeof Number(x));   // NaN number

const t = true;
console.log(t, typeof t);                   // true boolean
console.log(Number(t), typeof Number(t));   // 1 number

const f = false;
console.log(f, typeof f);                   // false boolean
console.log(Number(f), typeof Number(f));   // 0 number


////NaN 판단(숫자 변환 가능 여부 확인용)
console.log(Number("52") == NaN);       	// false
console.log(Number("오십이") == NaN);    	// false
console.log(NaN == NaN);             	// false <= NaN 비교는 무조건 다른 것으로 반환

console.log(isNaN(Number("52")));       	// false
consolejson.log(isNaN(Number("오십이"))); 	// true
console.log(isNaN(NaN));              	// true


//// boolean 변환
console.log(0, Boolean(0)); // 0 false
console.log("", Boolean("")); // "" false
console.log(NaN, Boolean(NaN)); // NaN false
console.log(null, Boolean(null)); // null false
console.log(undefined, Boolean(undefined)); // undefined false
console.log(false, Boolean(false)); // false false

console.log(1, Boolean(1)); // 1 true
console.log(-1, Boolean(-1)); // -1 true
console.log(" ", Boolean(" ")); // " " true
console.log("0", Boolean("0")); // "0" true

console.log([], Boolean([])); // [] true
console.log({}, Boolean({})); // {} true


//// 자동 자료형 변환
// 숫자와 문자열에 + 연산자를 사용하면 숫자를 문자열로 자동 변환
// + 연산자는 문자열 연결 연산자로 동작
console.log(10 + 20); // 30
console.log('10' + 20); // 1020 <= '10' + '20'
console.log(10 + '20'); // 1020 <= '10' + '20'
console.log('10' + '20'); // 1020 <= '10' + '20'

console.log(10 + 20 + '30'); // 3030 <= (10 + 20) + '30'
console.log('10' + 20 + 30); // 102030 <= '1020' + 30 <= ('10' + 20) + 30


// 수자와 문자열에 +가 아닌 다른 연산자를 사용하면 문자열을 숫자로 자동 변환
console.log(20 - '10'); // 10 <= 20 - 10
console.log(20 * '10'); // 200 <= 20 * 10
console.log(20 / '10'); // 2 <= 20 / 10
console.log(20 % '10'); // 0 <= 20 % 10

console.log('20' - 10); // 10 <= 20 - 10
console.log('20' * 10); // 200 <= 20 * 10
console.log('20' / 10); // 2 <= 20 / 10
console.log('20' % 10); // 0 <= 20 % 10


// 부정 연산자를 두 번 사용하면 Boolean() 함수를 사용하는 것과 동일한 결과를 얻을 수 있다.
console.log(Boolean(0), !!0); 			// false false
console.log(Boolean(""), !!""); 			// false false
console.log(Boolean(null), !!null); 			// false false
console.log(Boolean(undefined), !!undefined); 	// false false
console.log(Boolean(NaN), !!NaN); 			// false false
console.log(Boolean(false), !!false); 		// false false

console.log(Boolean(1), !!1); 			// true true  
console.log(Boolean("0"), !!"0"); 			// true true

console.log(Boolean(Number('1234')), !!Number('1234')); // true true    
console.log(Boolean(Number('숫자')), !!Number('숫자')); // false false

5. 자바스크립트의 연산자

자바스크립트에서 연산자는 값을 계산하는 데 사용됩니다. 주요 연산자에는 산술 연산자, 비교 연산자, 논리 연산자 등이 있습니다.

산술 연산자

산술 연산자는 두 값을 계산할 때 사용됩니다. 예를 들어, 덧셈, 뺄셈, 곱셈, 나눗셈 등이 있습니다.

console.log(`7 / 5 = ${7 / 5}`);                // 7 / 5 = 1.4
console.log(`7 % 5 = ${7 % 5}`);                // 7 % 5 = 2    <== 나머지 연산자


// 나머지 몫을 구할 때 Math.floor() 함수를 사용하여 소수점 이하를 버릴 수 있습니다.
console.log(`7 // 5 = ${Math.floor(7 / 5)}`);   // 7 // 5 = 1

// 나머지 연산의 부호는 왼쪽 피연산자의 부호를 따른다.
console.log(`4 % 3 = ${4 % 3}`);    // 4 % 3 = 1
console.log(`4 % -3 = ${4 % -3}`);  // 4 % -3 = 1
console.log(`-4 % 3 = ${-4 % 3}`);  // -4 % 3 = -1
console.log(`-4 % -3 = ${-4 % -3}`);// -4 % -3 = -1

// 문자열 결합
console.log('Hello' + 'World'); // HelloWorld


// 문장열의 일부를 선택 => 문자열[인덱스]
const message = "Hello, 자바스크립트!!";
console.log(message[0]); // H
console.log(message[7]); // 자  <== 영문, 숫자, 공백, 한글 모두 한 글자로 취급
console.log(message[99]);   // undefined <= 범위 밖의 경우


////후위 연산자와 전위 연산자
let i = 100;
console.log("#1", i);     // #1 100
if (i++ > 100) {          //후위 연산자. postfix. 평가하는데 사용 한 후 i를 증가시킨다.
    console.log("#2", i); // 실행되지 않음
}
console.log("#3", i);     // #3 101


i = 100;
console.log("#4", i);     // #4 100
if (++i > 100) {          //전위 연산자. 값을 먼저 증가시키고 평가한다.(비교한다)
    console.log("#5", i); // #5 101
}
console.log("#6", i);     // #6 101

비교 연산자

비교 연산자는 두 값을 비교하고, 그 결과를 true 또는 false로 반환합니다. 대표적인 비교 연산자에는 ==, ===, !=, !==, >, <, >=, <= 등이 있습니다.

let n = 100;
let s = "100";

console.log(n == s);  // true (값이 같으므로)
console.log(n === s);  // false (타입이 다르므로)


////동등 연산자(equality operator) vs 일치 연산자(strict equality operator)
let n = 100;
let s = "100";
console.log(typeof (n));    // number
console.log(typeof (s));    // string

if (n == s) {
    console.log("일치");    // 일치 => 두 변수의 값을 비교 => 동등 연산자
} else {
    console.log("불일치");
}

if (n === s) {              // if (typeof(n) == typeof(s) && n == s)
    console.log("일치");
} else {
    console.log("불일치");  // 불일치 => 두 변수의 타입과 값을 비교 => 일치 연산자
}


////삼항 연산자 => 조건 ? 참 : 거짓
et x = 100;

if (x > 100) {
    console.log('100보다 큽니다.');
} else {
    console.log('100보다 작거나 같습니다.');
}

// 동일한 로직을 삼항 연산자로 표현
x > 100 ? console.log('100보다 큽니다.') : console.log('100보다 작거나 같습니다.');

논리 연산자

논리 연산자는 true 또는 false 값을 결합하거나 반전시키는 데 사용됩니다. 대표적인 논리 연산자에는 &&, ||, ! 등이 있습니다.

console.log(true && false);  // false
console.log(true || false);  // true
console.log(!true);  // false

*생성형 AI 활용한 클라우드&보안 전문가 양성캠프 과정의 교육내용 정리 자료입니다.

저작자표시 비영리 변경금지

'코딩 > 자바스크립트' 카테고리의 다른 글

[새싹 성동 2기] JavaScript 전개 연산자(Spread Operator)와 비구조화(Destructuring) 정리 (0)	2024.11.15
[새싹 성동 2기] JavaScript에서 JSON 데이터 처리 및 객체 속성명 활용 (4)	2024.11.15
[새싹 성동 2기] 자바스크립트를 이용한 간단한 코딩 실습 (0)	2024.11.12
[새싹 성동 2기] 자바스크립트에서 함수 정의와 활용법 (2)	2024.11.12
[새싹 성동 2기] 코딩을 위한 준비 작업 - 노드.js와 VSCode 설치 방법 (4)	2024.11.09

현재글[새싹 성동 2기] 자바스크립트의 기초: 변수, 자료형, 연산자, 그리고 호이스팅

insu90 님의 블로그

insu90 님의 블로그 입니다.

fastapi, CloudWatch, Python, AWS, RDS, 네트워크, github, vscode, Wordpress, 보안관제, react, 리액트, JavaScript, 보안, javascripts, 클라우드, DB, CICD, 코딩, JavsScript,

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

insu90 님의 블로그