주제 : null과 undefined의 차이점을 찾아보기
세부내용
1. 어떨때 값이 null이 되고 undefined으로 저장되는지 가능한 모든 케이스의 js 코드를 작성한다.
2. 각 케이스의 코드상에 저장된 변수가 왜 null이고 undefined인지 원인을 설명한다.
3. 비교연산자를 활용하여 각각의 케이스에 따라 null인지 undefined인지 확인하는 코드를 작성한다.
null
//프로그래밍 언어에서 null은 변수에 값이 없다는 것을 의도적으로 명시(의도적 부재)할 때 사용한다.
//변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미이다.
//이는 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거하는 것을 의미하며, 자바스크립트 엔진은 누구도 참조하지 않은 메모리 공간에 대해 *가비지 콜렉션을 수행할 것이다.
//1. 변수에 null을 할당한 경우
let x = null;
console.log(x === null); //true//2.함수 인자로 null을 전달하는 경우
function printMessage(message) {
console.log(message);
}
printMessage(null === null); // null//3.객체 프로퍼티에 null값을 할당한 경우
const nullobj = { name: "John", age: null };
console.log(nullobj.age === null); // nullundefined
//var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화된다.
//분명한 차이점은 undefined는 변수를 선언만 하더라도 할당되지만 null은 변수를 선언한 후에 null로 값을 바꾼다는 점이다.
//변수나 프로퍼티에 값이 할당되지 않았거나, 존재하지 않는 값에 접근하거나, 명시적으로 'undefined'를 할당했을때
//1. 변수 선언만 하고 초기화하지 않은 경우, 변수의 초깃값이 undefined라는 점이다
var a;
console.log(a === undefined);//2. 함수에서 반환값을 명시적으로 지정하지 않은 경우
function foo() {}
console.log(foo() === undefined);//3. 객체에서 존재하지 않는 프로퍼티에 접근한 경우
const obj = { name: "John", age: 30 };
console.log(obj.address === undefined);
//4. 함수호출 시 반환값이 없는 경우
function bar() {
console.log("Hello, world!");
}
const result = bar(); // 'Hello, world!'가 출력되지만 result에는 undefined가 할당됨
console.log(result === undefined); // undefined이건 번외이지만 재밌는 주제라 한번 검색해보며 만들어봤다.
주제 : 자바스크립트로 오목게임 만들어보기
세부내용
1. Nodejs와 함께 콘솔창에서 실행되도록 사용자 입출력 도구를 사용한다.
2. 오목판 사이즈는 30x30으로 고정한 후 정사각형의 형태의 오목판을 만든다.
3. 사용자 입력 도구에 좌표값 (15,15)라고 입력하여 바둑돌을 둔다.
4. 흑은 1로, 백은 0으로 표기하여 화면에 흑과 백이
번갈아가면서 두도록 입력 도구가 계속 뜨도록 입력 받는다.
5. 오목 규칙에 따라 5줄이 먼저 완성되면 “Game over”와 같이
누가 이겼는지 승패를 알리는 출력을 만든다.
6. 승패가 계속 나지 않을 경우 실행 후 5분이 지나면 자동 종료시킨다.
const readline = require("readline");
const boardSize = 30;
const board = Array.from({ length: boardSize }, () => Array(boardSize).fill(" "));
let currentPlayer = 1; // 흑돌: 1, 백돌: 0
let gameOver = false;
function printBoard() {
for (let row = 0; row < boardSize; row++) {
let rowStr = "";
for (let col = 0; col < boardSize; col++) {
rowStr += board[row][col] + " ";
}
console.log(rowStr);
}
}
function checkWin(row, col) {
// 가로 확인
let count = 1;
let left = col - 1;
let right = col + 1;
while (left >= 0 && board[row][left] === board[row][col]) {
count++;
left--;
}
while (right < boardSize && board[row][right] === board[row][col]) {
count++;
right++;
}
if (count >= 5) return true;
// 세로 확인
count = 1;
let top = row - 1;
let bottom = row + 1;
while (top >= 0 && board[top][col] === board[row][col]) {
count++;
top--;
}
while (bottom < boardSize && board[bottom][col] === board[row][col]) {
count++;
bottom++;
}
if (count >= 5) return true;
// 대각선 확인 (왼쪽 위에서 오른쪽 아래로)
count = 1;
let topLeft = { row: row - 1, col: col - 1 };
let bottomRight = { row: row + 1, col: col + 1 };
while (topLeft.row >= 0 && topLeft.col >= 0 && board[topLeft.row][topLeft.col] === board[row][col]) {
count++;
topLeft.row--;
topLeft.col--;
}
while (bottomRight.row < boardSize && bottomRight.col < boardSize && board[bottomRight.row][bottomRight.col] === board[row][col]) {
count++;
bottomRight.row++;
bottomRight.col++;
}
if (count >= 5) return true;
// 대각선 확인 (오른쪽 위에서 왼쪽 아래로)
count = 1;
let topRight = { row: row - 1, col: col + 1 };
let bottomLeft = { row: row + 1, col: col - 1 };
while (topRight.row >= 0 && topRight.col < boardSize && board[topRight.row][topRight.col] === board[row][col]) {
count++;
topRight.row--;
topRight.col++;
}
while (bottomLeft.row < boardSize && bottomLeft.col >= 0 && board[bottomLeft.row][bottomLeft.col] === board[row][col]) {
count++;
bottomLeft.row++;
bottomLeft.col--;
}
if (count >= 5) return true;
return false;
}
function checkDraw() {
for (let row = 0; row < boardSize; row++) {
for (let col = 0; col < boardSize; col++) {
if (board[row][col] === " ") {
return false;
}
}
}
return true;
}
function promptUserInput() {
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout,
});
rl.question(`Player ${currentPlayer === 1 ? "흑" : "백"}, 좌표를 입력하세요 (예: 15,15): `, (input) => {
rl.close();
const [row, col] = input.split(",").map((coord) => parseInt(coord.trim(), 10));
if (isNaN(row) || isNaN(col) || row < 0 || row >= boardSize || col < 0 || col >= boardSize || board[row][col] !== " ") {
console.log("잘못된 입력입니다. 다시 입력해주세요.");
promptUserInput();
return;
}
board[row][col] = currentPlayer === 1 ? "●" : "○";
printBoard();
if (checkWin(row, col)) {
console.log(`Player ${currentPlayer === 1 ? "흑" : "백"}이 이겼습니다!`);
gameOver = true;
return;
}
if (checkDraw()) {
console.log("무승부입니다. 게임을 종료합니다.");
gameOver = true;
return;
}
currentPlayer = currentPlayer === 1 ? 0 : 1;
promptUserInput();
});
}
function startGame() {
console.log("오목 게임을 시작합니다.");
printBoard();
promptUserInput();
setTimeout(() => {
if (!gameOver) {
console.log("5분이 지났습니다. 게임을 종료합니다.");
process.exit(0);
}
}, 5 * 60 * 1000); // 5분 타이머
}
startGame();
