JS 문법 종합반 1번째 개발일지

오늘부터 Javascript 문법 종합반 강의를 통해 본격적으로 javascript 언어에 대해 공부해보겠습니다.

 

 먼저 javscript 언어의 특징에 대해 정리해 보겠습니다.

Javascript 언어의 특징

1. 객체 지향 프로그래밍을 지원한다.

절차지향 프로그래밍은 순서대로 실행되는 일련의 과정을 단계적으로 기술하여 프로그램을 만드는 것이고, 객체지향 프로그래밍은 데이터와 함수를 객체라는 그룹으로 묶어서 처리하는 방법입니다.

예를 들어, **절차지향 프로그래밍**에서는 첫 번째 일을 처리한 다음에 두 번째 일을 처리하고, 그 다음에 세 번째 일을 처리하는 순서대로 프로그램을 만듭니다.

반면 **객체지향 프로그래밍에**서는 데이터와 함수를 객체라는 그룹으로 묶어서 처리합니다. 객체는 상태와 행동을 가지고 있으며, 상태는 객체의 속성(property)이라고도 합니다.

→ 객체 단위로 묶으면 여러 군데에서 재활용을 할 수 있다.

→ 현재 복잡한 프로그래밍 수준을 요구하는 지금 시대에 적합한 이유.

2. 동적 타이핑 언어

JS가 아닌 다른 언어에서는 변수를 지정할 때 항상 타입을 같이 지정해 줘야 한다.

ex. string a = “abc”

JS는 변수의 타입을 따로 지정 안한다.

ex. var a = “abc”

JS에서 변수의 타입은 런타입(프로그램이 실행될 때)에 결정된다.

3. 함수형 프로그래밍을 지원한다.

JS는 함수를 이용하여 프로그래밍을 할 수 있다.

4. 비동기 처리가 가능한 프로그래밍 언어다.

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

웹 개발 전바에 걸쳐서(FrontEnd, BackEnd, DB) JS를 활용할 수 있다.

 

 

이제 오늘 배운 javascript 문법에 대해 정리해보겠습니다.

Javascript 기본 문법

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

변수의 5가지 주요개념

// [변수의 5가지 주요개념]

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

var myVar = "Hello World";

console.log(myVar);

// 변수 이름 : myVar
// 변수 값 : "Hello World"
// 변수 할당 : =
// 변수 선언 : var myVar
// 변수 참조 : console.log를 사용할 때 myVar를 참조했다.

var myVar1;
myVar1 = 3
// var myVar1 = 3; 과 같다.
// 변수 선언과 할당을 따로 해도 된다.
// 하지만 보통 한 줄로 쓴다.

 

변수 선언

// 변수를 선언할 수 있는 3가지 방법 : var, let, const
// 1. var
var myVar = "Hello World";
console.log(myVar);

// 2. let
let myLet = "Hello World1";
console.log(myLet);

// 3. const
const myConst = "Hello World2";
console.log(myConst);

 

var, let, const의 차이점

1. var는 똑같은 변수를 다시 선언할 수 있다. 하지만 let, const는 똑같은 변수를 다시 선언할 수 없다.

// 1. var
var myVar = "Hello World";
var myVar = "Test 1";
console.log(myVar);
// var는 똑같은 변수를 다시 선언할 수 있다.

// 2. let
let myLet = "Hello World1";
// let myLet = "Test 2 ";
console.log(myLet);
// let은 똑같은 변수를 다시 선언할 수 없다.

// 3. const
const myConst = "Hello World2";
// const myConst = "Test3";
console.log(myConst);
// const는 똑같은 변수를 다시 선언할 수 없다.

2. var, let은 재할당을 할 수 있다. const는 재할당을 할 수 없다.

// 1. var
var myVar = "Hello World";
var myVar = "Test 1";
myVar = "GoodBye";
console.log(myVar);
// var는 변수를 다시 할당할 수 있다.

// 2. let
let myLet = "Hello World1";
// let myLet = "Test 2 ";
myLet = "GoodBye 1";
console.log(myLet);
// let은 변수를 다시 할당할 수 있다.

// 3. const
const myConst = "Hello World2";
// const myConst = "Test3";
// myConst = "GoodBye 2";
console.log(myConst);
// const는 변수를 다시 할당할 수 없다.

 

데이터 타입

1. 숫자

// 데이터 타입
// runtime : run 하는 time
// 코드를 작성할 때가 아니라, 실제 코드가 실행될 때
// 터미널에 코드가 실행될 때
// 그 때, 데이터 타입이 결정된다.
// java : String a = "abc";
// const a = "abc";

// 1. 숫자
// 1-1. 정수
let num1 = 10;
console.log(num1);
console.log(typeof num1);
// typeof 를 통해 변수의 타입을 트래킹할 것이다.
// let num1 = "10"; 처럼 ""를 붙이면 type이 문자형(string)으로 바뀐다.

// 1-2. 실수(float)
let num2 = 3.14;
console.log(num2);
console.log(typeof num2);
// 실수형도 type은 똑같이 number 타입이다.

// 1-3. 지수형(Exp)
let num3 = 2.5e5; // 2.5 x 10^5
console.log(num3);
console.log(typeof num3);
// 계산된 결과가 출력된다.
// 지수형도 type은 똑같이 number 타입이다.

// 1-4. NaN(Not a Number)
let num4 = "Hello" / 2;
console.log(num4);
console.log(typeof num4);
// 숫자가 아닌 값을 변환하려고 할 때, NaN이 출력된다.

// 1-5. Infinity(무한대)
let num5 = 1 / 0;
console.log(num5);
console.log(typeof num5);
// Infinity로 출력되고, type은 Number이다.

// 1-6. Infinity(무한대)
let num6 = -1 / 0;
console.log(num6);
console.log(typeof num6);
// -Infinity로 출력되고, type은 Number이다.

2. 문자

// 2. 문자 : string(문자열 = 문자의 나열)
// '  ' = "  " -> 이렇게 감싸줘야지만 문자열이 된다.
let str = "Hello World!";
// console.log(str);
// console.log(typeof str);

// 2-1. 문자열 길이 확인하기
console.log(str.length);

// 2-2. 문자열 결합하기
let str1 = "Hello, ";
let str2 = "World!";
let result = str1.concat(str2);
console.log(result);

// 2-3. 문자열 자르기
let str3 = "Hello, World!";
console.log(str3.substr(7, 5)); // 시작위치, 몇 개 까지
console.log(str3.slice(7, 12)); // 시작위치, 끝 위치

// 2-4. 문자열 검색
let str4 = "Hello, World!";
console.log(str4.search("World"));
// 월드가 시작되는 지점을 찾는 것

// 2-5. 문자열 대체
let str5 = "Hello, World!";
let result1 = str5.replace("World", "Javascript");
console.log(result1);

// 2-6. 문자열 분할
let str6 = "apple, banana, kiwi";
let result2 = str6.split(",");
console.log(result2);
//[ 'apple', ' banana', ' kiwi' ]

3. 불리언(Boolean)

// 불리언(Boolean)
// true(참), false(거짓)
let bool1 = true;
let bool2 = false;

console.log(bool1);
console.log(typeof bool1);
console.log(bool2);
console.log(typeof bool2);

// if : 만약 ~ 한다면! 을 다루기 위해서는 항상 boolean이 필요하다.
// if () {} 와 같이 if문을 사용할 때, 항상 ()안에 boolean 타입이 들어가게 된다.

4. undefined

// undefined : 정의되지 않은, 값이 할당되지 않은
let x;
console.log(x);
// 변수를 선언하고 값을 할당하지 않으면 나온다.

5. null

// null : 값이 존재하지 않음을 '명시적'으로 나타내는 방법
// null !== undefined
// undefined는 값이 정의되지 않은 것이고, null은 개발자가 의도적으로 값이 없다라는 것을 명시한 것
let y = null;
console.log(y);

6. object

// object(객체) : key-value pair
let person = {
  name: "cho",
  age: 27,
  isMarried: false,
};
// key : value
// value에는 아무 데이터 타입이든 들어갈 수 있다.
// key는 그냥 쓰면 된다.
console.log(typeof person);

7. array

// array(배열)
// 여러 개의 데이터를 순서대로 저장하는 데이터 타입!
let number = [1, 2, 3, 4, 5];
// ","를 기준으로 요소들을 순서대로 나열했다.
// 요소 하나하나가 index(자기의 위치에 대한 데이터)를 가지고 있다.
let fruits = ['apple', 'banana', 'orange']
// 거의 모든 index는 0부터 시작한다.

 

형 변환

1. 암시적 형 변환 : 의도하지 않았지만 자동으로 변환.

// 형 변환
// 형태 -> 바꾼다
// 명시적 형 변환, 암시적 형 변환
// 명시적 : 개발자가 의도적으로 변환
// 암시적 : 의도하지 않았지만 자동으로 변환

// 1. 암시적
// 1-1. 문자열
let result1 = 1 + "2";
console.log(result1);
console.log(typeof result1);

let result2 = "1" + true;
console.log(result2);
console.log(typeof result2);
// 문자열과 다른 데이터 타입이 + 로 만나면 문자열이 우선 시 된다.
// {}, null, undefined + "1" --> 문자열

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

let result4 = "2" * "3";
console.log(result4);
console.log(typeof result4);
// 더하기 연산자가 아닌 -, *, / 등이 나왔을 때는 항상 숫자가 우선시된다.

2. 명시적 형 변환 : 개발자가 의도적으로 변환

// 2. 명시적 형 변환
// 2-1. Boolean
// 기본적으로 어떠한 타입으로 형 변환을 해줄 지 써주어야 한다.
console.log(Boolean(0));
// 0 을 Boolean 타입으로
console.log(Boolean(""));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(NaN));
// 위의 결과는 모두 false가 나온다.
console.log(Boolean("false"));
// 빈 문자열이 아닌 문자는 모두 true 가 나온다.
console.log(Boolean({}));
// 객체는 값이 비어있을 지라도 true가 나온다.

// 2-2. 문자열
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);
// 안에 넣은 값들을 모두 string으로 변환해서 string 값이 나온다.

// 2-3. Number
let result10 = Number("123");
console.log(result10);
console.log(typeof result10);
// number 값으로 123이 출력된다.

 

연산자

Javascript에서는 변수와 상수를 이용해서 많은 연산들을 처리하게 된다. 그 때 필요한 것이 연산자이다.

 

1. 산술 연산자(+, -, *, /, %)

// 연산자(+, -, *, /, %)

// 1-1. 더하기 연산자
console.log(1 + 1); //2
console.log(1 + "1"); //11
// 우선 순위가 문자열에 있다.

// 1-2. 빼기 연산자
console.log(1 - "2"); //-1
// 우선 순위가 숫자에 있다.
console.log(1 - 2); //-1

// 1-3. 곱하기 연산자
console.log(2 * 3); //6
console.log("2" * 3); //6
// 우선 순위가 숫자에 있다.

// 1-4. 나누기 연산자
console.log(4 / 2); //2
console.log("4" / 2); //2
// 우선 순위가 숫자에 있다.

// 1-5. 나누기 연산자 vs 나머지 연산자
console.log(5 / 2); //2.5
console.log(5 % 2); //1

2. 할당 연산자

// 2. 할당 연산자(assignment)
// 2-1. 등호 연산자(=)
let x = 10;
console.log(x); //10

// 2-2. 더하기 등호 연산자(+=)
x += 5;
// x = x + 5
console.log(x); //15

// 2-3. 빼기 등호 연산자(-=)
x -= 5;
// x = x - 5
console.log(x); //10

// 2-4. 곱하기 등호 연산자(*=)
let a = 10;
a *= 2;
console.log(a); //20

// 2-5. 나누기 등호 연산자(/=)
let a = 10;
a /= 2;
console.log(a); //5

3. 비교 연산자

좌, 우 혹은 어떠한 값을 비교해서 true 또는 flase의 값을 내는 연산자. 때문에 프로그래밍에서 조건을 제시할 때 상당히 중요한 역할을 하는 연산자. 비교 연산자는 비중이 높다.

// 3. 비교 연산자(--> true 또는 false를 반환하는 연산자)
// 3-1. 일치 연산자(===)
// 타입까지 일치해야 true를 반환하는 연산자
console.log(2 === 2); // true
// 숫자 2가 숫자 2랑 같니?
console.log("2" === 2); // false
// 문자 2와 숫자 2가 같니?
console.log(2 === "2"); // false

// 3-2. 불일치 연산자(!==)
// 타입까지 일치해야 false를 반환하는 연산자
console.log(2 !== 2); //false
// 숫자 2가 숫자 2와 다르니?
console.log("2" !== 2); // true
console.log(2 !== "2"); // true

// 3-3. 작다 연산자(<)
console.log(2 < 3); // true

// 3-4. 크다 연산자(>)
console.log(2 > 3); // false


// 3-5. 작거나 같다 연산자(<=)
console.log(2 <= 3); // true


// 3-6. 크거나 같다 연산자(>=)
console.log(2 >= 3); // false

// 작다, 크다, 작거나 같다, 크거나 같다 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

4. 논리 연산자

Boolean 타입(true, false)를 비교하는 연산자.

// 4. 논리 연산자
// Boolean 타입(true, false)를 비교하는 연산자.
// 4-1. 논리곱 연산자(&&) : 모두 true일 때 true 반환
console.log(true && true); //true
console.log(true && false); //false
console.log(false && true); //false
console.log(false && false); //false

// 4-2. 논리합 연산자(||) : 두 값 중 하나라도 true일 때 true 반환
console.log(true || true); //true
console.log(true || false); //true
console.log(false || true); //true
console.log(false || false); //false

// 4-3. 논리 부정 연산자
// : 값을 반대로 바꿈
console.log(!true); //false
let b = true;
console.log(b);  //true
console.log(!b);  //false

5. 삼항 연산자

활용 빈도가 상당히 많다. 중요하다. 조건에 따라 값을 결정한다.

// 5. 삼항 연산자(중요!)
// 조건에 따라 값을 선택한다.
let y = 10;
let result = y > 5 ? "크다" : "작다";
console.log(result); //크다

let z = 20;
let result1 = z < 10 ? "작다" : "크다";
console.log(result1); //크다

6. 타입연산자

// 6. 타입연산자(typeof)
console.log(typeof "5"); //string

 

함수

함수 = function(기능)

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

Javascript 내에서 기능의 단위로 묶은 다음 재활용을 한다.

함수를 잘 만들면 Javascript 내에서 효율적인 코드를 짤 수 있다.

 

함수 정의하기(선언하기)

// 함수 정의하기(선언하기)
// 1. 함수 선언문
// function[키워드] add[함수이름]([매개변수(input)]) {
//         //함수 내부에서 실행할 로직
// }

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

    let Result = x + y;

    return Result;
}

// 2. 함수 표현식
let add2 = function(x, y) {
    
    let Result = x + y;

    return Result;
}

함수 호출하기

// 함수를 호출한다(= 사용한다)
// 함수명() -> add(입력값)
console.log(add(3, 4)); //7

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

console.log(add2(10, 20));  //30

// input : 함수의 input -> 매개변수
// output : return문 뒤에 오는 값 : 반환값

 

 

스코프 : 변수의 영향 범위

 

전역변수(전역 스코프) : 변수가 전체 영역에서 영향을 끼칠 수 있다.

// 스코프, 전역변수, 지역변수, 화살표 함수
let x = 10;

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

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

지역변수(지역 스코프) : 함수 내에서만 변수가 영향을 끼칠 수 있다.

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

console.log(x);  // 오류 발생 : x가 정의되지 않았다.
printX(); //

스코프, 전역변수, 지역변수를 잘 알고 있어야 예상하지 못한 상황이 발생하지 않는다.

스코프를 잘 생각하면서 코드를 짜야 한다.

 

화살표 함수

ES6부터 등장한 신 문법

처음에는 function 키워드를 계속 쓰다가 익숙해지고 나면 화살표 함수로 조금씩 넘어가는 것을 추천한다. function 키워드를 이용하여 정석대로 사용하는 것을 권장한다.

// 화살표 함수
// ES6 신 문법
function add (x, y){
    return x + y
}

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

// 1-2. 한 줄로
let arrowFunc02 = (x, y) => x + y;
// return 문을 뺄 수 있는 조건은 중괄호 안에 있는 줄이 한 줄이면 가능하다.
// 한 줄로 쓸 때는 중괄호도 같이 삭제 해주어야 한다.

function testFunc(x) {
    return x;
}

// 화살표 함수로!
let arrowFunc03 = x => x;
// 매개변수가 하나일 때는 매개변수를 감싸는 소괄호도 없어도 된다.