JavaScript 문법 종합 1주차(변수, 데이터타입, 연산자, 함수)

🔴변수

🔴데이터타입

🔻배열도 object로 표현

🔴형변환

🔴연산자

🔻산술 연산자
🔻증감 연산자
🔻할당 연산자
🔻비교 연산자
🔻논리 연산자
🔻삼항 연산자

🔴함수

🔴스코프

🔴화살표함수

 

JS 언어의 특징

객체 지향 프로그래밍 지원

• 절차지향 프로그래밍은 순서대로 실행되는 일련의 과정을 단계적으로 기술하여 프로그램을 만드는 것이고, 객체지향 프로그래밍은 데이터와 함수를 객체라는 그룹으로 묶어서 처리하는 방법입니다. 객체는 상태와 행동을 가지고 있으며, 상태는 객체의 속성(property)이라고도 합니다.
• JS에서 객체를 만들 때는? 자바스크립트에서 객체를 만들 때는 **중괄호({})**를 사용하여 객체를 만들고, 각 속성을 **쉼표(,)**로 구분하여 추가다. 속성은 이름과 값을 가지며, 이름은 문자열로 작성하고, 값은 다양한 데이터 타입을 사용할 수 있다. 객체 내부의 함수를 **메소드(method)**라고 부르며, 속성의 값으로 함수를 추가할 수 있다. 객체를 만들어서 필요한 속성과 메소드를 추가하여 사용한다.

동적 타이핑

• 자바스크립트는 동적 타이핑을 지원하는 언어로서, 변수를 선언할 때 타입을 지정하지 않는다. 이것은 런타임 시점에 변수에 할당되는 값에 따라 자동으로 데이터 타입이 결정된다는 것을 의미한다. (런타임 시점이란, 프로그램이 실행되는 동안의 시점을 의미한다. 즉, 코드가 실행되는 동안에 발생하는 시점을 말한다. 반대의 의미로는 컴파일 시점이 있음)

함수형 프로그래밍 지원

• 자바스크립트는 함수형 프로그래밍을 지원하는 언어로서, 함수를 일급 객체로 취급하고, 고차 함수를 지원다. 이를 통해 코드의 재사용성과 가독성을 높일 수 있다.

비동기 처리

• 비동기 처리는 작업을 순차적으로 기다리지 않고, 병렬로 처리할 수 있도록 하는 방식

클라이언트 측 및 서버 측 모두에서 사용 가능

• 자바스크립트는 클라이언트 측에서만 사용되는 것이 아니라, Node.js를 이용하여 서버 측에서도 사용된다. 이를 통해 웹 개발 전반에 걸쳐(front, back, db 모든 부분을 의미) 자바스크립트를 활용할 수 있다.

---

변수

모든 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용 하기 위해 변수라는 메커니즘을 이용한다.

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

자바스크립트에서 변수는 var, let, const 세 가지 방법으로 선언할 수 있습니다. var은 예전부터 사용되던 방법입니다. let과 const는 ECMAScript 6(ES6)에서 새로 도입된 방법입니다.

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

var myVar1;
myVar1 = 3; 
// => var myVar1 = 3;


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


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

 

var는 같은 이름의 변수를 여러 번 선언해도 오류가 발생하지 않고, 가장 마지막에 선언한 값으로 변수가 덮어씌워다.

let과 const는 같은 이름의 변수를 두 번 선언하면 오류가 발생한다.

const는 선언 후에 값을 변경할 수 없는 상수를 선언할 때 사용한다.

// var 재선언 가능
var myVar = "Hello";
var myVar = "World";
console.log(myVar); // "World"
// 다른 값을 재할당 가능
myVar = "GoodBye"
console.log(myVar); // "GoodBye"


// let 재선언 불가능
let myLet = "Hello";
let myLet = "World";
console.log(myLet); // error
// 다른 값을 재할당 가능
myLet = "GoodBye" 
console.log(myLet); // "GoodBye"


// const 재선언 불가능
const myConst = "Hello";
const myConst = "World";
console.log(myConst); // error
// 다른 값을 재할당 불가능
myConst = "GoodBye"; 
console.log(myConst); // error

---

런 타임(run time) 

코드를 작성할 때가 아니라, 실제 코드가 실행될 때 데이터 타입이 결정된다.

데이터 타입

typeof 연산자

typeof 연산자는 타입을 확인해야 하는 피연산자 앞에 위치, 연산자이므로 함수처럼 괄호[()]를 사용할 필요가 없다. 

typeof 연산자는 null을 "object"라고 판단하는데, null을 "object"로 반환하는 이유는 

---

배열도 "object"로 표현

자바스크립트는 배열(array) 자료구조를 제공하지만, typeof는 배열(array)을 구분하지 못한다. typeof []는 "object"를 반환한다. typeof는 배열을 식별하지 못하기 때문에 배열을 구분하기 위해서는 Array.isArray()라는 다른 함수를 사용해야 한다. 이는 객체를 구체적으로 구분을 해야 하는 상황에서는 별도의 함수를 정의해서 사용해야 한다는 의미이다.

---

숫자(Number)

정수형 숫자(Integer)

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

 

실수형 숫자(Float)

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

 

지수형 숫자(Exponential)

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

 

NaN(Not a Number)

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

//NaN(Not a Number)은 자바스크립트에서 숫자가 아님을 나타내는 값으로
//보통 수학적으로 정의되지 않는 계산을 수행하거나, 
//숫자가 아닌 값을 숫자로 변환하려고 할 때 발생한다.

 

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"

---

문자열(String)

문자열은 문자의 나열, 작은 따옴표(')나 큰 따옴표(")로 감싸서 표현한다.

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

 

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

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

 

문자열 결합(concatenation_concat)

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

 

문자열 자르기(substr, slice)

slice

let str3 = "Hello, world!";
console.log(str3.substr(7, 5)); // 인덱스_7번째부터 5개까지만 출력 "world"
console.log(str3.slice(7, 12)); // 인덱스_7번째부터 12번째 앞까지 출력 "world"

 

문자열 검색(search)

let str4 = "Hello, world!";
console.log(str4.search("world")); // world가 시작되는 지점은 7번째 부터이다 "7"

 

문자열 대체(replace)

let str5 = "Hello, world!";
let result = str5.replace("world", "JavaScript"); // world를 JavaScript로 대체
console.log(result); // "Hello, JavaScript!"

 

문자열 분할(split)

let str6 = "apple, banana, kiwi";
let result = str6.split(","); // ,를 기준으로 잘라냄
console.log(result); // ["apple", " banana", " kiwi"]

 

불리언(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 등)과 논리 연산자(&&, ||, !)와 함께 많이 사용됩니다. 예를 들어, 다음과 같은 코드를 작성할 수 있습니다.

let x = 10;
let y = 5;

if (x > y) {
  console.log("x is greater than y");
} else {
  console.log("x is less than or equal to y");
}

let a = true;
let b = false;

console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false

위 코드에서는 if 조건문을 사용하여 x가 y보다 큰 경우에는 "x is greater than y"를 출력하고, 그렇지 않은 경우에는 "x is less than or equal to y"를 출력합니다. 또한, 논리 연산자를 사용하여 a와 b의 논리적인 AND(&&)와 OR(||) 연산을 수행하고, NOT(!) 연산을 수행합니다.

 

undefined

undefined는 값이 할당되지 않은 변수를 의미합니다.

let x; // 정의하지 않고 선언만 함
console.log(x); // undefined

 

null

null은 값이 존재하지 않음을 의미합니다. undefined와는 다릅니다.

let y = null;
// 값이 존재하지 않음을 '명시적'으로 나타내는 방법(일부러 정의하지 않은것)

 

💫객체(Object)

자바스크립트에서는 객체가 매우 중요한 역할을 합니다. 객체는 속성과 메소드를 가지는 컨테이너입니다. 중괄호({ })를 사용하여 객체를 생성합니다. (key - value pair)

let person = { name: 'Alice', age: 20 };
console.log(typeof person); // object

 

💫배열(Array)

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

let numbers = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange'];

---

형 변환

자바스크립트에서는 다양한 자료형을 다룰 수 있습니다. 그리고 이 자료형들은 서로 형변환이 가능합니다. (명시적 형 변환_개발자가 직접 자료형을 변환하는 것, 암시적 형 변환_자바스크립트에서 자동으로 수행되는 형 변환)

 

암시적 형 변환(implicit coercion)

암시적 형 변환은 자바스크립트에서 자동으로 수행되는 형 변환이며, 일반적으로 연산자를 사용할 때 발생합니다.

 

문자변환

문자열과 다른 자료형이 연산자로 결합되어 있다. 이 경우에는 자바스크립트는 다른 자료형을 문자열로 변환한 후 연산을 수행한다.

let result1 = 1 + "2";
console.log(result1); // 12 라는
console.log(typeof result1); // stinrg 문자로 변환되었음

let result2 = "1" + true;
console.log(result2); // 1true 라는
console.log(typeof result2); // string 문자로 변환되었음

{ }객체, null, undefined + "1" => 문자

---

숫자변환

연산자를 사용할 때, 문자열을 숫자로 변환

let result3 = 1 -"2"
console.log(result3); // -1
console.log(typeof result3); //number

let result4 = "2" * "3"
console.log(result4); // 6
console.log(typeof result4); // number

// 숫자가 우선순위이고, 문자열을 숫자로 변환
//  이때, 빈 문자열("")이나 공백 문자열(" ")은 0으로 변환

 

명시적 형 변환 

명시적 형 변환은 개발자가 직접 자료형을 변환하는 것을 말합니다.

 

불리언 변환

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

 

문자열 변환

let result5 = String(123)
console.log(typeof result5); 
console.log(result5);

let result6 = String(true)
console.log(typeof result6); 
console.log(result6);

let result7 = String(false)
console.log(typeof result7); 
console.log(result7);

let result8 = String(null)
console.log(typeof result8); 
console.log(result8);

let result9 = String(undefined)
console.log(typeof result9); 
console.log(result9);

 

숫자변환

let result10 = Number("123")
console.log(result10); //123
console.log(typeof result10); // number


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

---

연산자

산술 연산자

더하기 연산자(" 문자열" 문자열의 더하기도 가능하다. 다만 다른 연산에서는 숫자로 인식해서 결과를 출력하지만 더하기 연산자에서는 문자열로 인식해서 값을 출력한다.)

console.log(10 + 20); // 30
console.log("10" + "20"); // 1020
console.log("10" + 20); // 1020

console.log(20 - 10); // 10
console.log("20" - "10"); // 10
console.log("10" - 20); // -10

console.log(20 * 10); // 200
console.log("20" * "10"); // 200
console.log("10" * 20); // 200

console.log(20 / 10); // 2
console.log("20" / "10"); // 2
console.log("20" / 10); // 2

console.log(25 % 10); // 5
console.log("25" % "10"); // 5
console.log("25" % 10); // 5

console.log(2 + 3);       // 5
console.log("2" + "3");   // "23"
console.log("2" + 3);     // "23"
console.log(2 + "3");     // "23"

// 더하기 연산자는 우선순위가 문자열에게 있기때문에 숫자로 기입하여도 문자열로의 형 변환이 일어난다.

 

빼기 연산자

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

//빼기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환

 

 

곱하기 연산자

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(4 / 2);       // 2
console.log("6" / "3");   // 2
console.log("4" / 2);     // 2
console.log(6 / "3");     // 2
console.log("six" / 3);   // NaN

// 나누기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환

 

나머지 연산자

console.log(5/2) // 2.5
console.log(5%2) // 몫이 2고, 나머지가 1로 출력 값은 1이 된다. 

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

// 나머지 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환

몫을 구하는 연산자는 따로 없어서 Math.floor()이나 paraseInt를 사용해야 한다. 

---

💫증감 연산자

var num = 10;
console.log(++num); // 11 
console.log(--num) ; // 10

console.log(num++); // 10 ➡️ num=10을 출력해서 10이 나오고 그 뒤에 +1을 해줘서 11이 되어있는 상태
console.log(num); // 11 이때는 11이 출력

console.log(num--); // 11 ➡️ 위의 결과로 해당 시점에서 num=11이 되어있어서 그걸 출력해서 11이 출력, 그 뒤에 -1을 해줘서
console.log(num) // 10 이때는 10이 출력

++num / --num:  num+1 / num-1 후에 num을 출력

num++ / num--: num을 출력 후 num+1 / num-1

---

할당 연산자(右 -> 左)

등호 연산자(=)

let x = 10;

 

더하기 등호 연산자(+=)

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

// x에다가 5를 더해줘!
x += 5;
console.log(x);   // 15

// 한 번더 5를 더하면
x += 5;
console.log(x);   // 20

 

뺴기 등호 연산자(-=)

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

// x에다가 5를 더해줘!
x += 5;
console.log(x);   // 15

// x에다가 5를 빼줘!
x -= 5;
console.log(x);  // 10

x -= 20;
console.log(x);  // -10

 

곱하기 등호 연산자(*=)

let a = 10;
a *= 2;
console.log(a); // 20

 

나누기 등호 연산자(/=)

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

 

나머지 등호 연산자(%=)

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

---

비교 연산자

true 또는 false를 반환하는 연산자

 

일치 연산자(===)

타입까지 일치해야 true를 반환하는 연산자

console.log(2 === 2);   // true
console.log("2" === 2);   // false
console.log(2 === "2");   // false

 

불일치 연산자(!==)

타입까지 일치해야 false를 반환하는 연산자

console.log(2 !== 2);   // false
console.log("2" !== 2);   // true
console.log(2 !== "2");   // true

 

작다 연산자(<), 작거나 같다 연산자(<=)_같다연산자와 동일

console.log(2 < 3);   // true
console.log(2 <= 3);   // true
console.log(3 <= 3);   // true
console.log(4 <= 3);   // false

---

논리 연산자

 

논리곱(&&) 연산자

두 값이 모두 true일 경우에만 true를 반환

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

 

논리합(||) 연산자

두 값 중 하나라도 true일 경우 true를 반환

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

 

논리부정(!) 연산자

값을 반대로 바꿀 수 있다.

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

let a = true;
console.log(!a);   // false

---

삼항연산자

조건에 따라 값을 선택할 수 있다.

 

조건식 ? true일 때의 값 : false일 때의 값

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

// 조건식 ? true일 때의 값 : false일 때의 값 형태로 사용

let y = 20;
// y가 10보다 작은 경우, 작다를 출력 
// 10보다 크다면, 크다를 출력
let answer = (y < 10) ? "작다" : "크다";
console.log(answer);  // 크다

---

let age = prompt('나이를 입력해주세요.', 18);

let message = (age < 3) ? '아기야 안녕?' :
  (age < 18) ? '안녕!' :
  (age < 100) ? '환영합니다!' :
  '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';

alert( message );

===

if (age < 3) {
  message = '아기야 안녕?';
} else if (age < 18) {
  message = '안녕!';
} else if (age < 100) {
  message = '환영합니다!';
} else {
  message = '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';
}

---

함수

input과 output을 가지고 있는 기능의 단위

 

함수 선언문

function 함수의이름 (input_매개변수) {
    // 함수 내부에서 실행할 코드
}

// input : 매개변수 : 매개체가 되는 변수
// output : return문 뒤에 오는 값 : 반환값

// 두 개의 숫자를 입력 받아서 덧셈을 내보내는 함수
function add(x, y) {
  return x + y;
}

 

함수 표현식

// function뒤에 함수의 이름을 넣어야하는데 let으로 선언했으므로 쓰지 않아도 된다.
let add2 = function (x, y) {
	return x + y;
}

 

함수를 호출하기_함수명( )

// 두 개의 숫자를 입력 받아서 덧셈을 내보내는 함수
function add(x, y) {
    return x + y;
}
console.log(add(2, 3));  // 5

let add2 = function (x, y) {
	return x + y;
}
let functionresult = add2(10, 20);
console.log(functionresult);  // 30

// 각각 add()와 add2()로 함수를 호출

---

스코프

변수의 영향 범위(?)

 

전역 스코프(global scope)

전역 스코프에서 선언된 변수는 어디에서든지 참조할 수 있다.

let x = 10;

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

console.log(x);  // 10
printX();   // 10

 

지역 스코프(local scope)

지역 스코프에서 선언된 변수는 해당 함수 내에서만 참조할 수 있다.

function printX() {
    let x = 10;  // 함수 내부에 선언이 되어있음(지역변수)
    console.log(x);
  }
  
  console.log(X);
  printX();   // 오류가 남

---

💫화살표 함수

// 기본적인 화살표 함수
let arrowFunc01 = (x, y) => {
  return x + y;
}

// 한 줄로 작성
//  함수 내부에 return문이 한 줄로 작성될 경우, 중괄호와 return 키워드를 생략할 수 있다.
// { } 중괄호 삭제가 가능해야 함
let arrowFunc02 = (x, y) => x + y;

function testFunc(x) {
	return x;
}

// 화살표 함수로
let arrowFunc03 = (x) => x;
let arrowFunc03 = x => x; 
//둘 다 가능, textFunc(X) 이렇게 하나일 때 ( ) 생략가능