1.1) 안녕 자바스크립트

HTML

• 요소들의 내용, 배치, 모양을 정하기 위해 사용하는 언어

CSS

• 요소들의 색상, 크기 등의 스타일을 설정할 수 있음

JavaScript의 역할

• 웹 내부에서 발생하는 다양한 기능을 만들 수 있는 언어
• 웹을 움직이게 하는 "웹의 근육"이라고 할 수 있음

Javascript의 실행 원리

• Javascript 엔진에 의해 실행된다.
• Javascript : Javascript 엔진 = 게임 : 게임 구동기

1.2) VsCode 설치하기

Extenstions

• Korean Language Pack for Visual Studio Code
• Prettier - Code formatter
  • 파일 저장 시 Code formatter가 동작하여 자동 정렬됨
  • 설정에서 Editor:Format On Save 설정 필요
• Material Icon Theme
  - 파일에 좀 더 직관적인 아이콘을 나타내줌
• error lens
  - 코드 상 에러가 어떤 원인으로 나타나는지 알려줌
• live server
  - 웹 페이지 개발 시 실시간으로 변경되는 사항을 브라우저에서 확인할 수 있게 해줌
  

단축키

• Ctrl + , : VsCode 설정 변경

1.3) 자바스크립트 실습 환경 설정하기

서버로 실행하기

• HTML 파일을 연 상태에서 Ctrl + Shift + P - Open with live server
• 서버 종료는 Vscode 하단 Port:5500 클릭

단축키

• Ctrl + Shift + P : Vscode 기능을 검색으로 쉽게 실행하도록 하는 단축키

1.4) 변수와 상수

• let : 변수 선언
• const : 상수 선언, 선언 시 초기화 필요.

변수 명명 규칙

1. `$`와 `_`를 제외한 기호는 사용할 수 없다.
2. 숫자로 시작할 수 없다.
3. 예약어를 사용할 수 없다.
4. 변수 명명 가이드 - 한번에 알아볼 수 있는 이름을 지어야한다.

1.5) 자료형

원시 타입

• 동시에 한개의 값만 변수에 저장될 수 있음

1. Number Type

• NaN : 계산식이 잘못되었을 때의 반환값

let num1 = 27;
let num2 = 1.5;
let num3 = -20;

let inf = Infinity;
let mInf = -Infinity;

let nan = NaN; // 계산식이 잘못되었을때 반환값.

2. String Type

let myName = "이정환";
let myLocation = "목동";
let introduce = myName + myLocation;

백틱 - 동적으로 문자열을 삽입할 수 있다.

let introduceText = `${myName}은 ${myLocation}에 거주합니다`;

3. Boolean Type

let isSwitchOn = true;
let isEmpty = false;

4. Null Type (아무것도 없다)

let empty = null;

5. Undefined Type

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

1.6) 형변환

형 변환 (Type Casting)

• 어떤 값의 타입을 다른 타입으로 변경하는 것을 말함
  

// -> 문자열 -> 숫자
// Number() -> 숫자 외를 포함하는 경우 NaN 반환
let str1 = "10";
let strToNum1 = Number(str1);

// 숫자 외가 앞에 나오는 경우 NaN 반환
let str2 = "10개";
let strToNum2 = parseInt(str2); // 10

1.7) 연산자

연산자(Operator)

• 프로그래밍에서의 다양한 연산을 위한 기호, 키워드를 말함

1.8) 연산자2

특수 연산자

1. null 병합 연산 ??

• 존재하는 값을 추려내는 기능
• null, undefined가 아닌 값을 찾아내는 연산자
• 기능적으로 NVL, NVL2와 유사하다

let var1;
let var2 = 10;
let var3 = 20;

let var4 = var1 ?? var2; // 10
let var5 = var1 ?? var3; // 20
let var6 = var3 ?? var2; // 20

let userName;
let userNickName = "Winterlood";

let displayName = userName ?? userNickName;

2. typeof 연산자

• 값의 타입을 문자열로 반환하는 기능을 하는 연산자

let var7 = 1;
var7 = "hello";
var7 = true;

let t1 = typeof var7;
console.log(t1); // boolean

삼항 연산자

• 항을 3개 사용하는 연산자
• 조건식을 이용해서 참, 거짓일 때의 값을 다르게 반환

let var8 = 10;

// 요구사항 : 변수 res에 var8의 값이 짝수 -> "짝", 홀수 -> "홀"
let res = var8 % 2 === 0 ? "짝수" : "홀수";
console.log(res);

1.9) 조건문

조건문(Condition Statement)

• 특정 조건을 만족했을 때에만 실행되는 코드를 작성하기 위한 문법

1.10) 반복문

반복문 (Loop, Iteration)

• 어떠한 동작을 반복해서 수행할 수 있도록 만들어주는 문법

1.11) 함수

• 중복으로 작성된 유사한 기능을 하는 코드를 함수로 선언가능

인수

• 함수 실행 시 전달되는 값

매개변수

• 함수 선언 시 전달받겠다 명시되는 값

중첩함수

• 함수 내부의 함수를 선언 가능

function getArea(width, height) {
	function another(){
    	console.log("another");
    }
  	another();
  	return width*height;
}

호이스팅

• 끌어올리다
• 선언문을 최상위로 끌어올려, 선언문보다 먼저 함수가 호출되어도 문제가 없음

1.12) 함수 표현식과 화살표 함수

• 함수를 변수에 할당, 호출할 수 있음

함수 표현식

• 선언식으로 함수를 생성하는 방식. 익명함수 사용 가능.
• 호이스팅의 대상이 되지 않는다. - Uncaught ReferenceError 발생
• 차후 배울 콜백함수 등에서 유용하게 사용됨

let varB = function () {
	console.log("funcB");
};

화살표 함수

• 더 빠르게 함수를 생성하는 방법
• function 키워드를 생략 가능
• 값을 반환하기만 하는 경우 중괄호와 리턴문도 생략 가능

let varC = (value) => {
	console.log(value);
  	return value;
}

let varD = () => 1;

1.13) 콜백함수

콜백 함수(Callback Function)

• 자신이 아닌 다른 함수에, 인수로써 전달된 함수를 의미함
• 당장 실행되는 것이 아니라, 나중에 실행됨

1.콜백함수

// 콜백함수 value
function main(value) {
  value();
}

main(() => {
  console.log("i am sub");
});

2. 콜백함수의 활용

• 매번 새로운 repeat함수를 선언하지 않고, callback함수를 정의함으로서 중복 제거 가능

function repeat(count, callback) {
  for (let idx = 1; idx <= count; idx++) {
    callback(idx);
  }
}

repeat(5, (idx) => {
  console.log(idx);
});

repeat(5, (idx) => {
  console.log(idx * 2);
});

repeat(5, (idx) => {
  console.log(idx * 3);
});

1.14) 스코프

스코프(Scope)

• 범위
• 변수나 함수에 접근하거나 호출할 수 있는 범위를 말함
• 전역 스코프 : 전체 영역에서 접근 가능
• 지역 스코프 : 특정 영역에서만 접근 가능
• 함수 선언식은 함수 블록 안에서만 지역 스코프를 가진다.

1.15) 객체

객체(Object)

• 객체를 이용하면 현실세계에 존재하는 어떤 사물이나 개념을 표현하기 용이함
• key-value 형태
  - key에 띄어쓰기가 포함되는 경우 "로 감싸야함

1.객체 생성

// 1. 객체 생성
let obj1 = new Object(); // 객체 생성자
let obj2 = {}; // 객체 리터럴 (대부분 사용)

2.객체 프로퍼티 (객체 속성)

let person = {
  name: "이정환",
  age: 27,
  hobby: "테니스",
  job: "FE Developer",
  extra: {},
  10: 20,
  "like cat": true,
};

3.객체 프로퍼티를 다루는 방법

3.1 특정 프로퍼티에 접근 (점 표기법, 괄호 표기법)

let name = person.name;
let age = person["age2"];

let property = "hobby";
let hobby = person[property]; // 동적으로 프로퍼티에 접근할 때 괄호표기법이 좋다.

3.2 새로운 프로퍼티를 추가하는 방법

person.job = "fe developer";
person["favoriteFood"] = "떡볶이";

3.3 프로퍼티를 수정하는 방법

person.job = "educator";
person["favoriteFood"] = "초콜릿";

3.4 프로퍼티를 삭제하는 방법

• delete {property}

delete person.job;
delete person["favoriteFood"];

3.5 프로퍼티의 존재 유무를 확인하는 방법 (in 연산자)

• {property} in {object}

let result1 = "name" in person;
let result2 = "cat" in person;
console.log(result2); // false

1.16) 객체 2

상수 객체

• const로 선언한 객체를 새로 할당하는 것은 불가능하나, 프로퍼티의 값을 추가, 수정, 삭제하는 행위는 가능하다.

메서드

• 값이 함수인 프로퍼티
• 함수가 아닌 프로퍼티가 객체의 정보를 갖고 있다면, 함수 프로퍼티들은 메서드로서 객체의 동작을 정의함

1.17) 배열

• 여러개의 값을 순차적으로 담을 수 있는 자료형