LGHV_3기_자바스크립트 기분 문법_JavaScript(2.1)

Pepzera·2025년 3월 17일
LG 헬로비전 DX DATA SCHOOL 3기 공부 정리웹 개발

LGHV3기_공부정리

목록 보기
25/34

Chap 02-1 자바스크립트 기분 문법

자바스크립트 기본 문법

0. VSCode에서 Code Runner로 JavaScript 돌리기

VSCode에서 여러 실습을 해보기 위해 Extenstions에서 ‘Code Runner’를 설치하였다! (모든 코드를 code runner로 실행하지는 않았다!)

VSCode에서 Code Runner를 설치하기 전에, node.js를 먼저 설치해야한다!

  • node.js 설치 방법 (다운로드 과정은 해당 사이트를 참고 하였다.)

    1. https://nodejs.org/en/ 해당 사이트에 접속한다.
    2. 접속 한 뒤, Download Node.js (LTS) 버튼을 눌러서 다운을 진행한다.

  • Code runner 설치 방법

    1. extensions를 클릭한다.
    2. 검색창에 code runner를 입력한다.
    3. install 버튼을 누른다.

  • 실행 시

    • 실행을 하기 위해선 ctrl + alt + n을 누르면 된다!

1. 변수

변수란? 🧐

변수(variable) : 프로그램에서 자료를 담아두는 공간

  • 재사용성 : 한 번 저장한 값 재사용 가능 예 ) 학생의 점수를 변수에 저장하면, 그 점수를 계산하거나 출력할 때마다 다시 입력할 필요가 없음!
  • 가독성 : 코드를 읽기 쉬움 예 ) let studentScore = 90; 이라고 쓰면, 이 코드를 보는 사람은 studentScore가 학생의 점수를 의미한다는 것을 쉽게 알 수 있음!
  • 변수를 쉽게 말하자면, 어떤 값을 담아둘 수 있는 양동이라고 생각하면 된다!

변수 선언하기

let 뒤에 변수 이름 작성

  • 기본형 - let 변수명
  • 코드 예시 ) 사격형의 넓이 구하기
  let width; /* 너비를 저장할 변수 선언 */
  let height; /* 높이를 저장할 변수 선언 */
  width = 200; /* 변수에 값 대입 */
  height = 50; /* 변수에 값 대입 */
  let area = width * height; /* 변수 선언과 동시에 계산 결괏값 대입 */
  console.log(area); /* 사각형의 넓이를 콘솔에 출력 */
  • 결과 )

상수 선언하기

  • const 뒤에 변수 이름 작성
  • 상수는 변수의 일종.
  • 변수에 한번 값을 할당하면 다시 값을 바꿀 수 없음.
  • 기본형 - const 변수명
  • 코드 예시 ) 원의 넓이 구하기 (원주율을 변하지 않은 const로 설정)
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>prompt</title>
</head>
<body>	
	<script>
		// 상수 사용해서 원 넓이 구하기 
		const PI = 3.14;  /* 원주율을 상수로 선언 */
		let radius = prompt("반지름을 입력하세요");  /* 반지름 입력 받기 */
		let area = PI * radius**2;  /* 변수를 사용해 원의 넓이 계산 */
		
    console.log(area);  /* 원의 넓이를 알림 창에 출력 */
	</script>
</body>
</html>
  • 결과 )

변수 선언의 규칙

📌 변수 이름

  • 영어 문자, 언더스코어(_), 숫자를 사용
  • 첫 글자는 영문자, _기호, $기호를 사용
  • 띄어쓰기나 기호는 허용하지 않음
  • 영어 대소문자를 구별하며 예약어는 변수 이름으로 사용할 수 없음
  • 여러 단어를 연결할 때는 언더스코어(_)를 사용할 수 있고, 중간에 대문자를 섞어 쓸 수도 있음.
  • 변수 이름은 의미 있게 작성
  • **코드 예시 )
// 변수 선언 가능
let hi = 3
let _now = 4
let now25 = 6
let hello_hi = 'hi' // 언더스코어
let fruitGrape = 'grape' // 중간에 대문자

// 변수 선언 불가능
let 24now = 11
let now 30 = 22
let *hell = 30

2. 자료형

종류설명예시
숫자형따옴표 없이 숫자로만 표기let years = 2024;
문자열작은 따옴표(')나 큰 따옴표(")로 묶어서 나타낸다. 숫자를 따옴표로 묶으면 문자로 인식함.let car = "BMW";
let price = "24000";
논리형참(true)과 거짓(false)이라는 2가지 값만 있는 유형이다. 이때 true와 false는 소문자로 표기한다.let isTrue = true;
배열하나의 변수에 값을 여러 개 저장한다.let cars = ['benz', 'bmw', 'kia']
객체 (object)함수와 속성을 함께 포함한다.let ive = {
  name: anyujin,
  age: 22,
  house: seoul
}
undefined자료형이 지정되지 않았을 때의 상태. 변수 선언만 하고 값을 할당하지 않은 변수는 undefined 상태임.
null값이 유효하지 않을 때의 상태.

숫자형 (number)

  • 정수 : 소수점 없는 숫자
  • 실수 : 소수점이 있는 숫자
  • 코드 예시 )
// 숫자형 number
let num = 34
console.log(typeof(num))

// 실수형 float -> number라고 표시됨
let flo = 3.14
console.log(typeof(flo))
  • 결과 )

문자열 (string)

  • 작은따옴표(’ ‘)나 큰따옴표(” “)로 묶은 데이터
  • 특수 기호를 표시할 때는 백슬래시(\) 다음에 기호 입력
  • 코드 예시 )
// 문자열 string
let str = '안녕!!'
console.log(typeof(str))

// 특수기호 표시
console.log('We\'re going to have a party.')
  • 결과 )

템플릿 리터럴 (template literal)

  • 문자열과 변수, 식을 섞어서 하나의 문자열을 만드는 방식
  • 백틱 (`` , ~와 같이 있는 버튼) 기호를 사용해 문자열을 만든다.
  • 템플릿 리터럴 안의 변수나 식은 ${ }로 묶어서 표현
  • 태그나 띄어쓰기, 특수 기호(이스케이프 문자)는 그대로 사용가능
  • 코드 예시 )
let car = 'Seltos'
let num = 1
// 템플릿 리터럴 `` 사용
console.log(`나의 자동차는 ${car}이고, ${num}대는 가지고 있다.`)
  • 결과 )

논리형 (boolean)

  • 참(true)이나 거짓(false)의 값을 표현하는 자료형.
  • 불린(boolean) 유형이라고도 함.
  • 조건을 확인해서 조건이 맞으면 true, 맞지 않으면 false라는 결괏값 출력

undefined 유형

  • 자료형이 정의되지 않았을 때의 데이터 상태
  • 변수 선언만 하고 값이 할당되지 않은 자료형

null 유형

  • 데이터 값이 유효하지 않은 상태
  • 변수에 할당된 값이 유효하지 않다는 의미

배열 (array)

  • 하나의 변수에 여러 값을 저장할 수 있는 복합 유형
  • 기본형
    배열명[”값 1”, “값 2”, ….. “값 n”]
  • 예 ) 배열을 사용하지 않는다면!! 귀찮게 써야한다😓
let zebra = "얼룩말"
let dog = "개"
let cat = "고양이"
let tiger = "호랑이"
  • 코드 예시 )
// 배열 사용
let animals = ["얼룩말", "개", "고양이", "호랑이"]

console.log(animals)
  • 결과 )

느슨한 자료형 체크

  • 자바스크립트는 미리 변수의 자료형을 지정하지 않는다.
  • 변수에 값을 할당하면 그 시점에 자료형이 결정된다.
  • 여러 사람이 프로젝트를 진행할 경우 변수를 일관성 있게 유지하기 힘들다.

자동 형 변환

  • 연산하는 동안 자동으로 자료형이 바뀔 수 있다.
  • 문자열 값을 사칙 연산에서 사용하면 자동으로 숫자형으로 변환됨!
  • 코드 예시 - 1 )
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자동 형 변환</title>
</head>
<body>
    <script>
      input = prompt("숫자를 입력하세요!")
      console.log(typeof(input))
      result = input * 10
      console.log(result)
      console.log(typeof(result))
    </script>
</body>
</html>
- 숫자를 문자열에 연결하면 자동으로 문자열로 변환됨!
  • 결과 1 )
  • 코드 예시 - 2 )
let one = '20' // 문자열
let two = 10 // 숫자형
let result = one + two // 2010, 숫자였던 two가 문자열로 바뀜.
console.log(result)
console.log(typeof (result))
  • 결과 2 )

자료형 변환 함수

함수설명
Number()문자열이나 논리형 값을 숫자로 변환
parseInt()문자열을 정수 숫자로 변환
parseFloat()문자열을 실수 숫자로 변환
String()숫자나 논리형 값을 문자열로 변환
Boolean()괄호 안의 값을 논리형으로 변환
  • Number( )
let change_char = '2024'
console.log(typeof(change_char))
change_char = Number(change_char)
console.log(typeof(change_char))

  • parseInt( )
let change_int = '265.87'
console.log(change_int)
change_int = parseInt(change_int)
console.log(change_int)

  • String( )
let change_string = 2024
console.log(typeof(change_string))

change_string = String(change_string)
console.log(typeof(change_string))

  • Boolean( )
let change_boo = 1
console.log(typeof(change_boo))

// 1은 true, 0은 false
change_boo = Boolean(change_boo)
console.log(change_boo)
console.log(typeof(change_boo))

profile
Pepzera
Hi
이전 포스트

LGHV_3기_자바스크립트_JavaScript(1)

다음 포스트

var과 let의 차이점과 호이스팅_JavaScript

0개의 댓글