자바스크립트 기초 문법 정리 - 1

citron03·2021년 12월 18일
0

html, css, js

목록 보기
3/43

자바스크립트의 문법은 내 생각엔 파이썬과 자바가 섞여있으면서도 완전히 다른 점도 많았다.
나중에 혼란이 오지 않도록 여기에 기록 해두기로 한다.

🍈 자바스크립트는 파이썬과는 달리 C언어나 자바처럼 각 코드의 끝에 ;를 사용한다.

변수 선언

변수를 선언함에 있어서 다른 언어와는 다른 점이 있다.
파이썬처럼 어떤 자료형인지 명확히 쓰지 않아도 되지만, 수정이 가능한 변수인지, 아니면 수정이 불가능한 변수인지 명시해야 한다.

  • var : 수정이 가능한 변수를 선언할 때 사용.
    구버전의 자바스크립트에서 사용되었으며, 최신버전에서는 사용하지 않는다고 한다. (보안에 취약하나보다.)
  • const : 변수의 값이 변경될 일이 없을 때 사용한다. (상수)
  • let : const가 아닌, 값이 변경되는 변수에 사용한다.

🍖 참고로 변수이름을 지을 때 파이썬의 방법과는 달리
ex) my_new_list
camel case의 방법으로 짓는다. (like java)
ex) myNewList

🥖 첫 단어를 제외한 나머지 단어의 첫 문자를 대문자로 표기 🥖

🍕 자바스크립트의 boolean은 true, false가 있다.
null도 사용할 수 있다.
변수 선언 후 값을 대입하지 않으면, 출력시 undefined라고 표기된다. 🍕
// 파이썬에서는 유사하지만, True, False, None으로 사용된다.
// NaN은 Not a Number를 의미한다. 잘못된 계산식, 빈 숫자등의 이유로 발생한다. isNaN()을 통해서 판별할 수 있다.

자료형 변환

  • typeof 변수이름 을 통해서 현재 변수에 담긴 값이 어떤 자료형으로 저장되어 있는지 알 수 있다.
  • parseInt("String"); 을 통해서 string을 integer로 변환할 수 있다.
  • parseFloat("String"); 을 통해서 string을 float로 변환할 수 있다.
  • Number("String"); 을 통하면, string을 integer나 float로 변환한다.
  • String(N); 을 사용해서 N을 string으로 변환할 수 있다.
  • N.toString(i); 를 사용하면, 숫자 N을 i진법의 string으로 변환한다.
    i를 적지 않은 빈칸이라면, 10진법으로 변환한다.
  • N.toFixed(i)를 사용할 시 숫자 N을 소수자리 i까지의 string으로 변환한다.
  • 숫자와 문자열을 더하면, 문자열이 된다.

List

  • 파이썬 처럼 간단하게 []를 사용해서 선언할 수 있다.
    ex) let myName = ["James", "Jone", 100, false, true, null];
  • List안에는 파이썬처럼 다양한 자료형의 원소가 들어갈 수 있다.
  • myName.push("Lee"); 이 처럼 리스트의 맨 끝에 원소를 삽입할 수도 있다.
  • myName.length; 를 통해서 원소의 개수/길이를 알 수 있다.
  • myName.shift(); 를 통해서 맨 앞의 원소를 삭제하고 반환한다.
  • myName.unshift("park"); 를 통해서 맨 앞에 park 원소를 추가한다.
  • myName.pop(); 을 통해서 마지막 원소를 제거하고 반환한다.
let myName = ["hi ", " i am", " jane"];

// 리스트의 중간에 원소를 삽입하고자 한다면, 

myName.splice(1, 0, "kim");

// 위의 코드를 통해서 인덱스 1의 자리에 원소 "kim"을 사용할 수 있다.
// 두 번째 파라미터는 삽입할 위치로부터 삽입전에 몇개의 원소를 삭제할 것인지 나타낸다.

myName.splice(0, 2); 
// 이와 같은 코드를 통해서 삽입 없이 특정 위치(0)로부터 원소를 N개(2개) 삭제할 수 있다.
// 참고로 myName.splice(0, 2); 는 삭제된 두 원소의 리스트를 반환한다.

🥗 splice의 파라미터를 순서대로 설명하면ㅡ
1. 삽입할 인덱스
2. 삽입할 인덱스의 위치로부터 삽입 전에 삭제할 원소 개수
3. 삽입할 원소

🎈 숫자 리스트 정렬

  • 문자열의 경우 .sort()를 통해서 정렬할 수 있다.
  • 하지만, 숫자의 경우 .sort()를 사용시 아스키코드를 기준으로 정렬하여 완전하게 정렬되지 않는다.
  • 숫자의 정렬은 다음과 같이 한다.
    🎊 오름차순 : numList.sort((a, b) => a - b);
    🎉 내림차순 : numList.sort((a, b) => b - a);

Object(객체)

  • 객체를 사용하기 위해서 자바스크립트에서는 {}를 사용한다.
    ex) let myProfile = { name: "Kim", age: 36, marriage: false, };
    🍔 이때 name, age, marriage를 key라고 하고 "Kim", 36, false를 value라고 한다.
  • myProfile.name; 처럼 dot 을 사용해 각 객체의 원소에 접근할 수 있다.
  • 다른 방법으로 myProfile["name"];처럼 [" "] 를 통해서 각 객체의 원소에 접근할 수 있다.
    🥛 myProfile.favoriteFood = "pizza" 나
    myProfile["favoriteFood"] = "pizza" 처럼 새로운 원소를 객체 안에 삽입할 수도 있다.
  • 객체를 const로 선언했어도, 객체 안의 원소는 수정이 가능하다.
    객체 자체의 값을 수정한다면 오류가 발생한다.
  • 객체의 안에는 함수를 담을 수도 있다.
  • delete myProfile.favoriteFood; 를 통해서 객체 내부 원소를 삭제할 수 있다.

let myProfile = {
  name: "kim",
  age: 44,
};

// 이때, key값들과 values값들만 따로 얻을 수 있다.

let listKey = Object.keys(myProfile);
let listValue = Object.values(myProfile);

// 리스트에 key와 value가 따로 반환되어 담겨진다.
profile
🙌🙌🙌🙌

0개의 댓글