[2024.08.12 TIL] JS 기본 문법

박지영·2024년 8월 12일
JS 기본 문법JS 역사JS 특징TILjs
0

Today I Learned

목록 보기
1/67

📘 JavaScript 역사 및 특징

📖 JavaScript 역사

  • 1995년 탄생

    • 넷스케이프 커뮤니케이션에서 제작
    • 브라우저 동작 스크립트 언어

  • 1999년 javascript 표준화

  • 2005년 ajax 등장

    • 비동기 웹 어플리케이션 개발 가능
    • UX 향상 (유저 경험 user experience)

  • 2008년 google v8 엔진 출시(crome)

    • 속도가 엄청나게 향상
    • 컴파일러와 메모리 관리 시스템 향상

  • 2009년 node.js 등장

    • 브라우저 외에서도 사용 가능. -> 서버 개발 가능
    • 하나의 언어로 frontEnd + backEnd + DB = fullStack

  • 2015년 ECMAScript 6(ES6) 출시

  • 2016년 프론트엔드 프레임워크(React, vue, angular) 대중화

  • 현재 javascript는 프론트엔드, 백엔드 개발 및 서버 개발도 활발하게 이루어지고 있다.

📖 JavaScript 특징

  • 객체 지향 프로그래밍

    • 데이터와 함수의 집합. (객체 내부에서는 각각 프로퍼티(property), 메소드(method)로 부른다)

    • 객체를 만들 때는 {}를 사용. 각 속성은 ,로 구분하고 속성은 이름과 값을 가진다.

    • 이름은 문자열로 작성, 값은 다양한 데이터 타입 사용 가능.

  • 동적 타이핑

    • js는 변수를 지정할 때 타입 지정x

    • 런타임 시점에서 데이터 타입 결정. (프로그램 실행 단계)

  • 함수형 프로그래밍 지원

    • 함수를 일급 객체(first-class object)로 취급.

    • 일급 객체란 함수를 변수에 할당(변수 이름으로 호출)하거나 인자로 전달(callback 함수) 또는 함수로 반환(고차 함수)할 수 있는 함수.

  • 비동기 처리

    • 작업을 순서대로 진행하지 않고 병렬로 처리.

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

    • 클라이언트(프론트엔드 react 등) 서버(백엔드 node.js 등) 모두 사용.

📘 JavaScript 기본 문법

📖 변수와 상수

  • 변수
    • 메모리에 저장. 재사용.
    • 변수 이름 : 저장된 값의 고유 이름
    • 변수 값 : 변수에 저장된 값
    • 변수 할당 : 변수에 값을 저장하는 행위
    • 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위
    • 변수 참조 : 변수에 할당된 값을 읽어오는 것
    • 변수를 선언 할 수 있는 3가지 방법 : var, let, const
      var myVar = "Hello World!";
let myLet = "Hello World!1";
const myConst = "Hello World!2";
      var - 전역 변수. 재선언 가능.
      let - 블록 스코프. 재할당 가능.
  • 상수 const - 블록 스코프. 재할당 불가능.

📖 데이터 타입

  • 숫자 (Number)
    • 정수(int long)
      let num1 = 10;
    • 실수(float double)
      let num2 = 3.14;
    • 지수(exp)
      let num3 = 2.5e5 // 2.5 x 10^5
    • NaN(숫자가 아님)
      let num4 = "Hello" / 2;
    • infinity(무한대)
      let num5 = 1 / 0; //infinity
let num6 = -1 / 0; //-infinity
  • 문자(String) (문자열 = 문자의 집함)
    let str = "Hello World!";
    • length(문자열 길이)
      let str = "Hello World!";
str.length // 12
    • concat(문자열 결합)
      let str1 = "Hello ";
let str2 = "World!";
let result = str1.concat(str2); // Hello World!
    • substr, slice(문자열 자르기)
      let str = "Hello World!";
//시작 위치, 자를 길이
str.substr(6, 5); // World
//시작 위치, 끝 위치
str.slice(6, 12); // World!
    • search(문자열 검색)
      let str1 = "Hello World!";
console.log(str1.search("World")); // 6
    • replace(문자열 교체)
      let str2 = "Hello World!";
let result = str2.replace("World", "Javascript");
console.log(result); // Hello Javascript
    • split(문자열 분할)
      let str3 = "apple, banana, kiwi";
let result1 = str3.split(",");
console.log(result1); // [ 'apple', ' banana', ' kiwi' ]
  • boolean(참(true) / 거짓(false))
    let bool1 = true;
let bool2 = false;
console.log(bool1); // true // typeof boolean
console.log(bool2); // false // typeof boolean
  • undefined (정의되지 않음 / 값 할당x)
    let x;
console.log(x); // undefined
  • null (값이 존재하지 않음을 명시
    let y = null;
console.log(y); // null
  • object(객체) (key : value)
    let person = {
   name : 'park',
   age : 20,
   married : true
};
console.log(person); // { name: 'park', age: 20, married: true }
  • array(배열) (순서대로 저장. 인덱스 값이 존재)
    let number = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange'];
console.log(number); // [ 1, 2, 3, 4, 5 ] // number[0] = 1
console.log(fruits); // [ 'apple', 'banana', 'orange' ] // fruits[0] = 'apple'

📖 형변환

  • 암시적 형변환

    • 문자열

      let result = 1 + "2";
console.log(result); // 12
console.log(typeof result); // string

let result1 = "1" + true;
console.log(result1); // 1true
console.log(typeof result1); // string

      다른 데이터 타입 + 문자 = 문자 / +를 사용할 경우만 문자열 우선

    • 숫자

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

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

      다른 데이터 타입 - or * 등 숫자 = 숫자 / -, * 등을 사용할 경우 숫자 우선

  • 명시적 형변환

    • boolean

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

      문자열 - 값이 있나 없나 판별
      객체 - 존재하나 존재하지않나 판별

    • string(문자열)

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

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

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

    • number(숫자)

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

📖 연산자

  • 더하기 연산자 (+)
    console.log(1 + 1); //2
console.log(1 + "1"); //11
  • 빼기 연산자 (-)
    console.log(1 - "2"); // -1
console.log(1 - 2); // -1
  • 곱하기 연산자 (*)
    console.log(2 * 3); // 6
console.log("2" * 3); // 6
  • 나누기 연산자 (/)
    console.log(4 / 2); //2
console.log("4" / 2); //2
  • 나누기 연산자 (/) vs 나머지 연산자 (%)
    console.log(5/2); // 2.5
console.log(5%2); // 1
  • 할당 연산자 (assignment)
    • 등호 연산자 (=)
      let x = 10;
    • 더하기 등호 연산자 (+=)
      let x = 10;
x += 5; // x = x + 5;
console.log(x); // 15
    • 빼기 등호 연산자 (-=)
      let x = 10;
x -= 5; // x = x - 5;
console.log(x); // 5
    • 곱하기 등호 연산자 (*=)
      let a = 10;
a *= 2; // a = a * 2;
console.log(a); // 20
    • 나누기 등호 연산자 (/=)
      let b = 10;
b /= 2; // b = b / 2;
console.log(b); // 5
    • 나머지 등호 연산자 (%=)
      let c = 10;
c %= 2; // c = c % 2;
console.log(c); // 0
  • 비교 연산자 (조건식) (true or false 반환)
    • 일치 연산자 (===)
      console.log(2 === 2); // true
console.log(2 === "2"); // false
      타입까지 일치해야 true / 엄격한 비교 연산자
    • 불일치 연산자 (!==)
      console.log(2 !== 2); // false
console.log(2 !== "2"); // true
    • 작다 연산자 (<) / 작거나 같다 (<=)
      console.log(2 < 3); // true
console.log(2 <= 2); // true
console.log(2 <= 1); // false
    • 크다 연산자 (>) / 크거나 같다 (>=)
      console.log(3 > 2); // true
console.log(3 >= 3); // true
console.log(3 >= 2); // false
  • 논리 연산자
    • 논리곱 연산자 (and &&) 모두 true일 때 true 반환
      console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false
    • 논리합 연산자 (or ||) 하나라도 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); 
let a = true;
console.log(!a); // false
    • 삼항 연산자 (조건에 따라 값을 선택 / true면 앞항 : false면 뒷항)
      let x = 10;
let result = (x > 5) ? "크다" : "작다";
console.log(result); // 크다
    • 타입 연산자 (typeof)
      console.log(typeof "5"); // string

📖 함수 (function)

  • 함수 선언문

    function add (매개변수) {
    // 함수 내부에서 실행할 로직
}
//두 개의 숫자를 입력 받아서 덧셈을 한 후 내보내는 함수
function add (x, y) {
    return x + y;
}

  • 함수 표현식 (함수를 변수에 할당)

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

  • 함수 호출 - 함수명(매개변수) -> ex) add(x, y)

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

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

  • input, output

    • input - 매개 변수
    • output - return 뒤의 값 (반환값)

📖 스코프(scope) (범위) / 화살표 함수

  • 변수의 영향 범위
    • 전역 변수 - 모든 영역에서 사용 가능
    • 지역 변수 - 함수, 블록 안에서만 사용 가능
  • 화살표 함수 (ES6 문법)
    let arrowFunc01 = (x, y) => {
 return x + y;
}
// return문 없이 -> 블록 안에 한 줄만 존재할 때
let arrowFunc02 = (x, y) => x + y;
//매개 변수가 1개만 존재할 시 () 생략 가능
let arrowFunc03 = x => x;

📖 조건문 및 반복문

  • 조건문 (if, else if)

    // if (조건) {}
let x = 10;
// ()안에 조건식 true or false
if (x < 0) {
   console.log("x는 음수입니다.");
} else if (x >= 0 && x < 10) {
	console.log("x는 10미만 양수입니다.");
} else {
	console.log("x는 10이상 양수입니다.");
}

  • 조건문 (switch)

    let fruits = "사과";
// switch case default (각 case마다 break)
 switch (fruits) {
     case "사과" :
         console.log("사과입니다.");
         break;
     case "바나나" :
         console.log("바나나입니다.");
         break;
     case "키위" :
         console.log("키위입니다.");
         break;
     default:
         console.log("아무것도 아닙니다.");
         break;
 }

  • 조건문의 중첩

     let age = 20;
 let gender = "여성";

 // 미성년자 구분
 if (age >= 18) {
     console.log("성인입니다.");
     if (gender === "여성") {
         console.log("성인 여성입니다.");
     } else {
         console.log("성인 남성입니다.");
     }
 } else {
     if (gender === "여성") {
         console.log("미성년자 여성입니다.");
     } else {
         console.log("미성년자 남성입니다.");
     }
 }

  • 조건부 실행

     // 조건부 실행
 let x = 10;
 /*if (x > 0) {
     console.log("x는 양수입니다.");
 }*/
 // and조건
 (x > 0) && console.log("x는 양수입니다.");

  • 삼항 연산자와 단축 평가

    //or조건
let y; // undefined
// y가 undefined면 우측 값 할당
let z = y || 20;
console.log(z); // 20

📖 객체 (object)

  • 객체 생성 방법

    • 기본적인 객체 생성 방법
      let person = {
  name : "홍길동",
  age : 30,
  gender : "남자"
};
    • 생성자 함수를 이용한 객체 생성 방법
      function Person (name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}
let person1 = new Person("홍길동", 30, "남자"); //Person { name: '홍길동', age: 30, gender: '남자' }
let person2 = new Person("홍길순", 20, "여자"); //Person { name: '홍길순', age: 20, gender: '여자' }

  • 객체에 접근하는 방법

    let person = {
   name : "홍길동",
   age : 30,
   gender : "남자"
};
console.log(person.name); // 홍길동
console.log(person.age); // 30
console.log(person.gender); // 남자

  • 객체 메소드(객체가 가진 여러가지 기능 : Object.~~~)

    • Object.key() - key를 가져오는 메소드

      let keys = Object.keys(person);
console.log("keys => ", keys); // keys =>  [ 'name', 'age', 'gender' ]

    • Object.values() - 값을 가져오는 메소드

      let values = Object.values(person);
			console.log("values => ", values); // values =>  [ '홍길동', 30, '남자' ]

    • Object.entries() - key와 value를 묶어서 배열로 만든 배열 (2차원 배열)

      let entries = Object.entries(person);
		console.log("entries => ", entries);
// entries =>  [ [ 'name', '홍길동' ], [ 'age', 30 ], [ 'gender', '남자' ] ]

    • Object.assign() - 객체 복사

      let newPerson1 = {};
Object.assign(newPerson1, person);
console.log("newPerson => ", newPerson1);
// newPerson =>  { name: '홍길동', age: 30, gender: '남자' }

let newPerson2 = {};
Object.assign(newPerson2, person, { age : 31});
console.log("newPerson => ", newPerson2);
// newPerson =>  { name: '홍길동', age: 31, gender: '남자' }

    • 객체 비교

      //크기가 상당히 크다 -> 메모리에 별도의 공간에 저장
// person1 별도 공간에 대한 주소
let person1 = {
  name : "홍길동",
  age : 30,
  gender : "남자"
};

// person2 별도 공간에 대한 주소
let person2 = {
  name : "홍길동",
  age : 30,
  gender : "남자"
};

console.log("answer => ", person1 === person2); // false 주소가 다르다
//객체를 문자열화(stringify)해서 비교
console.log(JSON.stringify(person1) === JSON.stringify(person2)); // true

    • 객체 병합

      let person1 = {
  name : "홍길동",
  age : 30
};

let person2 = {
  gender : "남자"
};
//... : spread operater 전개 연산자
let perfectMan = {...person1, ...person2};
console.log(perfectMan); // { name: '홍길동', age: 30, gender: '남자' }

📖 배열 (array)

  • 배열 생성

    • 기본 생성
      let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits.length); // 3
    • 크기 지정
      let number = new Array(5);
console.log(number.length); // 5

  • 배열 요소 접근 (index 값으로 접근)

    let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits[0]); // 사과
console.log(fruits[1]); // 바나나
console.log(fruits[2]); // 오렌지

  • 배열 메소드

    • 배열이름.push() - 배열의 뒤에서 부터 값을 집어 넣음

      let fruits = ["사과", "바나나"];
console.log("1 => ", fruits); // 1 =>  [ '사과', '바나나' ]

fruits.push("오렌지");
console.log("2 => ", fruits); // 2 =>  [ '사과', '바나나', '오렌지' ]

    • 배열이름.pop() - 배열의 마지막 요소 삭제

      let fruits = ["사과", "바나나"];
console.log("1 => ", fruits); // 1 =>  [ '사과', '바나나' ]
fruits.pop();
console.log("2 => ", fruits); // 2 =>  [ '사과' ]

    • 배열이름.shift() - 배열의 첫 요소 삭제

      let fruits = ["사과", "바나나"];
console.log("1 => ", fruits); // 1 =>  [ '사과', '바나나' ]
fruits.shift();
console.log("2 => ", fruits); // 2 =>  [ '바나나' ]

    • 배열이름.unshift() - 배열 제일 앞에 요소 추가

      let fruits = ["사과", "바나나"];
console.log("1 => ", fruits); // 1 =>  [ '사과', '바나나' ]
fruits.unshift("포도");
console.log("2 => ", fruits); // 2 =>  [ '포도', '사과', '바나나' ]

    • 배열이름.splice() - 배열 자르기

      let fruits = ["사과", "바나나"];
console.log("1 => ", fruits); // 1 =>  [ '사과', '바나나' ]
//splice(x번째 요소부터(index), y개를, z로 바꿔줘)
fruits.splice(1, 1, "포도");
console.log("2 => ", fruits); // 2 =>  [ '사과', '포도' ]

    • 배열이름.slice() - 배열 자르기 (새로운 배열 만듦)

      let fruits = ["사과", "바나나", "키위"];
console.log("1 => ", fruits); // 1 =>  [ '사과', '바나나', '키위' ]
//slice(x번째 요소부터(index), y전까지)
let slicedFruits = fruits.slice(1, 2);
console.log("2 => ", slicedFruits); // 2 =>  [ '바나나' ]

    • 배열이름.forEach() - 배열의 각 요소에 함수를 반복 (새배열x)

      let numbers = [1,2,3,4,5];

// 매개변수 자리에 함수를 넣는 것을 - 콜백 함수
numbers.forEach(function (item) {
  console.log("item입니다 => " + item);
});
// item입니다 => 1, item입니다 => 2, item입니다 => 3, item입니다 => 4, item입니다 => 5

    • 배열이름.map() - 배열의 각 요소에 함수를 반복하나 새로운 배열로 만든다 (return 필요)

      let numbers = [1,2,3,4,5];
let newNumbers = numbers.map(function (item) {
	return item * 2;
});
//원본 배열의 길이만큼 반환
console.log(newNumbers); // [ 2, 4, 6, 8, 10 ]

    • 배열이름.filter() - 배열의 요소 중 조건를 통과한 요소만 모아 새로운 배열로 만든다 (return 필요)

      let numbers = [4,1,5,4,5];
let filterdNumbers = numbers.filter(function (item) {
  return item === 5;
});
//조건에 해당되는 요소만 반환
console.log(filterdNumbers); // [ 5, 5 ]

    • 배열이름.find() - 배열의 요소 중 조건을 통과한 첫 요소만 반환해 변수에 할당한다.

      let numbers = [4,1,5,4,5];
let result = numbers.find(function (item) {
  return item > 3;
});
//조건에 해당되는 첫 번째 요소만 반환
console.log(result); // 4

📖 반복문

  • for문

    //for (초기값; 조건식; 증감식) {}
//i 0부터 시작 / i가 10이 될때 까지 / i를 1씩 더 한다.
for (let i = 0; i < 10; i++) {
  console.log(i);
}
//배열과 for문은 짝꿍이다.
const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  console.log(i);
  console.log(arr[i]);
}

  • for ~in문 - 객체의 속성을 출력하는 문법

    // 객체의 속성을 출력하는 문법
let person = {
    name : "John",
    age : 30,
    gender : "male"
}

for (let key in person) {
    console.log(key + " : " + person[key]);
}
//name : John
//age : 30
//gender : male

  • while - 무한 루프 위험이 있음

    while (i < 100) {
  if (i % 5 == 0) {
      console.log(i);
  }
  i++;
}
// 5, 10, 15, ... , 90, 95

  • do ~ while - 무한 루프 위험이 있음 (구문은 무조건 한 번은 실행)

    let i = 0;
//do 먼저 실행되고 조건 판별 
do {
    console.log(i);
    i++;
} while (i < 10);

  • break, continue - 반복문과 세트

    //break
for (let i = 0; i < 10; i++) {
  if (i === 5) {
      break; // for문 블록을 빠져나온다.
  }
  console.log(i);
}

//continue
for (let i = 0; i < 10; i++) {
    if (i === 5) {
        continue; // 밑의 로직을 실행하지 않고 다음 순서로 넘어간다.
    }
    console.log(i);
}
profile
박지영
신입 개발자
다음 포스트

[2024.08.09 TIL] JS 동작 원리

0개의 댓글