[ JavaScript 문법 종합반 1주차 (1-8) ]

• 1-1강  JS의 역사

1995년 자바스크립트 탄생 :  넷스케이프 커뮤니케이션(LiveScript → Javascript)

2005년 AJAX 등장 (js기반) javascript 사용자가 늘어나게됨.

         - as is : 버튼을 누르면 웹페이지 전체가 새로고침

         - to be : 버튼을 누르면 해당하는 영역만 새로고침

       -> UX향상으로 javascript 사용자 증가

2009년 Node.js 등장, 서버 개발 활성화

         -  하나의 언어 → FrontEnd + BackEnd + DB(MongoDB) = FullStack

 

---

 

• 1-2강  변수와상수

변수란? 
기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용 하기 위한 매커니즘.

 

• [ 변수의 5가지 주요개념 ] 
• 변수 이름 : 저장된 값의 고유 이름
• 변수 값 : 변수에 저장된 값
• 변수 할당 : 변수에 값을 저장하는 행위
• 변수 선언 :  변수를 사용하기 위해 컴퓨터에 알리는 행위
• 변수 참조 :  변수에 할당된 값을 읽어오는것

* 자바스크립트에서 변수는 var, let, const 세 가지 방법으로 선언할 수 있습니다.

// var로 변수 선언
var myVar = "Hello World";
console.log(myVar); // "Hello World"

// let으로 변수 선언
let myLet = "Hello World";
console.log(myLet); // "Hello World"

// const로 상수 선언
const myConst = "Hello World";
console.log(myConst); // "Hello World"

 

var : 선언한것도 한번더 선언가능 (마지막 선언한 값으로 변수가 덮어씌워진다.)

var / let : 다른값을 할당하더라도 재할당이 가능하다.

// var로 변수 덮어쓰기
var myVar = "Hello";
var myVar = "World";
console.log(myVar); // "World"

// let으로 변수 덮어쓰기
let myLet = "Hello";
myLet = "World"; // 기존 값을 덮어쓰기
console.log(myLet); // "World"

// const로 상수 선언 후 값 변경하기
const myConst = "Hello";
myConst = "World"; // 오류 발생
console.log(myConst);

 

---

 

• 1-3(4강) 데이터 타입

Runtime (run하는 time) 코드를 작성할 떄가 아닌, 실제 코드가 실행될 때 : 터미널 코드가 실행될 떄 데이터 타입이 결정되는것을 말함.

 

[1] 데이터타입

1) 숫자(Number)

a. 정수형 숫자(Integer)

let num1 = 10;
console.log(num1); // 10
console.log(typeof num1); // "number"

b. 실수형 숫자(Float)

let num2 = 3.14;
console.log(num2); // 3.14
console.log(typeof num2); // "number"

c. 지수형 숫자(Exponential)

let num3 = 2.5e5; // 2.5 x 10^5
console.log(num3); // 250000
console.log(typeof num3); // "number"

d. NaN(Not a Number) : 숫자가 아닌것을 나타내는 값을 숫자로 변환하려고 할떄

let num4 = "Hello" / 2;
console.log(num4); // NaN
console.log(typeof num4); // "number"

e. Infinity 

let num5 = 1 / 0;
console.log(num5); // Infinity
console.log(typeof num5); // "number"

let num6 = -1 / 0;
console.log(num6); // -Infinity
console.log(typeof num6); // "number"

2) 문자열(String) : 작은 따옴표(')나 큰 따옴표(")로 감싸서 표현합니다.

let name = 'Alice';
let message = "Hello, world!";

(1) 문자열 길이(length) 확인하기

let str = "Hello, world!";
console.log(str.length); // 13

(2) 문자열 결합(concatenation)

let str1 = "Hello, ";
let str2 = "world!";
let result = str1.concat(str2);
console.log(result); // "Hello, world!"

(3) 문자열 자르기(substr, slice) 

let str = "Hello, world!";
console.log(str.substr(7, 5)); // "world" -> substr : from , length
console.log(str.slice(7, 12)); // "world" -> slice :  start , undfined

 (4) 문자열 검색(search)

let str = "Hello, world!";
console.log(str.search("world")); // 7

(5) 문자열 대체(replace)

let str = "Hello, world!";
let result = str.replace("world", "JavaScript");
console.log(result); // "Hello, JavaScript!"

(6) 문자열 분할(split)

let str = "apple, banana, kiwi";
let result = str.split(","); // -> 괄호 안에 자르는 기준을 넣어준다.
console.log(result); // ["apple", " banana", " kiwi"]

3) 불리언(Boolean) : 참(true)과 거짓(false)을 나타내는 데이터 타입

let bool1 = true;
console.log(bool1); // true
console.log(typeof bool1); // "boolean"

let bool2 = false;
console.log(bool2); // false
console.log(typeof bool2); // "boolean"

* 불리언 데이터 타입은 조건문(if, else, switch 등)과 논리 연산자(&&, ||, !)와 함께 많이 사용됩니다.

 

4)undefined : 값이 할당되지 않은 변수

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

5) null : null은 값이 존재하지 않음(명시적으로, 일부러표기하지않음)을 의미합니다. undefined와는 다름

let y = null;

6) 객체(Object) :  중괄호({})를 사용하여 객체를 생성 (key - value pair)

let person = { name: 'Alice', age: 20 };// key에는 ' ' 와같은 따옴표 없이 문자형태로 들어가면 된다.
person.name // 'Alice'
person.age // 20

7) 배열(Array) : 여러 개의 데이터를 순서대로 저장하는 데이터 타입입니다. 대괄호([])를 사용하여 배열을 생성합니다.

let person = { name: 'Alice', age: 20 };
person.name // 'Alice'
person.age // 20

 

---

 

• 1-5강 형 변환

(1) 암시적 형 변환(implicit coercion) : 자동으로 수행되는 형 변환이며, 일반적으로 연산자를 사용할 때 발생합니다.

 1) 문자열 변환 : {}, null, undifined + "1" => 문자열

console.log(1 + "2");   // "12"
console.log("1" + true);   // "1true"
console.log("1" + {});   // "1[object Object]"
console.log("1" + null);   // "1null"
console.log("1" + undefined);   // "1undefined"
// 문자열과 다른데이터 타입이 만나면 문자열로 변환된다.

2) 숫자 변환

console.log(1 - "2");   // -1
console.log("2" * "3");   // 6
console.log(4 + +"5");   // 9
// 더하기 연산자가 아닌 다른 연산자는 숫자변환이 우선시 된다. 
// 이때, 빈 문자열("")이나 공백 문자열(" ")은 0으로 변환됩니다.

3) 블리언 변환 :Boolean() 함수를 사용. 이때, 0, 빈 문자열(""), null, undefined, NaN은 false로 변환됩니다. 그 외의 값은 true로 변환됩니다.

console.log(Boolean(0));   // false
console.log(Boolean(""));   // false
console.log(Boolean(null));   // false
console.log(Boolean(undefined));   // false
console.log(Boolean(NaN));   // false
console.log(Boolean("false"));   // true
console.log(Boolean({}));   // true

(2) 명시적 형 변환(explicit coercion) : 개발자가 직접 자료형을 변환하는 것을 말합니다.

1) 문자열 변환 : String() 함수를 사용하여 다른 자료형을 문자열로 변환 

console.log(String(123));       // "123"
console.log(String(true));      // "true"
console.log(String(false));     // "false"
console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"
console.log(String({}));        // "[object Object]"

2) 숫자 변환 

console.log(Number("123"));   // 123
console.log(Number(""));      // 0
console.log(Number("  "));    // 0
console.log(Number(true));    // 1
console.log(Number(false));   // 0

 

---

 

• 1-6강 연산자

(1) 산술 연산자(arithmetic operators)

 1) 더하기 연산자(+)

console.log(2 + 3);       // 5
console.log("2" + "3");   // "23"
console.log("2" + 3);     // "23"
console.log(2 + "3");     // "23"
// ** 더하기 연산지는 숫자+문자를 함께사용하면 자동으로 문자열로 변환

 2) 빼기 연산자(-)

console.log(5 - 2);       // 3
console.log("5" - "2");   // 3
console.log("5" - 2);     // 3
console.log(5 - "2");     // 3
console.log("five" - 2);  // NaN
// ** 빼기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환

 3) 곱하기 연산자(*),  나누기 연산자(/), 나누기(=나머지) 연산자(%)

console.log(2 * 3);       // 6
console.log("2" * "3");   // 6
console.log("2" * 3);     // 6
console.log(2 * "3");     // 6
console.log("two" * 3);   // NaN
----------------------
console.log(6 / 3);       // 2
console.log("6" / "3");   // 2
console.log("6" / 3);     // 2
console.log(6 / "3");     // 2
console.log("six" / 3);   // NaN
----------------------
console.log(7 % 3);       // 1
console.log("7" % "3");   // 1
console.log("7" % 3);     // 1
console.log(7 % "3");     // 1
console.log("seven" % 3); // NaN
//** 위 3가지 연산자 모두 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

(2) 할당 연산자(assignment operators) 

 1) 등호 연산자(=) : 등호 연산자를 사용하여 변수에 값을 할당할 수 있다.

let x = 10;
console.log(x);   // 10

x = 5;
console.log(x);   // 5

2) 더하기 등호 연산자(+=) / 빼기 등호 연산자(-=) :  더하기,빼기 등호연산자를 사용하여 변수에 값을 더하기, 빼기 할 수 있다.

let x = 10;
console.log(x);   // 10

x += 5;
console.log(x);   // 15
-----------------
let x = 10;
console.log(x);   // 10

x -= 5;
console.log(x);   // 5

3) 곱하기 등호 연산자(*=) / 나누기 등호 연산자(/=) :  곱하기, 나누기 등호연산자를 사용하여 변수에 값을 더하기, 빼기 할 수 있다.

let x = 10;
console.log(x);   // 10

x *= 5;
console.log(x);   // 50
----------------
let x = 10;
console.log(x);   // 10

x /= 5;
console.log(x);   // 2

4) 나머지 등호 연산자(%=) : 나머지 등호 연산자를 사용하여 변수에서 값을 나눈 나머지를 구할 수 있습니다.

let x = 10;
console.log(x);   // 10

x %= 3;
console.log(x);   // 1

(3) 비교 연산자(comparison operators)

 1) 일치 연산자(===) : 일치 연산자는 자료형까지 비교합니다.

console.log(2 === 2);   // true
console.log("2" === 2);   // false
console.log(2 === "2");   // false
// ** type 까지 모두 일치해야 true로 반환된다.

 2) 불일치 연산자(!==) : 불일치 연산자는 자료형까지 비교합니다.

console.log(2 !== 2);   // false : 숫자2가 숫자2와 다르니? 달라!
console.log("2" !== 2);   // true : 문자2는 숫자2랑 다르니? 맞아!
console.log(2 !== "2");   // true : 숫자2는 문자2와 다르니? 맞아!

3) 작다(<) 연산자 와 크다(>) 연산자 : 작다와 크다의 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

console.log(2 < 3);   // true
console.log(2 < "3");   // true
console.log("2" < 3);   // true
---------------------
console.log(2 > 3);   // false
console.log(2 > "3");   // false
console.log("2" > 3);   // false

4) 작거나 같다(<=) 와 크거나 같다(>=) 연산자 : 두 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다. 

console.log(2 <= 3);   // true
console.log(2 <= "3");   // true
console.log("2" <= 3);   // true
console.log(2 <= 2);   // true
--------------------
console.log(2 >= 3);   // false
console.log(2 >= "3");   // false
console.log("2" >= 3);   // false
console.log(2 >= 2);   // true

(4) 논리 연산자(logical operators)

 1) 논리곱(&&) 연산자 : 논리곱 연산자는 두 값이 모두 true일 경우에만 true를 반환합니다.

console.log(true && true);   // true
console.log(true && false);   // false
console.log(false && true);   // false
console.log(false && false);   // false

2) 논리합(||) 연산자 : 두 값 중 하나라도 true일 경우 true를 반환합니다.

console.log(true || true);   // true
console.log(true || false);   // true
console.log(false || true);   // true
console.log(false || false);   // false

3) 논리부정(!) 연산자 : 값을 반대로 바꿀 수 있습니다. 논리부정 연산자는 true를 false로, false를 true로 바꿉니다.

console.log(!true);   // false
console.log(!false);   // true
console.log(!(2 > 1));   // false

(5) 삼항 연산자(ternary operator) : 조건에따라 값을 설정한다.

1) 삼항 연산자(?:) : 조건에 따라 값을 선택할 수 있습니다. 삼항 연산자는 조건식 ? true일 때의 값 : false일 때의 값 형태로 사용합니다.

let x = 10;
let result = (x > 5) ? "크다" : "작다";
console.log(result);   // "크다"

(6) 타입 연산자(type operators) 

1) typeof 연산자 : typeof 연산자를 사용하여 값의 자료형을 확인할 수 있습니다. 이때, typeof 연산자는 원시 자료형의 경우, 해당 자료형의 이름을, 객체나 함수의 경우, "object" 또는 "function"을 반환합니다. typeof null의 경우 "object"를 반환하는 버그가 있습니다.

console.log(typeof 123);   // "number"
console.log(typeof "123");   // "string"
console.log(typeof true);   // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);   // "object"
console.log(typeof {});   // "object"
console.log(typeof []);   // "object"
console.log(typeof function(){});   // "function"

 

---

 

 

• 1-7강 함수: 함수는 input / ouput 을 가지고 있다.

1. 함수 정의하기

1) 함수 선언문(function declaration) : function 키워드를 사용하여 add라는 함수를 선언. 함수 선언문을 사용하면 함수를 미리 정의해두고, 필요할 때 호출할 수 있습니다. ( return 키워드를 통해 출력이 가능하다. )

function add(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

2) 함수 표현식(function expression) : function 키워드를 사용하여 add라는 변수에 함수를 할당하였습니다. 함수 표현식을 사용하면 함수를 변수에 할당하여 익명 함수를 생성할 수 있습니다.

let add = function(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

2. 함수 호출하기 : add라는 함수를 호출하여 결과값을 반환합니다. 함수를 호출할 때는 함수 이름 뒤에 괄호를 사용합니다.

  - ex) 함수명()->add() 

function add(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5
---------------------------------------------
let functionResult = add (3,4);
console.log (functionResult); // 7

3. 함수 매개변수와 반환값

1) 함수 매개변수 : add라는 함수가 x와 y라는 두 개의 매개변수를 받아들입니다. 함수를 호출할 때는 매개변수에 값을 전달합니다.

function add(x, y) {
  return x + y;
}

console.log(add(2, 3));   // 5

2) 함수 반환값 : add라는 함수가 x와 y라는 두 개의 매개변수를 받아들이고, 이를 더한 값을 반환합니다. 함수를 호출한 결과값을 변수에 할당하여 사용할 수 있습니다.

function add(x, y) {
  return x + y;
}

let result = add(2, 3);
console.log(result);   // 5

 

---

 

• 1-8강 스코프 및 화살표함수

1. 스코프

스코프 : 변수가 어디까지 영향을 끼칠수 있는가?

1)전역 스코프 : 전역 스코프에서 변수 x를 선언하고, 함수 printX에서 변수 x를 참조합니다. 전역 스코프에서 선언된 변수는 어디에서든지 참조할 수 있습니다.

let x = 10;

function printX() {
  console.log(x);
}

printX();   // 10

2) 지역 스코프(local scope) : 지역 스코프에서 변수 x를 선언하고, 함수 printX에서 변수 x를 참조합니다. 지역 스코프에서 선언된 변수는 해당 함수 내에서만 참조할 수 있습니다.

function printX() {
  let x = 10;
  console.log(x);
}

printX();   //

3) 블록 스코프(block scope) : if문 내에서 변수 x를 선언하고, 이를 출력합니다. if문 내에서 선언된 변수는 해당 블록 내에서만 참조할 수 있습니다.

if (true) {
  let x = 10;
  console.log(x);
}

console.log(x);   // ReferenceError: x is not defined

 

2. 화살표 함수

1) 기본적인 화살표 함수 : 화살표 함수를 사용하여 add라는 함수를 선언하였습니다. 화살표 함수를 사용하면 함수의 선언이 간결해집니다.

let add = (x, y) => {
  return x + y;
}

console.log(add(2, 3));   // 5

2) 한 줄로 된 화살표 함수 : 함수 내부에 return문이 한 줄로 작성될 경우, 중괄호와 return 키워드를 생략할 수 있습니다.

let add = (x, y) => x + y;

console.log(add(2, 3));   // 5

3) 매개변수가 하나인 화살표 함수 : 매개변수가 하나인 화살표 함수를 사용하여 square라는 함수를 선언하였습니다. 매개변수가 하나일 경우에는 괄호를 생략할 수 있습니다. 

let square = x => x * x;

console.log(square(3));   // 9