JavaScript

특징

• 자바스크립트는 객체 기반의 스크립트 언어다.
• 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터언어다.
• 자바스크립트는 Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있다.

인터프리터 언어

• 컴파일 작업을 거치지 않고, 소스 코드를 바로 실행할 수 있는 언어

데이터 타입

원시 타입

데이터 타입	설명
숫자타입(Number)	정수와 실수 구분 없는 숫자 타입
문자열타입(String)	문자열, 텍스트 데이터
불리언타입(Boolean)	참(true), 거짓(false)
undefined 타입	값을 할당하지 않은 변수에 할당되는 값
null 타입	어떤 값이 의도적으로 비어있음을 표현
심볼 타입	유일하며 변경할수 없는 값, 객체의 키로 유일한 식별자를 만들고 싶을 때 사용

Number

• 숫자를 나타내는 타입
• 정수, 실수, 특별한 값인 NaN(Not a Number), Infinity 및 -Infinity를 포함한다.

String

• 문자열을 나타내는 타입
• 작은 따옴표('), 큰 따옴표("), 혹은 백틱으로 묶인 문자의 집합이다.

Boolean

논리적인 값을 나타내는 타입

• true 혹은 false 값을 가질 수 있다.

Null

• 변수에 값이 없음을 명시적으로 나타내는 타입

Undefined

• 변수가 선언되었지만 아직 값이 할당되지 않은 상태를 나타내는 타입

Symbol

• 고유하고 수정 불가능한 데이터 타입

BigInt

• 매우 큰 정수를 나타내는 데 사용하는 타입

객체 타입(object type)

Object

• 여러 가지 값과 함수를 포함할 수 있는 복합 타입
• 배열, 함수, 날짜, 정규 표현식 등 다양한 내장 객체를 포함한다.

---

변수(variable)

데이터(data)를 저장할 수 있는 메모리 공간

• let
  • 변수를 선언하고 재할당도 가능 언제든 값을 바꿀 수 있음
• const
  • 변수에 한번 값을 할당하면 다시 값을 바꿀 수 없음
• var
  • let의 옛날버전. let과 작동원리는 같으나 호이스팅과같은 문제가 있음

---

암묵적 타입 변환

자바스크립트 엔진이 개발자의 의도와 상관없이 코드 문맥을 파악하여 강제적으로 타입 변환을 실행하는 것

문자열 타입으로 변환

• + 연산자는 피연산자 중 하나 이상의 문자가 포함되면 문자열로 타입을 변환한다.

var a = 1 + '2'
console.log(a) // '12'
console.log(typeof a) // string

var b = 0 + ''
console.log(b) // '0'
console.log(typeof b) // string

var c = true + ''
console.log(c) // 'true'
console.log(typeof c) // string

var d = null + ''
console.log(d) // 'null'
console.log(typeof d) // string

var e = ({}) + ''
console.log(e) // [object Object]
console.log(typeof e) // string

숫자 타입으로 변환

• +가 아닌 산술 연산자의 경우 숫자타입이 아닌 피연산자를 암묵적으로 숫자로 변환한다.

console.log(6 - '3')  // 3
console.log(6 * '3')  // 18
console.log(6 / '3')  // 2
console.log(6 / '삼') // NaN

• 크기를 비교하는 >, < 연산자는 숫자타입이 아닌 피연산자를 암묵적으로 숫자로 변환한다.

console.log('5' > 3) // true
console.log('5' < '3') // false
console.log(3 <= '5') // true 

• + 단항 연산자는 숫자타입이 아닌 피연산자를 암묵적으로 숫자로 변환한다.

console.log(+'5') // 5
console.log(+'') // 0
console.log(+'오') // NaN

console.log(+true) // 1
console.log(+false) // 0

console.log(+null) // 0

console.log(+undefined) // NaN
console.log(+(Symbol())) // TypeError: Cannot convert a Symbol value to a number

console.log(+{}) // NaN
console.log(+[]) // 0

불리언 타입으로 변환

• 자바스크립트 엔진은 제어문의 조건을 불리언 타입으로 암묵적으로 타입변환한다.

• False로 평가되는 값 = (false, undefined, null, 0, '', NaN)

var a = false
var b = undefined
var c = null
var d = 0
var e = ''
var f = NaN

if(a) console.log('표시안됨')
if(b) console.log('표시안됨')
if(c) console.log('표시안됨')
if(d) console.log('표시안됨')
if(e) console.log('표시안됨')
if(f) console.log('표시안됨')

---

명시적 타입 변환

자바스크립트 내장 객체를 이용해 명시적으로 타입을 변경하는 것을 말한다.

문자열 타입으로 변환

• 내장 함수 또는 Object.prototype.toString 메서드를 사용한다.

//내장 함수 사용
console.log(String(5))  // "5"
console.log(String(NaN))  // "NaN"

console.log(String(true)) // "true"
console.log(String(false)) // "false"

//Object.prototype.toString 메서드를 사용
console.log((5).toString()); // "5"
console.log((NaN).toString()); // "NaN"

console.log((true).toString()) // "true"
console.log((false).toString()) // "false"

숫자 타입으로 변환

• Number 또는 parseInt, parsFloat 를 사용한다.

console.log(Number('0')) // 0
console.log(Number('1.5')) // 1.5

console.log(Number(true)) // 1
console.log(Number(false)) // 0

//parseInt, parsFloat (문자열만 변환가능)
console.log(parseInt('0')) // 0
console.log(parseInt('1.5')) // 1
console.log(parseFloat('1.5')) // 1.5

불리언 타입으로 변환

• Boolean 함수로 변환

console.log(Boolean('a')) // true
console.log(Boolean('')) // false
console.log(Boolean('false')) // true

console.log(Boolean(0)) // false
console.log(Boolean(1)) // true
console.log(Boolean(NaN)) // false
console.log(Boolean(Infinity)) // true

console.log(Boolean(null)) // false
console.log(Boolean(undefined)) // false

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

---

실습 - 오목게임 만들기

1. Nodejs와 함께 콘솔창에서 실행되도록 사용자 입출력 도구를 사용한다.
2. 오목판 사이즈는 30x30으로 고정한 후 정사각형의 형태의 오목판을 만든다.
3. 사용자 입력 도구에 좌표값 (15,15)라고 입력하여 바둑돌을 둔다.
4. 흑은 1로, 백은 0으로 표기하여 화면에 흑과 백이
   번갈아가면서 두도록 입력 도구가 계속 뜨도록 입력 받는다.
5. 오목 규칙에 따라 5줄이 먼저 완성되면 “Game over”와 같이
   누가 이겼는지 승패를 알리는 출력을 만든다.
6. 승패가 계속 나지 않을 경우 실행 후 5분이 지나면 자동 종료시킨다.

아직 미완성이다.

• 6번 기능 추가 안됨
• 4중 반복문을 사용중이라 개선이 필요해 보인다.

// 파이썬의 input() 함수 역할을 하는 사용자 입력을 받는 Node.js 기능
const readline = require('readline');
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

console.log('행, 열 <- 왼쪽과 같은 양식으로 좌표값을 입력해주세요.')
console.log('ex) 1,1 or 1, 1 or 7, 3 or 7,3 등')

let arr = new Array(30);
for (let i = 0; i < arr.length; i++) {
    arr[i] = new Array(30).fill('');
}

let turn = 0;

// 입력 받고 최신화 된 보드 출력해주는 메서드
function printBoard() {
  for(let i = 0; i < 30; i++) {
      console.log(arr[i].map(cell => cell === '' ? '*' : cell === '흑' ? 1 : 0).join(' '));
  }
}

/*
 이긴사람 있는지 확인하는 메서드
 가로, 세로, 대각석 탐색

 cf. 4중 반복문 오반데... 나중에 수정...
*/
function checkWin() {
  const directions = [[0, 1], [1, 0], [1, 1], [-1, 1]];

  for(let i = 0; i < 30; i++) {
    for(let j = 0; j < 30; j++) {
      if(arr[i][j] !== '') {
        for(let direction of directions) {
          if(checkLine(i, j, direction)) {
            return true;
          }
        }
      }
    }
  }
  return false;
}


// 한 방향(라인)에 대해 오목이 완성되었는지 확인하는 메서드
function checkLine(x, y, direction) {
    let i = x, j = y, count = 0;
    while(i >= 0 && i < 30 && j >= 0 && j < 30 && arr[i][j] === arr[x][y]) {
        count++;
        i += direction[0];
        j += direction[1];
    }
    return count === 5;
}


/*
    입력값 받아서 보드에 넣는 실질적인 게임 메서드
    + 예외처리
*/
function play() {
    let player = turn % 2 == 0 ? '백' : '흑'; // w for white, b for black
    rl.question(`${player === '흑' ? '흑' : '백'}색 돌을 놓을 좌표를 입력하세요 :`, (inputValue) => {
        let coords = inputValue.split(',');
        let x = parseInt(coords[0]);
        let y = parseInt(coords[1]);

        // 입력값 범위 초과에 대한 예외처리
        if(x < 0 || x >= 30 || y < 0 || y >= 30) {
            console.log("0이상 30미만 값을 입력해주세요.");
            play();
            return;
        }

        // 이미 둔 자리 or 잘못된 입력양식에 대한 예외처리
        if(arr[x][y] !== '') {
            if(arr[x][y] === '흑' || arr[x][y] === '백') {
                console.log("이미 돌을 놓은 자리입니다.");
            }else {
                console.log("올바른 좌표값을 입력하세요.");
                console.log("예시: 1,3 or 1, 3 or 10, 15 등등");
                console.log("잘못된 예시: [1,3] or 1,     2 or 1.2");
            }
            play();
            return;
        }

        arr[x][y] = player;
        printBoard();

        if(checkWin()) {
            console.log('Game over')
            console.log(`${player === '흑' ? '흑' : '백'}색돌이 승리하였습니다!! `);
            rl.close();
        } else {
            turn++;
            play();
        }
    });
}

play();

---

본 후기는 정보통신산업진흥원(NIPA)에서 주관하는 <AI 서비스 완성! AI+웹개발 취업캠프 - 프론트엔드&백엔드> 과정 학습/프로젝트/과제 기록으로 작성 되었습니다.
#정보통신산업진흥원 #NIPA #AI교육 #프로젝트 #유데미 #IT개발캠프 #개발자부트캠프 #프론트엔드 #백엔드 #AI웹개발취업캠프 #취업캠프 #개발취업캠프