[TIL] DAY 8 - Javascript 기초 1 (강의 복습)

🗓️ 수업 일자 : 2025.09.29

✨ 오늘의 수업 평가 :  [ REVIEW ]   기본기 다시 점검 완료! 🧩📚

 

 

📝  오늘 배운 내용  
- Javascript 기초 : 데이터 타입, truthy와 falsy, AND와 OR, 연산자, 변수와 스코프

 

자바스크립트 이미지!

 

---

1. Javascript 기초 - 데이터 타입

Javascript 타입은 크게 [원시형 / 참조형] 으로 나뉩니다. 각각의 타입에 속해있는 데이터 타입에 대해 알아보겠습니다.

 

원시형 데이터 타입

명칭	설명	예시
String, 문자열	우리가 쓰는 한글, 영문을 모두 문자열이라고 칭함	"Hello Javascript!" ;
Number, 숫자열	음수, 양수, 정수, 소수, Nan, infinity 등 숫자로 된 데이터를 칭함 (Nan : 숫자열 타입이지만 "숫자가 아님"을 의미) (infinity : 수학적으로 무한대를 표현해야 할 때 사용)	3.14 ; -15 ; Nan; // Not a number의 약자
Boolean	true, false 단 두가지로 사용되는 값. 흑백논리처럼 true가 아니면 false 이고, false가 아니면 true임	console.log(1+1==2);   // true 출력 console.log(1+1==3);   // false 출력
undefined	변수에 값이 아직 할당되지 않은 경우, 해당 값을 출력	let nodata ; console.log( nodata ) ; // undefined 출력
null	개발자가 값을 일부러 비워 둔 상태를 의미. 비워둔 이유에는 여러가지가 있을 수 있지만  아직 값을 모르는 경우에도 이렇게 null을 넣어둠.	const newdata = null ; console.log( newdata ) ; // null 출력
symbol	자바스크립트 내에서 고유의 값을 가진 변수를 만들 때 사용	const user = Symbol("unique");
bigInt	아주 큰 정수를 만들기 위해 나온 데이터. 기존의 자바스크립트가 만들 수 있는 정수의 크기는  [ 2**53-1 ~ -(2**53-1) ]였으나, 이보다 더 큰 정수를 사용하기 위하여 만듬	10n; 2n; 1.2n // error

 

 

참조형 데이터 타입

명칭	설명	예시
Array, 배열	대괄호 안에 ","를 사용하여 원시형 / 참조형 데이터 타입을 줄줄이 나열하여 사용.	const arr = ['a',1,true,undefined,null]
Object, 객체	중괄호 안에 Key(키)와 Value(속성값)로 구성된 속성(Property,프로퍼티)이 들어있는 형태.	const obj = {                       name : "kimday",                       birth : 22,                     }
function, 함수	재사용 가능한 로직을 담는 참조형 데이터. 자세한 설명은 맨 아래 "함수" 내용 참고	function test(){    console.log("hello world!"); } test() // hello world! 출력

 

 

 

2. Javascript 기초 -  truthy와 falsy

명칭	설명	예시
truthy	값 자체가 boolean 타입은 아니지만, boolean에서 사용되는 true처럼 처리 될 수 있는 값으로 falsy 한 값 7개를 제외한 모든 값을 truthy로 취급하기 때문에 falsy 값을 알고 있으면 됨!	true, "hi", "0"(문자열 0), 500, [] (빈 배열), {} (빈 객체) 등
falsy	값 자체가 boolean 타입은 아니지만, boolean에서 사용되는 false 처럼 처리 될 수 있는 값	false, 0, -0, 0n, "", null, undefined, NaN

 

truthy 와 falsy는 단독으로 사용 되는 것이 아니라, if문 혹은 while 문과 함께 사용하거나, 다음에 나오는 AND & OR 연산자를 활용하는 등 심화 작업에서 사용되는 편 입니다. 따라서 현재로써는 이런 개념이 있다고 알고 가면 좋겠습니다 😉 

 

 

 

3. Javascript 기초 - AND와 OR 

• AND : "&&" 를 사용하여 값을 판단, 좌우에 오는 값이 모두 True 일 때 True 출력
• OR : "||" 를 사용하여 값을 판단, 좌우에 오는 값 중 하나라도 True 일때 True 출력

// AND 기초 예시
console.log(true && true);   // true 출력
console.log(true && false);  // false 출력
console.log(false && true);  // false 출력
console.log(false && false); // false 출력

// OR 기초 예시
console.log(true || true);   // true 출력
console.log(true || false);  // true 출력
console.log(false || true);  // true 출력
console.log(false || false); // false 출력

 

 [ 심화 1 : Truthy 와 Falsy 로 판단하기 ] 

• AND 는 왼쪽이 Truthy 이면 오른쪽 값에 따라 값이 달라짐.
• AND 는 왼쪽이 Falsy 이면 다음 값을 보지 않고 바로 Falsy 값을  출력함
• OR 는 왼쪽이 Truthy 이면 다음 값을 보지않고 바로 왼쪽 값 반환
• OR 는 왼쪽이 Falsy 이면 오른쪽 값에 따라 값이 달라짐.

// AND 심화 예시
console.log(false && "hello"); // false (왼쪽 falsy)
console.log(0 && "world");     // 0
console.log("hi" && "world");  // "world" (둘 다 truthy → 오른쪽 반환)

// OR 심화 예시
console.log(true || "hello");   // true (왼쪽 truthy)
console.log("hi" || "world");   // "hi"
console.log(null || "text"); // "text" (왼쪽 falsy)

 

 [ 심화 2 : 다중 판단하기 ] 

• AND, OR 연산자는 왼쪽에 오는 값부터 판단하여, 나머지 값을 순차적으로 판단 해 나감 
• AND와 OR 연산자가 혼용되어 사용 된다면 괄호 안에 있는 내용 먼저 처리 되고, 괄호가 없는 경우 AND 연산자의 우선순위가 높음 

// 여러 개의 연산자가 사용되는 예시 
console.log( true && false && true ) // false 출력 
console.log( true && true && true && false && true ) // false 출력 

console.log( true || false || false ) // true 출력 
console.log( false || false || false || false || true ) // true 출력 


// 연산자가 혼용 되는 경우 예시 
console.log( true && false || true ); // (true && false) || true 과 같은 결과, true 출력
console.log( true && (false || true) ); // 괄호가 있으면 해당 계산부터 진행, true 출력

 

4. Javascript 기초 - 연산자

자바스크립트에서 연산자란 우리가 흔히 알고 있는 사칙 연산과 함께 변형되어 사용되는 추가 연산자들이 있습니다. 아래의 표로 하나씩 차근차근 알아보겠습니다 😄

 

기초 연산자

부호	설명	예시
+	좌,우 값 더하기	a = 5 + 2 ; // a = 7
-	좌측 값에서 우측 값 빼기	a = 5 - 2 ;  // a = 3
*	좌, 우 값 곱하기	a = 5 * 2 ;  // a = 10
/	좌측 값에서 우측 값 나누기	a = 5 / 2 ;  // a = 2.5
%	좌측 값에서 우측 값 나눈 뒤 나머지 값 저장	a = 5 + 2 ;  // a = 1

 

복합 대입 연산자 

부호	설명	예시 ( a = 5 )
+=	좌측(주로 변수) 값에 더해서 대입	a += 2 ;  // a = 7
-=	좌측 값에 빼고 대입	a -= 2 ;  // a = 3
*=	좌측 값에 곱해서 대입	a *= 2 ;  // a = 10
/=	좌측 값에 나누고 대입	a /= 2 ;  // a = 2.5
%=	좌측 값에 나눈 후 나머지 값을 대입	a %= 2 ;  // a = 1
**=	좌측 값에 거듭제곱 한 뒤 대입	a **= 3 ;  // a = 5*5*5 = 25

 

기타 연산자 

연산자 이름	부호	설명	예시
동등 연산자	==	좌우의 값이 같은지 판단. 단 숫자 1과 문자"1"도 같다고 판단함	console.log("hi" == "hi"); // true 출력 console.log("1" == 1); // true 출력
일치 연산자	===	좌우의 값이 같은지 판단하는데, 데이터 형식까지 함께 판단하므로  숫자 1과 문자"1"이 다르다고 판단 함.	console.log("hi" === "hi"); // true 출력 console.log(25 === 25); // true 출력 console.log("1" === 1); // false 출력
증감 연산자	++	숫자인 값에 1씩 증가 시킴	let a = 5; a++; // → a + 1 = 6 a++; // → a + 1 = 7 console.log( a ) // a가 7이 됨
	--	숫자인 값에 1씩 감소 시킴	let a = 5; a--; // → a - 1 = 4 a--; // → a - 1 = 3 console.log( a ) // a가 3이 됨

 

 

 

5. Javascript 기초 - 변수와 스코프

해당 내용을 나가기 전에 "변수" 와 "상수" 에 대해 먼저 알아봐야 합니다!

• 상수 : 한번의 선언으로 값이 변할 수 없는 값.
• 변수 : 언제든 값이 변할 수 있는 값 

자바스크립트에서는 과거에 "var"라는 절대적인 명령어가 존재했고, 변수든 상수든 구분 없이 "var"로 선언 하였습니다. 

하지만 "var"의 치명적인 단점이 "var"를 사용해 선언하면 개발자가 원치 않는 곳에서도 값이 바뀌게 되는 엄청난 일들이 벌어졌습니다. (호이스팅 문제도 있지만, 지금 상황에서는 너무 어려운 개념이므로 언급하지 않겠습니다^^)

var myId = "kimday";

// ... 여러 객체, 함수, 모듈이 지나가고

var login = true;
var myId = login;

// myId 값이 바뀌면서 나는 로그인 계정을 잃었다.. 😵

 

 

그래서 등장한 것이 바로 const 와 let 이라는 명령어 입니다! 

• const : 상수의 특징처럼 재할당이 안되는 변수. 명령어 const 와 함께 변수명 , 변수값을 모두 같이 입력하여 사용함.
              (객체나 배열을 const로 선언하면 일부 값이 변경 가능합니다만, 일단은 skip 할게요)
• let : 변수를 선언 할 때 쓰는 명령어로, let 명령어 다음에 변수명을 적음. 선언 당시 변수값이 없으면 할당하지 않아도 됨.  

// 상수 선언 
const myId = "kimday";

// .. 여러 함수와 객체 등등을 지나치고

const myId = login; // error 발생!!! 🚨

// =====================================

let myInfo ;

// .. 여러 함수와 객체 등등을 지나치고

myInfo = {
	height : 160,
    birth : 22
};  // 나중에 값을 넣어줌(=할당) 해도 됨

 

 

 

그럼 이제 스코프는 무엇이냐? 변수가 [살아있는 공간] 🪽 으로 생각하시면 되겠습니다 !

 

🤔 : 아니 무슨 코드가 살아있어? 

 

라고 생각하실 것 같아서 바로 예제 보여드리겠습니다.

function test(){

	const testA = "hello";
    
    console.log(testA);

}

test(); // "hello" 출력

const testA = "world";
console.log(testA); // "world" 출력

일단, 분명 변수명으로 동일한 이름을 못 쓴다고 했는데 testA를 두 번이나 썻지만 에러가 나지 않았고, 정상 작동하며 각각 다른 값이 출력되는 것을 확인 할 수 있습니다. 
이게 바로 "스코프" 덕분입니다! function test() 안에서 사용한 const testA라는 녀석은 { } 중괄호 안에서만 살아있고, { } 중괄호에 속한 것 없이 const testA 한 녀석은 파일 전체에 살아있기 때문이죠! 

 

그래서 { } 중괄호 안에 쓴 testA 같은 변수를 지역 변수라고 하고, { } 중괄호 안에 쓰지 않은 변수를 전역 변수 라고 합니다.

여기서 말하는 { } 중괄호는 블록스코프라고 해서 함수, if문, for문등이 있으며, 동일하게 { } 중괄호 안에서 선언된 변수를 지역변수로 취급 합니다.

내용이 많이 복잡하지만 중요한건 { } 중괄호 안에서 선언했냐, 안했냐 가 키포인트 입니다 😉

---

 

📃 내일은 뭘 배울까 🤔

- Javascript 함수 & 내장함수

- Javascript 문법과 표현