What I Learnd/TIL

TIL - JavaScript 기초문법 정리1

키싸 2023. 5. 22. 17:42

자바스크립트(JavaScript)란?

동적인 액션을 제어하는 언어

  • 1999년자바스크립트 표준화(EXMA-262) 완료
  • 2005년 AJAX 등장!
    -> 부분 새로고침이 가능해진 기점으로 이로 인해 폭발적인 UX 향상의 계기가 되었다.
  • 2008년 V8 엔진 출시(google)으로 속도 향상
  • 2009년 Nod.js 등장, 서버 개발 활성화
    • 서버개발의 지각변동 : PHP, Ruby, Python, Java -> JavaScript(Node.js)
    • 하나의 언어 → FrontEnd + BackEnd + DB(MongoDB) = FullStack
  • 2015년 ECMAScript 6(ES6) 버전 출시 
  • 2016년 프론트엔드 프레임워크(React, Vue, Angular) 대중화, SPA 개발 활성화 
  • 현재 자바스크립트는 프론트엔드 및 백엔드 개발 분야에서 널리 사용되며, Node.js를 이용한 서버 개발도 활발하게 이루어지고 있다.

자바스크립트는 객체지향프로그래밍 언어다. 이는, 객체라는 그룹으로 묶어서 수행하는 속성 
절차지향프로그래밍 : 위에서부터 아래로 순서대로 수행하는 속성

변수와 상수

변수의 5가지 주요  개념

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

var myVar = "Hello World";

변수를 선언할 수 있는 3가지 방법 : var, let, const

//1. var
var myVar = "hello world";
var myVar = "Test 1"; //똑같은 이름으로 다시 선언할 수 있다
myVar = "GoodBye"     //이미 선언한 값에 재할당을 할 수 있음
cosole.log(myVar);

//2. let
let myLet = "hello world";
//let myLet = "Test 2"; 똑같은 이름으로 다시 선언할 수 없다
myLet = "GoodBye 1"  //이미 선언한 값에 재할당을 할 수 있음
cosole.log(myLet);

//3. const
const myConst = "hello world2";
//const myConst = "Test 3"; 똑같은 이름으로 다시 선언할 수 없다
myConst = "GoodBye 2"   //이미 선언한 값에 재할당을 할 수 없음
console.log(myConst);

데이터 타입

runtime (run 하는 Time)에! 즉, 코드를 작성할 때가 아니라, 실제 코드가 실행될 때 -> 앞에 터미널에 코드가 실행될 때
그 때, 데이터 타입이 결정된다.

java : String a = "abc";
const a ="abc";

1. 숫자

1-1. 정수

let num1 = 10;
console.log(num1);
console.log(typeof num1); //typeof 라는 연산자, 타입을 트래킹해야할 때는 이렇게 확인 할 수있다.

1-2. 실수(float)

let num2 = 3.14;
console.log(num2);
console.log(typeof num2);

1-3. 지수형(Exp)

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

1-4. NaN

let num4 ="Hello" / 2;
console.log(num4) //NaN 값이 출력 : Not a Number

1-5. Infinity(무한대)

let num5 = 1 / 0;
console.log(num5);
console.log(typeof num5); //Infinity 출력

1-6. Infinity(무한대)

let num6 = -1 / 0;
console.log(num6);
console.log(typeof num5); // -Infinity 출력

 

2. 문자

: string(문자열 = 문자의 나열) :  ' ' = " "  이렇게 감싸줘야만 문자열(string)이 된다. 

let str = "hello world"
console.log(str);
console.log(typeof str);

// 2-1. 문자열의 길이 확인하기
console.log(str.length); //str 이 가지고 있는 문자열의 길이 값을 출력

// 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(str.search("world")); // world 가 시작되는 위치를 찾아서 출력

// 2-5. 문자열 대체
let str5 = "hello, world!";
let result01 = str5.replace("world", "javaScript");
console.log(result01);

// 2-6. 문자열 분할
let str6 = "apple, banana, melon"; 
let result02 = str6.split(","); // 뭘 기준으로 자를건지. spliter 역할을 할 걸 넣어줄 것
console.log(result02); //[ 'apple', ' banana', ' melon' ] 나눠져서 출력!

 

3. 불라인(Boolean)

// 불라인(Boolean)은 true, false
let bool1 = true;
let bool2 = false;

console.log(bool1);	//true
console.log(typeof bool1);	//boolean
console.log(bool2);	//false
console.log(typeof bool2);	//boolean

 

4. undefined 과 null 은 다르다

// undefined 값이 할당되지 않았을 때
let x;
console.log(x); // undefined 값 출력

// null : 값이 존재하지 않음을 '명시적'으로 나타내는 방법 (개발자가 일부러 값이 없다는 것을 보여줄 때)
// null 과 undefined 는 다른 것
let y = null;
console.log(y); // null 출력

 

5. object(객체) : key-value pair 를 기억하자!

// object(객체) : key-value pair 를 기억하자!
let person = {
    name : 'baek',  // key
    age : 30,       // key
    isGood: true,   // key 데이터타입 어떤 것이 들어가도 상관없다!
};

 

6. array(배열) : 여러 개의 데이터를 순서대로 저장하는 데이터 타입

// array(배열)
// 여러 개의 데이터를 순서대로 저장하는 데이터 타입!
let number = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange']; // 각 항목마다 가진 index가 있다!

 

7. 형 변환 :  형태를 바꾸는 것으로 명시적 형 변환과 암시적 형 변환 이해하기!

// 형 변환
// 형태 -> 바꾼다
// 명시적 형 변환(의도하여 형을 변환한 경우), 암시적 형 변환(의도하지 않았지만)

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

let result2 = "2" + true;
console.log(result2); // 1true 출력
console.log(typeof result2); //string 출력

// {}, null, undefined + "1" => 문자열

// 1-2. 숫자
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 출력

// 더하시 연산자가 아닌 다른 연산자들이 나왔을 때에는 항상 숫자가 우선시 된다!
// 문자랑 문자가 나와도 암시적으로 순자로 변환이 된다!

// 2. 명시적 형 변환
// 2-1. Boolean
console.log(Boolean(0));    // 0이라는 숫자를 불리안 타임으로 바꾸고 싶다. //false 출력
console.log(Boolean(""));   //
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(NaN));
console.log(Boolean("-------"));//true 출력
console.log(Boolean("false"));  //true 출력 : 문자열은 어떤 문자든 어떠한 값이 있으므로 true가 나옴
console.log(Boolean({}));       //true 출력 : 객체는 안이 비어있더라고 true가 나옴

// 2-2. 문자열; 명시적 형 변환
let result5 = String(123);
console.log(typeof result5);    //string 출력
console.log(result5);           //123 출력

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

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

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

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


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

 

8. 연산자

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

// 1. 더하기 연산자
console.log(1 + 1);
console.log(1 + "1"); //더하기 연산자는 문자에 우선순위가 있기 때문에 문자열로 나온다.

// 2. 빼기 연산자
console.log(1 - "2");   // -1
console.log(1 - 2);     // -1 

// 3. 곱하기 연산자(*)
console.log(2 * 3);     // 6
console.log("2" * 3);   // 6 

// 4. 나누기 연산자(/)
console.log(4 / 2);     // 2
console.log("4" / 2);   // 2 : 더하기 연산자를 제외하고 모든 연산자들은 숫자에 우선순위

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

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

// 6-2. 더하기 등호 연산자(+=)
x += 5; //원래 선언했던 x 에다가 5를 더해줘
console.log(x);

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

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

// 여기서 x를 -10으로!
x -= 20;
// x = x - 20;
console.log(x);

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


// 비교 연산자(--> true 또는 false를 반환하는 연산자)

// 1. 일치 연산자(===) 좌와 우를 비교하는 연산자로,
// 타입까지 일치해야 true를 반환하는 연산자
console.log(2 === 2);   // true
console.log("2" === 2); // false ; 타입까지 일치해야 true가 나오기 때문에.
console.log(2 === "2")  // alse

// 2. 불일치 연산자(!==)
// 타입까지 일치해야 false를 반환하는 연산자

// 숫자 2가 숫자 2와 다르니? 아니!
console.log(2 === 2);   // false
console.log("2" === 2); // true ; 타입까지 일치해야 true가 나오기 때문에.
console.log(2 === "2")  // true

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

// 4. 논리 연산자 : 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);    // false 출력

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

console.log("-----")
let z = 20;
// 3항연산자를 이용해서 z가 10보다 작은 경우 "작다"를
let answer = z < 10 ? "크다" : "작다"
console.log(answer); // 작다
let answer2 = z > 10 ? "크다" : "작다" 
console.log(answer2); // 10보다 크다면 "크다"를 출력하기 // 크다

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

 

9. 함수 (function)

:  input과 output을 가지고 있는 단위로, 우리는 이를 기능의 단위로 묶은 다음 재활용 한다.
이를 통해 우리는 자바스크립트로 효율적인 코드를 짤 수 있다.

// 함수 = function(기능)
// input과 output을 가지고 있는 단위
// 이를 기능의 단위로 묶은 다음에 재활용을 한다. 즉, 이를 통해 우리는 자바스크립트로 효율적인 코드를 짤 수 있다.


// 1. 함수 선언문
// fucntion add () {
//     // 함수 내부에서 실행할 로직이 들어간다.
// }

// 두 개의 숫자를 입력 받아서 덧셈을 한 후 내보내는 함수 만들어보기.
function add (x, y) {
    return x + y; //result라는 값을 return해서 받아온다!
}

// 2. 함수 표현식
let add2 = function (x, y) {
    return x + y;
}   // 위와 동일한 역할을 하지만 방법이 다른 것

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

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

let functionResult2 = add(10, 20); // add2를 가지고 10과 20을 더한 값을 출력!
console.log(functionResult2); // 30

// input : 함수의 input -> 매개변수(매개체가 되는 변수!)
// output : return문 뒤에 오는 값 -> 반환값

 

10. 스코프 (scope)

: 선언이 영향을 끼치는 영역을 뜻한다. 

let x = 10; // 전체 영역에서 선언이 된 변수 = 함수 내부/외부에서 log 가 찍힌다.


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

console.log(x); // 10
printX()
function printX() {
    let x = 10; // 내부에서 선언된 변수 -> 지역변수 = 스코프가 작다.
    console.log(x); // 10
}

console.log(x); // ReferenceError: x is not defined
//왜냐하면 선언된 변수 x는 위 함수의 내부에서 선언되었으므로 외부까지 영향을 끼치지 않는다!
printX();

 

11. 화살표 함수

: ES6 신문법! 이라고 볼 수 있다

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

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

// 1-2, 한 줄로
let arrowFucn02 = (x, y) => x + y; // 한줄로 사용할 경우 중괄호 삭제는 필수!

// 위 세 문법의 기능은 똑같다!
function testFunc(x) {
    return x; //매개 변수를 받아서 그대로 리턴을 하는 함수가 있다,
}

//위 함수를 화살표 함수로 만들면?!
let arrowFucn03 = x => x;
저작자표시