5일차[웹·서버 기초 / undefined / Null]

진하의 메모장·2025년 1월 8일

공부일기

목록 보기

6/66

2025 / 01 / 08

오늘은 웹 퍼블리싱의 기초와 연산자 / undefined와 Null에 차이에 대해 배웠습니다.
그리고 자바스크립트 자료형에 대한 간단한 실습 예제를 풀었습니다.
undefined와 Null과 실습 예제 풀이에 대해 간략히 풀이를 작성해보겠습니다!

💌 하이브리드 앱

네이티브 앱과 웹 앱의 특성을 결합한 애플리케이션을 의미합니다.
하이브리드 앱은 웹 기술 (HTML, CSS, JavaScript)을 사용해 개발되지만, 네이티브 앱처럼 스마트폰의 기능을 활용할 수 있는 장점이 있습니다.

💌 서버의 조건

서버란?

클라이언트를 거쳐 네트워크를 통해 서비스하는 컴퓨터를 의미합니다.

서버의 조건

고정 주소를 가지고 있을 것

24시간 가동될 것

서비스제공 ( os ) - 동시에 여러사람 접속( 멀티유저 ) / 멀티태스킹

💌 undefined

정의

변수가 선언되었지만, 값이 할당되지 않았을 때 자동으로 부여되는 값을 의미합니다.

1) 타입

undefined 자체는 JavaScript의 원시 타입(Primitive Type) 중 하나입니다.

2) 주요 특징

① 값이 할당되지 않은 변수

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

② 객체에 없는 속성을 접근하려고 할 때

const obj = {};
console.log(obj.nonExistentProperty); // undefined

③ 함수가 명시적으로 값을 반환하지 않을 때

function noReturn() {}
console.log(noReturn()); // undefined

💌 Null

정의

의도적으로 "비어 있다"고 명시한 값을 의미합니다.

1) 타입

null은 값이지만, 특이하게도 typeof null은 "object"로 반환됩니다.
JavaScript 초기 설계의 버그이지만, 호환성을 위해 유지되고 있습니다.

2) 주요 특징

① 개발자가 의도적으로 변수나 속성을 비어 있는 상태로 설정하고자 할 때 사용

let y = null;
console.log(y); // null

주로 객체가 아직 준비되지 않았거나 값을 명시적으로 비우고자 할 때 활용

💌 undefined / Null

undefined는 JavaScript 엔진이 자동으로 할당하므로, 직접 undefined를 설정하기보다는 null을 사용하는 것이 좋습니다.

undefined와 null을 엄격히 구분해야 하는 상황에서는 ===을 사용해 비교하는 것이 안전합니다.

특성	undefined	null
의미	값이 아직 "할당되지 않음"	값이 "없음" (의도적으로 설정)
자동 할당 여부	JavaScript 엔진이 자동으로 부여	개발자가 명시적으로 설정
타입	원시 타입 (undefined)	원시 값 (null), 타입은 "object"
사용 사례	초기화되지 않은 변수, 없는 속성	초기화된 변수, 명시적 비어 있음
비교 (==)	undefined == null → true	undefined === null → false

예제 코드

let a;
let b = null;

console.log(a);            // undefined
console.log(b);            // null

console.log(a == b);       // true (동등 비교)
console.log(a === b);      // false (엄격 비교)

// `undefined`는 엔진에 의해 할당되지만, `null`은 명시적으로 설정
b = undefined;             
console.log(b);            // undefined

b = null;
console.log(b);            // null

💌 실습 예제

Q1. 사용자에게 (문자, 숫자, 논리) 값을 입력받고 해당 값의 타입을 출력하시오.

Q2. 다섯 개의 변수를 선언하고 해당 변수에 임의의 값(숫자, 문자, 논리, Null, undefined)을 할당한 뒤 화면에는 해당 값의 타입을 출력하시오.

Q3. Q1에서 입력 받은 값에서 "논리"값이 Boolean형으로 출력되게 하시오.

Q4. Q3처럼 Boolean이 출력되는게 아니라 Boolean 타입을 가진 true 또는 false를 출력하시오.

Q1. 풀이

사용자에게 (문자, 숫자, 논리) 값을 입력받고 해당 값의 타입을 출력하시오.

각각의 prompt로 아무거나 입력받습니다.

let in1 = prompt("1 입력해 주세요."); 
let in2 = prompt("2 입력해 주세요.");
let in3 = prompt("3 입력해 주세요.");

in11이라는 변수를 선언 후 in1의 타입의 값을 할당합니다.
화면에 in11의 값을 출력하고 줄바꿈을 합니다.
in2와 in3도 똑같이 작성합니다.

let in11 = typeof(in1); 
document.write(in11 + "<br>");

let in22 = typeof(in2); 
document.write(in22 + "<br>"); 

let in33 = typeof(in3);
document.write(in33 + "<br><br>");

결과

prompt는 입력받는 값을 모두 String형으로 인식합니다.

Q2. 풀이

다섯 개의 변수를 선언하고 해당 변수에 임의의 값(숫자, 문자, 논리, null, undefined)을 할당한 뒤 화면에는 해당 값의 타입을 출력하시오.

변수를 선언하고 임의의 값을 할당한 뒤 타입을 확인 후 출력합니다.

var A1 = typeof("이한");
document.write( A1 + " 입니다. <br>");

var A2 = typeof(123); 
document.write(A2 + " 입니다. <br>"); 

var A3 = typeof(true); 
document.write(A3 + " 입니다. <br>"); 

var A4 = typeof(null); 
document.write(A4 + " 입니다. <br>"); 

var A5 = typeof(undefined); 
document.write(A5 + " 입니다. <br><br>");

결과

입력받은 값의 타입이 화면에 출력됩니다.

Q3. 풀이

Q1에서 입력 받은 값에서 "논리"값이 Boolean형으로 출력되게 하시오.

문자의 타입을 지정해 줄 변수를 선언합니다.

let A;

if문의 조건과 isNaN( )을 사용해 in1에 받은 값이 숫자인지 확인합니다.
false일 경우 실행 조건에 부합할 경우 변수 A에 할당합니다.
isNaN은 해당 값이 숫자일 경우 false를 출력합니다.
else if문으로 in1에 받은 값이 true와 false인지 확인합니다.
이 조건으로 논리형을 구분해낼 수 있습니다.
마지막으로 위의 조건이 모두 아닐 경우 else문을 실행합니다.

if(isNaN(in1) == false){ 
	A = "숫자";
	document.write("in1은 " + A + "입니다.<br>"); 
}else if(in1 === "true" || in1 === "false"){ 
	A = "Boolean"; 
	document.write("in1은 " + A + "입니다.<br>");
}else { 
	A = "문자열";
	document.write("in1은 " + A + "입니다.<br>");
}
        

if(isNaN(in2) == false){
	A = "숫자";
	document.write("in2은 " + A + "입니다.<br>");
}else if(in2 === "true" || in2 === "false"){
	A = "Boolean";
	document.write("in2은 " + A + "입니다.<br>");
}else {
	A = "문자열";
	document.write("in2은 " + A + "입니다.<br>");
}
        

if(isNaN(in3) == false){
	 A = "숫자";
	document.write("in3은 " + A + "입니다.<br>");
}else if(in3 === "true" || in3 === "false"){
	A = "Boolean";
	document.write("in3은 " + A + "입니다.<br><br>");

}else {
	A = "문자열";
	document.write("in3은 " + A + "입니다.<br><br>");
}

결과

조건을 통해 입력받은 값의 타입이 판별됩니다.

true와 false를 입력하면 논리형인 Boolean이 출력됩니다.

입력값 - 123 / 안녕 / true

Q4. 풀이

Q3처럼 Boolean이 출력되는게 아니라 Boolean 타입을 가진 true 또는 False를 출력하시오.

번외 문제의 boolean 값을 담을 변수를 선언합니다.

let B;

in1 / in2 / in3에 true가 입력되면 Boolean형의 true를 변수 B에 할당합니다.
in1 / in2 / in3에 false가 입력되면 Boolean형의 false를 변수 B에 할당합니다.

if(in1 === "true" || in2 === "true" || in3 === "true"){ 
	B = Boolean(1); 
	document.write(B + "<br>");
}else if (in1 === "false" || in2 === "false" || in3 === "false"){
	B = Boolean(0); // Boolean형의 false를 변수 B에 할당
	document.write(B + "<br>");
}

Boolean형의 true와 false가 출력되는지 확인하기위해 변수 B의 타입을 확인합니다.

document.write(typeof(B));

결과

해당 조건에 따라 Boolean 타입을 가진 true와 false가 출력됩니다.

💌 전체 코드

<script>

	let A; // 3번의 문자의 타입을 지정해 줄 변수를 선언합니다.
	let B; // 번외 문제의 boolean 값을 담을 변수를 선언합니다.



	// 각각의 prompt로 아무거나 입력받습니다.
	let in1 = prompt("1 입력해 주세요."); 
	let in2 = prompt("2 입력해 주세요.");
	let in3 = prompt("3 입력해 주세요.");



	//1번
	let in11 = typeof(in1); // in11이라는 변수를 선언 후 in1의 타입의 값을 할당
	document.write(in11 + "<br>"); // 화면에 in11의 값을 출력

	let in22 = typeof(in2); // in22이라는 변수를 선언 후 in1의 타입의 값을 할당
	document.write(in22 + "<br>"); // 화면에 in22의 값을 출력

	let in33 = typeof(in3); // in33이라는 변수를 선언 후 in1의 타입의 값을 할당
	document.write(in33 + "<br><br>"); // 화면에 in33의 값을 출력


	//2번
	var A1 = typeof("이한"); // A1이라는 변수를 선언하고 타입을 확인
	document.write( A1 + " 입니다. <br>"); // 출력

	var A2 = typeof(123); // A2이라는 변수를 선언하고 타입을 확인
	document.write(A2 + " 입니다. <br>"); // 출력

	var A3 = typeof(true); // A3이라는 변수를 선언하고 타입을 확인
	document.write(A3 + " 입니다. <br>"); // 출력

	var A4 = typeof(null); // A4이라는 변수를 선언하고 타입을 확인
	document.write(A4 + " 입니다. <br>"); // 출력

	var A5 = typeof(undefined); // A5이라는 변수를 선언하고 타입을 확인
	document.write(A5 + " 입니다. <br><br>"); // 출력



	//3번
	if(isNaN(in1) == false){  // in1에 받은 값이 숫자인지 확인
		A = "숫자"; // false 일 경우 실행 조건에 부합할 경우 변수 A에 할당
		document.write("in1은 " + A + "입니다.<br>"); 
	}else if(in1 === "true" || in1 === "false"){ 
    // in1에 받은 값이 true와 false인지 확인
		A = "Boolean"; // 조건에 부합할 경우 조건에 부합할 경우 변수 A에 할당
		document.write("in1은 " + A + "입니다.<br>");
	}else { 
		A = "문자열";
		document.write("in1은 " + A + "입니다.<br>");
	}
        


	if(isNaN(in2) == false){
		A = "숫자";
		document.write("in2은 " + A + "입니다.<br>");
	}else if(in2 === "true" || in2 === "false"){
		A = "Boolean";
		document.write("in2은 " + A + "입니다.<br>");
	}else {
		A = "문자열";
		document.write("in2은 " + A + "입니다.<br>");
	}
        


	if(isNaN(in3) == false){
		A = "숫자";
		document.write("in3은 " + A + "입니다.<br>");
	}else if(in3 === "true" || in3 === "false"){
		A = "Boolean";
		document.write("in3은 " + A + "입니다.<br><br>");
	}else {
		A = "문자열";
		document.write("in3은 " + A + "입니다.<br><br>");
	}



	// 번외
	if(in1 === "true" || in2 === "true" || in3 === "true"){ 
		B = Boolean(1); // Boolean형의 true를 변수 B에 할당
		document.write(B + "<br>");
	}else if (in1 === "false" || in2 === "false" || in3 === "false"){
		B = Boolean(0); // Boolean형의 false를 변수 B에 할당
	}
        
	document.write(typeof(B));
    
</script>

5일차 후기

오늘 수업에서 어제 작성한 계산기 코드 리뷰를 했는데 강사님께서 제 코드를 보시고 잘 작성했다고 해주셔서 기분이 좋았고 걱정했는데 다행이었습니다.

자료형에 대해 정리하고 문제를 풀어보며 응용력도 올릴 수 있어서 좋았습니다.

아직은 미숙한 점이 많은 것 같고.. 기초를 잘 다질 수 있도록 노력하겠습니다.

undefined / Null의 차이와 원시타입과 오브젝트(객체) 타입에 대해 알 수 있었습니다.

기본적인 자료형에 대한 내용이었음에도 모르는 부분이 있는 것을 보고 벨로그에 정리하며 나의 지식으로 만들 수 있도록 습관화 해야겠다고 생각했습니다. ✧(>o<)ﾉ✧