[2주차] Javascript 문법 종합반 1주차 강의 내용 정리 (1)

voyager 999·2023년 12월 29일
JavaScript

JavaScript

목록 보기
1/19

자바스크립트 소개

자바스크립트의 역사

자바스크립트는 1995년에 탄생한 브라우저 동작 스크립트 언어이다. 2005년 자바스크립트 기반 기술인 AJAX의 등장으로 UX가 폭발적으로 향상되어 많은 개발자들이 자바스크립트를 사용하게 되었다. 2009년 Node.js의 등장으로 자바스크립트는 프론트엔드, 백엔드, DB 어디에서든 사용될 수 있는 언어가 되었다.

자바스크립트 언어의 특징

  1. 객체 지향 프로그래밍 지원
  2. 동적 타이핑 지원: 변수를 선언할 때 타입 지정X, 런타임 시점에 자동으로 데이터 타입 결정
  3. 함수형 프로그래밍 지원: 코드의 재사용과 가독성을 높일 수 있음
  4. 비동기 처리 가능
  5. 클라이언트/서버 모두에서 사용 가능

변수와 상수

변수

변수를 통해 기억하고 싶은 값을 라벨을 붙인 상자(메모리)에 저장하여 재사용할 수 있다.

  • 변수의 5가지 개념: 이름, 값, 할당, 선언, 참조
  • 변수를 할당하는 3가지 방법: var, let, const

var, let, const 차이점

  • var는 똑같은 변수 이름으로 재선언 할 수 있으나, let/const는 안 된다.
  • var, let은 변수값을 재할당 할 수 있으나, const는 안 된다 --> const는 한 번 할당한 값을 변경할 수 없는 상수

데이터 타입

typeof 연산자를 통해 데이터 타입을 확인할 수 있다.

let num = 10;
console.log(num); // 10이 출력된다.
console.log(typeof num); // number가 출력된다.

숫자(number)

* 정수: 큰따옴표(") 없이 쓴다.
* 실수(float): 정수와 마찬가지로 데이터 타입 number
* 지수(Exp): 값 바로 뒤에 e를 붙여 사용, 데이터타입 number

let num = 2.5e5 // 2.5 x 10^5
console.log(num); // 250,000
console.log(typeof num); // number

* NaN(Not a Number): 숫자가 아닌 값

let num = "Hello" / 2; //문자열을 2로 나눌 수 없음
console.log(num); // NaN

* Infinity/-Infinity: 양수/음수를 0으로 나누었을 때

문자열(string)

작은 따옴표나 큰따옴표로 감싸준다.

  • length 속성으로 문자열의 길이를 확인할 수 있다.
  • concat 속성으로 문자열을 결합할 수 있다.
let str1 = "안녕";
let str2 = "하세요";
let result = str1.concat(str2);
console.log(result); // 안녕하세요
  • substr(n,m): n번째 자리에서 m개만큼 자를 수 있다.
let str = "빨주노초파남보무지개";
console.log(str.substr(4, 3)); // 파남보
  • slice(n,m): n번째 자리에서 m번째 자리까지 자를 수 있다.
let str = "빨주노초파남보무지개";
console.log(str.slice(3, 8)); // 초파남보무
  • search("") 속성으로 찾고 싶은 값의 시작 지점을 찾을 수 있다. 
let str = "빨주노초파남보무지개";
console.log(str.search("무지개")); // 7
  • replace("n","m"): n문자열을 m문자열로 대체할 수 있다.
let str = "안녕하세요";
let result = str.replace("하세요","히 계세요");
console.log(result); // 안녕히 계세요
  • split(""): 어떤 문자열을 기준으로 문자열을 자르고, 나눠진 문자열을 배열 형태로 반환한다.

불리언(boolean)

값이 true/false 만 존재하는 자료형으로, if문 등에서 사용된다.

undefined

선언은 되었으나 값이 할당(정의)되지 않은 변수

null

값이 존재하지 않음을 의도적/명시적으로 나타내는 방법

객체(object)

여러 가지 key-value pair 값을 중괄호 {}로 묶은 데이터형

let spongebob = {
   name: "spongebob";
   age: 37;
   isMarried: false;
};

배열(array)

여러 가지 데이터를 순서대로 저장하는 데이터 타입으로, 배열 안의 데이터는 0부터 순서대로 시작하는 고유 index를 갖고 있다.

형변환

암시적 형변환

  • 더하기 연산자(+)를 사용하게 되면 문자가 우선시됨
    "문자열" + 다른 데이터 타입 ---> string
  • 그 외의 연산자를 사용하면 숫자가 우선시됨
    "문자열" - 숫자 ---> number
    "문자열" * "문자열" ---> number

명시적 형변환

  • Boolean형으로 변환
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, 값이 있는 문자열은 true
console.log(Boolean({})); // true, 객체는 비어있어도 true
  • 문자형으로 변환
let result1 = String(123);
console.log(result1);         // 123
console.log(typeof result1); // string

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

let result3 = String(false);
console.log(result3);         //false
console.log(typeof result3); // string

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

let result5 = String(undefined);
console.log(result5);         //undefined
console.log(typeof result5); // string
  • 숫자형으로 변환
let result1 = Number("123");
console.log(result1);        // 123
console.log(typeof result1); // number

let result2 = Number(true);
console.log(result2);         // 1
console.log(typeof result2); // number

let result3 = Number();
console.log(result3);         // 0
console.log(typeof result3); // number

let result4 = Number(null);
console.log(result4);         // 0
console.log(typeof result4); // number

let result5 = Number(undefined);
console.log(result5);         // NaN
console.log(typeof result5); // number

이 결과를 지켜보니 왠지 숫자형에서는 1이 true, 0이 false인 느낌이 드는데, 맞으려나? boolean과 조금 비슷하게 동작하는 듯한 느낌이 들었다.

연산자

산술 연산자

  • 더하기 연산자(+), 빼기 연산자(-), 곱하기 연산자(*), 나누기 연산자(/)
  • 나머지 연산자(%): 나눈 뒤 나머지 값을 구함

할당 연산자

* 등호 연산자 = : 선언한 변수에 값을 할당
+=, -=, =, /= : 변수에 이미 할당된 값에 더하고, 빼고, 곱하고 나눈 값을 재할당

비교 연산자

좌/우의 값을 비교해서 true/false를 반환하는 연산자
* 일치 연산자 === : 값과 타입이 모두 일치하면 true를 반환
* 불일치 연산자 !== : 값과 타입이 모두 일치하면 false를 반환
* <, <=, >, >= : 작거나 보다 작거나... 어쩌구 저쩌구

논리 연산자

true와 false를 비교하는 연산자

  • 논리곱 연산자 && : 값이 모두 true일 때만 true를 반환
console.log(true && true); // true, 이외는 모두 false
  • 논리합 연산자 || : 두 값 중 하나라도 true인 경우 true를 반환
console.log(true || false); // true
  • 논리부정 연산자 ! : 값을 반대로 바꿈
let a = true;
console.log(!a); // false
  • 삼항 연산자
    조건 ? 조건이 true일 때 반환할 값 : 조건이 false일 때 반환할 값
    순서대로 입력하여 조건에 따라서 다른 값을 반환할 수 있다.
let number = 10;
let result = number > 5 ? "크다" : "작다"
console.log(result); // 크다
  • 타입 연산자 typeof
profile
voyager 999
다음 포스트

[1주차] 자바스크립트의 위치별 장단점

0개의 댓글