[AI 웹개발 취업캠프] 6Day - JS 기초(1)

강의

JavaScript 개요

JavaScript의 특징

1. 객체 기반의 스크립트 언어
2. 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어
3. Node.js와 같은 프레임워크를 사용하면 서버 프로그래밍으로 사용가능

인터프리터 언어

C언어와 같은 언어는 소스 파일를 컴파일하여 사용자가 실행할 수 있는 실행파일로 만들어 사용

하지만 인터프리터 언어는 이러한 컴파일 작업을 거치지 않는다.

자바스크립트는 웹 브라우저에 포함된 자바스크립트 인터프리터가 소스 코드를 직접 해석하여 바로 실행해 줌

DOM(Document Objects Model)

HTML, XML 와 같은 문서를 프로그래밍 언어를 이용해 표현, 저장, 조작 등.. 이러한 것들을 할 수 있도록 해주는 인터페이스

Node.js

Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임이다.

1. V8이라는 JS 엔진 위에서 동작하는 자바스크립트 런타임
2. 비동기 이벤트 주도 JavaScript 런타임
3. 확장성 있는 네트워크 애플리케이션을 만들 수 있도록 설계됨

Web API

Web은 서비스를 제공하는 사람과 서비스를 구매하고자 하는 사람이 서로 만나는 공간

API는 사물 또는 사람의 의사소통이 가능하도록 해주는 규칙,

애플리케이션 간의 인터페이스를 통해 프로그래밍 언어로 소통 할 수 있는 모든 방식

JavaScript 의 console.log

console.log() 는 자바스크립트의 기본 내장 함수로

웹 API 와 Node.js에서 모두 사용된다. 그러나 사용 방법과 결과 출력 위치가 다름

웹 API 의 console.log()

웹 브라우저 환경에서 제공하는 API를 의미한다. 웹 브라우저에서 JS를 실행할때

개발자도구에서 console.log()를 사용하여 브라우저 콘솔에 메시지를 출력함

Node.js 의 console.log()

서버사이드에서 JS를 실행하는 런타임 환경의 터미널 또는 콘솔에 메시지를 출력함

Javascript의 기초 문법

타입 (Type)

프로그램에서 다룰 수 있는 값의 종류

자바스크립트의 타입은 크게 원시 타입과 객체 타임으로 구분

원시 타입(primitive type)

1. 숫자(number)
2. 문자열(string)
3. 불리언(boolean)
4. undefined

객체 타입(object type)

변수 (variable)

변수 선언 키워드: var, let, const

• 키워드 우측에 변수의 이름을 작성
• var 는 ES6 이후 거의 사용안함
  • 변수를 한 번 더 선언해도 에러가 발생하지 않고 다른 값을 출력함.
• let 는 var를 보완하기 위해 추가됨
  • 재선언 X , 재할당 O

• const 는 ES6에서 let과 함께 추가됨
  • 재선언 X , 재할당 x

연산자 (operator)

산술 연산자(arithmetic operator)

산술 연산자	설명
+	왼쪽의 오른쪽의 값을 더함
-	왼쪽에 오른쪽의 값을 뺌
*	왼쪽에 오른쪽의 값을 곱함
/	왼쪽에 오른쪽의 값으로 나눔
%	왼쪽에 오른쪽의 값으로 나눈 후, 그 나머지

 

대입 연산자(assignment operator)

대입 연산자	설명
=	왼쪽에 오른쪽 값을 대입함
+=	왼쪽에 오른쪽 값을 더하고 그 값을 왼쪽에 대입함
-=	왼쪽에 오른쪽 값을 빼고 그 값을 왼쪽에 대입함
*=	왼쪽에 오른쪽 값을 곱하고 그 값을 왼쪽에 대입함
/=	왼쪽에 오른쪽 값을 나누고 그 값을 왼쪽에 대입함

 

비교 연산자(comparison operator)

비교 연산자	설명
==	왼쪽과 오른쪽 값이 같으면 참
===	왼쪽과 오른쪽 값이 같고 타입이 같으면 참
!=	왼쪽과 오른쪽 값이 같지않으면 참
!==	왼쪽과 오른쪽 값이 같지않거나 타입이 다르면 참
>	왼쪽이 오른쪽보다 크면 참
>=	왼쪽이 오른쪽보다 크거나 같으면 참
<	왼쪽이 오른쪽보다 작으면 참
<=	왼쪽이 오른쪽보다 작거나 같으면 참

---

과제

과제 (2)

null 과 undefined의 차이점 찾아보기

원래는 케이스 5번까지만 생각나서 적었는데 스터디 모임?? 에서 다른 케이스들을 알려줘서 2개만 추가해 봤다

그게 6,7 케이스

코드

// ? 2023년 07월 24일 과제 (2)
// ? 주제 : null과 undefined의 차이점을 찾아보기
// ? 세부내용
// ? 1. 어떨때 값이 null이 되고 undefined으로 저장되는지 가능한 모든 케이스의 js 코드를 작성한다.
// ? 2. 각 케이스의 코드상에 저장된 변수가 왜 null이고 undefined인지 원인을 설명한다.
// ? 3. 비교연산자를 활용하여 각각의 케이스에 따라 null인지 undefined인지 확인하는 코드를 작성한다.
// ? 제출 방법 : 작성된 js 파일과 내용을 설명할 수 있는 텍스트를 주석을 활용하여 기입한다.

// TODO: 1. 어떨때 값이 null이 되고 undefined으로 저장되는지 가능한 모든 케이스의 js 코드를 작성한다.
// TODO: 2. 각 케이스의 코드상에 저장된 변수가 왜 null이고 undefined인지 원인을 설명한다.
// * 케이스 1: 변수를 선언만 하고 값 할당 안하면 undefined
let null_undefined_case_one;
console.log("케이스 1:", null_undefined_case_one);

// * 케이스 2: 변수에 명시적으로 undefined 값을 할당
let null_undefined_case_two = undefined;
console.log("케이스 2:", null_undefined_case_two);

// * 케이스 3: 변수에 null 값을 할당
let null_undefined_case_three = null;
console.log("케이스 3:", null_undefined_case_three);

// * 케이스 4: 함수에서 return 문이 없거나 명시적으로 undefined를 반환할때
function null_undefined_case_four() {
  return; // ! return이 없어도 undefined를 반환함
}
console.log("케이스 4:", null_undefined_case_four());

// * 케이스 5: 함수에서 명시적으로 null을 반환할때
function null_undefined_case_five() {
  return null;
}
console.log("케이스 5:", null_undefined_case_five());

// * 케이스 6: 객체에 없는 값 undefined
const obj = {};
console.log("케이스 6:", obj.case6);

// * 케이스 7: 배열에 없는 인덱스 undefined
const arr = [];
console.log("케이스 7:", arr[0]);

// TODO: 3. 비교연산자를 활용하여 각각의 케이스에 따라 null인지 undefined인지 확인하는 코드를 작성한다.
function chk_null_undefined(Value) {
  if (Value === null) {
    console.log("null");
  } else {
    console.log("undefined");
  }
}

chk_null_undefined(null_undefined_case_one); // * undefined
chk_null_undefined(null_undefined_case_two); // * undefined
chk_null_undefined(null_undefined_case_three); // * null
chk_null_undefined(null_undefined_case_four()); // * undefined
chk_null_undefined(null_undefined_case_five()); // * null
chk_null_undefined(obj.case6); // * undefined
chk_null_undefined(arr[0]); // * undefined

과제 제출 커밋

https://github.com/go-tiger/AI-web-camp/commit/0de88691efbe92a8099c1a1dfaaece61bcf154b8

과제: null과 undefined의 차이점 · go-tiger/AI-web-camp@0de8869

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