자바스크립트 기초 정리(js란, var, let, const) - 1📘

2023. 1. 30. 17:31·JavaScript
목차
  1. 자바 스크립트란?
  2. 자바스크립트 기초문법

자바 스크립트란?

개발을 최근에 시작하셨다면, 프로그래밍 언어에는 많은 종류가 있는 것을 아실 텐데요

Java, Python, C, C++, 최근에는 R 과 같이 많은 언어가 존재하는 데,

Javascript도 마찮가지 입니다

Javascript는 웹페이지를 좀 더 생동감 있게 해주기 위해서 개발된 언어입니다

Java 와 Javascript는 완전히 다른 언어입니다!! 

Javascript는 HTML안에 작성 가능한데, 웹페이지를 불러올때 자동으로 실행됩니다

  • HTML = 사람의 뼈대
  • CSS = 피부
  • Javascript = 뇌

HTML을 잘모르신다면, 아래 포스팅을 통해서 조금은 이해하실 수 있을 거에요

더보기

https://jelong.tistory.com/entry/%EB%91%90%EC%8B%9C%EA%B0%84%EB%8F%99%EC%95%88-%EA%B0%84%EB%8B%A8%ED%95%9C-%EC%9B%B9Web-%EA%B0%9C%EB%B0%9C%ED%95%98%EB%8A%94-%EB%B2%95-1

 

두시간동안 간단한 웹(Web) 개발하는 법🔥 - 1

이 글은 조코딩님의 "코딩기초와 웹프로그래밍"영상을 기반으로 진행된 프로젝트임을 미리 알려드립니다 개요 구글 검색으로 오픈소스 가져오기 기존 템플릿(소스 코드) 수정하기 구글 검색으

jelong.tistory.com

자바 스크립트로 무엇을 할 수 있나요?

  1. 웹(백엔드, 프론트엔드)개발
  2. 어플리케이션(안드로이드, IOS) 개발
  3. PC 프로그램 개발

사실 이정도면 모든 개발이 가능하다고 할 정도로, 브라우저를 대상으로 만든 언어이지만,

다양한 라이브러리와 프로그램의 등장으로 자바스크립트로 많은 것들을 할 수 있습니다


자바스크립트 기초문법

변수

Fig. 1. Chrome console(크롬 콘솔)

  • 간단한 자바스크립트 코드는 구글 크롬에서 진행해보실 수 있습니다
  • 크롬 ==>마우스 오른쪽 클릭 ==> 검사 ==> Console

변수를 선언하는 데는, 3가지 방법이 있습니다

자바스크립트는 앞에 var, let, const를 붙여주는 것이 일반적입니다

  • var : (중복선언가능)
  • let : (중복선언불가능, 재할당 가능)
  • const : (중복선언불가능, 재할당 불가능)

var : (중복선언가능)

var a = 1
a ----> 1
var a = 2
a ----> 2

 

우선, var은 변수 선언 방식에서 단점을 가지고 있어 많이 사용하지 않습니다

var a = 2에 변수를 한번 더 선언했지만 에러가 발생하지 않고, 변수가 수정된 것을 볼 수 있습니다.

우리는 기초를 공부하기 때문에, "이게 왜 단점이 될 수 있지?" 라고생각할 수 있지만,

코드량이 많아진다면, 코드를 작성하다가, 이 전에 a변수가 선언된 것을 잊고, 또 다른 a를 선언해줄 수도 있있습니다. 이럴 경우 변수가 중복선언되므로, 치명적인 에러를 발생시킬 수 있습니다


let : (중복선언불가능, 재할당가능)

let a = 1
a ----> 1
let a = 2
a ----> Uncaught SyntaxError: Identifier 'a' has already been declared
a = 3 (재할당)
a ----> 3

 

let 은 위와 같이 이미 a 변수가 선언 되었다는 에러 메세지가 출력이 됩니다

하지만, a = 3 와 같이 변수선언 이후 재할당을 통해 다른 값을 반복 할당 가능합니다


const : (중복선언불가능, 재할당불가능)

const a = 1
a ----> 1 
const a = 2 (재선언)
a ----> Uncaught SyntaxError: Identifier 'a' has already been declared
a = 3 (재할당)
a ---->Uncaught SyntaxError: Identifier 'a' has already been declared

 

const 와 let의 다른점은 const는 재할당조차 불가능합니다. 한마디로 불변이라고 생각하면 됩니다

하지만, 또 완전한 불변은 아닌 점이 아래와 같이 배열이나 오브젝트 같은 경우는 변경이 가능합니다

 

function func() {
	const list = ["apple", "banana", "melon"]

    list = "orange";
    console.log(list);
    // TypeError: Assignment to constant variable

    list.push("orange");
    console.log(list); // ["apple", "banana", "melon", "orange"]
}

오늘은 자바스크립트란 무엇인지와 몇가지 변수 선언 방법에 대해 알아봤습니다!

다음 포스팅에서는 조건문과 반복문에 대해서 설명해보겠습니다

 

참조

더보기

https://ko.javascript.info/intro

 

자바스크립트란?

 

ko.javascript.info

https://developer-ping9.tistory.com/145

 

[JavaScript] JavaScript 로 할 수 있는일

# JavaScript 의 힘 JavaScirpt(JS)는 1990년대에 웹이 보편화되기전에 어떤 개발자에 의해 10일만에 탄생한 언어로써, 웹이 보편화되어가면서 새로운 언어로 모든 웹사이트를 다시 바꾸기가 비효율적이

developer-ping9.tistory.com

https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90

 

var, let, const 차이점

JavaScript에서 변수 선언 방식인 `var, let, const` 의 차이점에 대해 알아보자. 1. 변수 선언 방식 우선, `var`는 변수 선언 방식에 있어서 큰 단점을 가지고 있다. 변수를 한 번 더 선언했음에도 불구하

velog.io

https://80000coding.oopy.io/e1721710-536f-43f2-823b-663389f5fbfa

 

var, let, const 차이점

변수 선언 방식

80000coding.oopy.io

 

저작자표시 비영리 변경금지 (새창열림)
  1. 자바 스크립트란?
  2. 자바스크립트 기초문법
'JavaScript' 카테고리의 다른 글
  • ES6+ 자바스크립트 중요 개념 정리 🔑 - DOM 선택 및 조작
  • ES6+ 자바스크립트 중요 개념 정리 🔑- 콘솔과 경고, 변수, get 메서드, DOM 요소 쿼리
  • 자바스크립트 기초 정리(반복문 while, do while, for, for in, for of) - 3📘
  • 자바스크립트 기초 정리(조건문 if else, switch) - 2📘
Jelong
Jelong
커스텀 웹: https://jaehong-park.com Github: https://github.com/qkrwoghd04
  • Jelong
    24/7 Developer's Note
    Jelong
  • 전체
    오늘
    어제
    • 분류 전체보기
      • Software Engineering
      • Ubuntu
      • Network
      • JavaScript
      • Web
      • Interaction Design
      • React Native
      • React
      • Algorithm
      • Java
      • Database design
      • IT Trend
      • TroubleShooting
      • AWS
      • Interview
      • LG CNS AM CAMP 1기
  • 블로그 메뉴

    • 홈
    • 태그
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    java
    heap
    mininet
    알고리즘
    AWS
    오블완
    블랙 박스 테스트
    GPT-4
    데이터 구조
    자바
    css
    expo
    미니넷
    javascript
    JS
    소프트웨어 공학
    ChatGPT
    알고리즘 분석
    이진트리
    React
    typescript
    Queues
    generic
    prototyping
    BST
    자바스크립트
    화이트 박스 테스트
    html
    티스토리챌린지
    frontend
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
Jelong
자바스크립트 기초 정리(js란, var, let, const) - 1📘

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.