01. JavaScript - 자바스크립트란 & 변수

박지윤·2023년 9월 1일
JavaScript
0

JavaScript

목록 보기
1/13

1. JavaScript란?

JavaScript란 웹페이지를 동적으로 만들기 위해 사용하는 언어이다. 마우스를 올리면 메뉴가 펼쳐지는 드롭다운 메뉴, 이미지가 자동으로 바뀌거나, 버튼을 누르면 다음 이미지로 넘어가는 슬라이드 등이 자바스크립트를 사용한 예 중 하나이다. 자바 스크립트의 가장 큰 장점은 모든 웹 브라우저에서 작동하고, 웹 브라우저를 통해 실행결과를 즉시 알 수 있다는 점이다. 최근에는 웹 뿐만 아니라 서버 개발이나 IoT 등 사용범위가 확대되고 있다.


2. JavaScript 작성 방법

자바스크립트를 작성하는 방법에는 세 가지가 있다.
첫 번째는 HTML 태그의 이벤트 속성에 작성하는 방법이다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>	
<body>
  <!-- onmouseover: 마우스가 요소 안으로 들어가면 동작-->
  <!--onmouseout : 마우스가 요소 밖으로 나가면 동작-->
  <img src="img/apple.jpg" alt="apple" 
	   onmouseover="this.src='img/banana.png'" 
       onmouseout="this.src='img/apple.png'"> 
</body>
</html>

두 번째 방법은 <script> 태그 사이에 자바스크립트 코드를 작성하는 방법이다. <script> 태그는 웹 문서 안의 어디든 위치할 수 있지만, 보통 body 태그 내 최하단에 위치 시키는 경우가 대부분이다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>	
<body>
  <h1 id = "heading">JavaScript</h1>
  <button id="change"></button>
  <script>  <!-- 내부에 스크립트 파일 작성 -->
  	var heading = document.querySelector('#heading');
    heading.onclick = function(){
      heading.style.color = "red";
    }
  </script>
</body>
</html>

마지막은 외부 자바스크립트 파일을 연결하는 것이다.
외부 자바스크립트 파일을 연결할 때는 상대경로, 절대 경로 모두 작성 가능하다.

<!DOCTYPE html>   
<!--HTML 파일-->
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script scr="js/javascript.js"></script> <!--외부 스크립트 파일 연결-->
</head>	
<body>
  <h1 id = "heading">JavaScript</h1>
  <button id="change"></button>
</body>
</html>
// javascript.js 

var heading = document.querySelector('#heading');
    heading.onclick = function(){
      heading.style.color = "red";
    }



3. JavaScript 입력과 출력

1) prompt

prompt("출력할 내용", "입력받을 값: 기본값");

prompt는 사용자에게 값을 입력받는 함수이다.
사용자가 입력창에 내용을 입력한 뒤 확인 버튼을 누르면 입력값이 string type으로 변환되어 return 값으로 반환된다. 하지만, 사용자가 취소 버튼을 누를 경우 return 값이 반환되지 않는다.

2) confirm

confirm("출력할 내용");

comfirm은 브라우저에 선택창을 띄우는 함수이다.
사용자가 선택창에서 확인 버튼을 누를 경우 return 값으로 true가 반환되고, 취소 버튼을 누를 경우 return 값으로 false가 반환된다.

3) alert

alert("출력할 내용");

alert은 브라우저에 경고창을 띄우는 함수이다.
alert의 경우 return값이 존재하지 않으며, 출력할 내용만을 출력해준다.

4) console.log

console.log(출력할 내용);

console.log는 콘솔창에서 값을 출력하는 함수이다.
브라우저에서 F12를 누르면 개발자 도구가 열리는데, 개발자 도구에서 Console을 누르면 자바스크립트 콘솔창을 사용할 수 있다. 콘솔창을 사용하면 자바스크립트의 어느 부분에서 오류가 발생했는지 파악할 수 있다.

5) document.write

document.write(출력할 내용);

document.write는 웹 브라우저 화면에 값을 출력하는 함수이다.
document.가 write() 함수 앞에 붙어있는 이유는 wirte() 함수가 Document 객체 (DOM 객체)에 포함되어 있기 때문이다.


4. JavaScript 규칙

  • 자바스크립트는 대소문자를 구분하기 때문에 이를 구분해서 소스를 작성해야 한다.
  • 문장을 구분할 수 있도록 문장 끝에 세미콜론( ; )을 붙인다.
  • 주석은 //주석내용 과 /* 주석 내용 */ 두 가지 방법이 있다. 후자는 여러 줄 가능 O
  • 식별자는 영문자, 밑줄(_), 달러 기호로 시작해야 한다.
  • 식별자 표기법에는 카멜표기법(HelloWorld), 스네이크 표기법(hello_world)이 있다.


5. 변수

1) 변수란?

변수는 문자나 숫자 등 변할 수 있는 어떤 값을 저장할 때 사용하는 공간을 말한다.

2) 변수 선언 방식

① var : 중복 선언 가능, 재할당 가능

//중복선언 & 재할당 범위 
var a = "Hello!";
console.log(a) // Hello!

var a = "Nice to Meet you";
console.log(a) //Nice to Meet you

a = "How are you?";
console.log(a) //How are you?
//스코프 범위: 유효 참조 범위
var a = "전역변수";

function scope_level(){
	if(true){
      var a = "지역변수";
      console.log(a); //지역변수
    }
  console.log(a); //지역변수 (var은 if문 밖에서도 유효) 
}

scope_level();
console.log(a); //전역변수 (함수 밖에서는 지역변수 무효)

  • var은 동일한 이름의 변수를 중복으로 선언하는 것이 가능하다.

  • 함수 밖에서 선언할 경우 전역 변수, 함수 내에서 사용할 경우 함수 내에서만 유효한 지역변수가 된다.

  • 유연하게 사용할 수 있지만, 복잡한 코드에서 변수가 여러 번 선언 된 경우 어떤 부분에서 값이 변경되고 문제가 발생했는지 파악하기 어렵다. 이를 해결하기 위해 추가된 변수 선언 방식이 let과 const이다.

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

//중복선언 & 재할당 범위 
let a = "Hello!";
console.log(a) // Hello!

let a = "Nice to Meet you";
console.log(a) // SyntaxError 발생

a = "How are you?";
console.log(a) //How are you?
//스코프 범위: 유효 참조 범위
let a = "전역변수";
var i = 1;
if(i === 1){
  	let b = "지역변수";
	console.log(a); //전역변수
  	console.log(b); //지역변수
}

console.log(a); //전역변수
console.log(b); // ReferenceError

  • let은 동일한 이름으로 변수를 중복으로 선언할 경우 syntaxError 가 발생하는 변수 선언 방식이다. 하지만 값을 재할당 하는 것은 가능하다.

  • 블록({}) 밖에서 선언할 경우 전역변수, 블럭 안에서 선언할 경우 지역변수
    (블록의 예: if, else if, else, function, for, while 등)

③ const: 중복선언 불가, 재할당 불가

//중복선언 & 재할당 범위 
let a = "Hello!";
console.log(a) // Hello!

let a = "Nice to Meet you";
console.log(a) // SyntaxError 발생

a = "How are you?";
console.log(a) //TypeError 발생

  • const는 변하지 않는 값, 즉 상수를 저장할 때 사용하는 변수 선언 방식이다. 따라서 중복 선언과 재할당이 불가능하다.

  • 유효 참조 범위는 let과 동일하다.

3) 호이스팅

호이스팅이란 선언문(var, let, const, function, class)을 모두 모아 유효 범위의 최상단(스코프 선두)에 선언하는 것을 말한다.

1) 호이스팅 동작 방식

  1. 자바스크립트 parser가 함수 실행 전, 해당 함수를 살펴본다.
  2. 함수 내에 존재하는 변수, 함수 선언에 대한 정보를 기억하고 실행한다.
  3. 필요한 값들을 스코프 선두로 끌어올린다.

2) 호이스팅

console.log(a); //undefined
console.log(b); //ReferenceError

var a;
let b;
console.log(a); //undifined
console.log(b); //undifined

a = 123;
b = 456;
console.log(a); //123
console.log(b); //456

변수는 선언 단계 > 초기화 단계 > 할당 단계에 걸쳐 생성되는데, var의 경우 선언 단계와 초기화 단계가 함께 이루어진다. 즉, 스코프 선두에서 선언 단계와 초기화 단계가 실행된다.

자바스크립트 내부에서 변수 a를 미리 선언하여 undifined로 초기화했기 때문에 선언문 이전에 변수를 참조할 경우 값이 선언되지 않음을 나타내는 undefined가 출력된다.

하지만 let과 const의 경우 스코프 선두에서 변수 선언 단계만 실행되기 때문에 선언문 이전에 변수를 참조하면 변수가 정의되지 않았다는 참조 에러(ReferenceError)가 발생한다.

따라서 재할당이 필요하지 않은 상수와 객체에는 const를 사용하고, 재할당이 필요한 변수의 경우 let을 사용하는 것이 좋다.

6. Data Types

다른 언어의 경우 변수를 선언할 때, 변수의 데이터 타입을 함께 지정하지만 자바스크립트는 변수의 데이터 타입을 지정하지 않는다.

자료형이 고정되어 있지 않기 때문에 자료형을 변경하는 방법 또한 간단하며, 변수에 내가 의도한 값이 정확히 들어가지 않을 수도 있다. 따라서 자바스크립트로 프로그램을 만들 때는 변수에 의도한 값이 정확히 들어갔는지 꼭 체크해야 한다. 

// 원시타입 
let a = "123";
let b = a;
console.log(a); /// 123
console.log(b); /// 123

a = "456";
console.log(a); ///456
console.log(b); ///123

// 참조타입
let a = ["a","b","c"];
let b = a;
console.log(a); /// a,b,c
console.log(b); /// a,b,c

let a[3] = "d";
console.log(a); /// a,b,c,d
console.log(b); /// a,b,d,c

자바스크립트의 데이터 타입(자료형)은 원시타입과 참조타입 으로 구분된다.

원시타입은 변경 불가능한 값의 타입을 말한다. 다른 변수에 데이터를 복사할 때, 그 변수의 값이 저장된 메모리 영역에 직접 접근해 값을 복사하고, 그 값을 새로운 메모리에 저장하기 때문에 원본 데이터의 값이 변경되어도 기존에 복사했던 데이터의 값을 유지한다.

참조 타입은 데이터를 복사할 때, 메모리에 직접 접근하지 않고, 그 값이 저장된 메모리의 위치(주소)를 복사해서 전달하기 때문에 원본 데이터의 값이 변경 되면 복사한 데이터의 값도 함께 변경된다.

원시타입 : number, string, boolean, null, undefined
참조 타입 : array, function, object

1. Number

let x = 314;
let y = 3.14;
console.log(typeof(x)) // number
console.log(typeof(y)) // number
  • 따옴표 없이 표기한 숫자
  • 다른 언어의 경우 정수, 실수 등이 다른 데이터 타입으로 되어 있지만, 자바스크립트는 정수와 실수 모두 number로 취급한다.

2. String

let str1 = "314";
let str2 = "Hello";
console.log(typeof(str1)) // string
console.log(typeof(str2)) // string
  • 작은 따옴표나 큰 따옴표로 묶은 문자열
  • 작은 따옴표나 큰 따옴표 안에 들어가 있으면 영어, 숫자, 한글 상관 없이 모두 string type이다.

3. Boolean

let bool1 = Boolean(314);
let bool2 = Boolean(0);
console.log(typeof(bool1), bool1) // number true
console.log(typeof(bool2), bool2) // number false
  • 논리적 참, 거짓을 나타내는 true와 false로만 이루어진 데이터 타입
  • 0, NaN, ""(빈문자열), false, undefined, null은 false, 나머지는 true

4. Null

let x = null;
console.log(typeof(x)) // null
  • 의도적으로 값이 없다는 것을 명시하는 데이터 타입

5. Undefined

let x ;
console.log(typeof(x)) // undefined
  • 변수를 선언만 하고 값을 할당하지 않았거나, 자료형을 지정하지 않았을 때 사용되는 데이터타입. null은 의도적으로 값을 비웠음을 나타내는 데이터 타입이고, undefined는 아직 값이 할당되지 않았음을 나타내는 데이터 타입이다.

6. Array


let fruit = ["사과", "딸기", "바나나"];
console.log(fruit[0]) // 사과
console.log(fruit[1]) // 딸기
console.log(fruit[2]) // 바나나
  • 하나의 변수에 여러 개의 값을 저장하고 싶을 때 사용하는 데이터 타입으로 배열이라고 불린다.
  • 대괄호 [] 를 사용해 선언한다.
  • 배열안의 값은 하나의 데이터 타입으로 통일되어 있을 수도 있고, 여러가지 데이터 타입이 혼합되어 있을 수도 있다.
  • 값을 불러올 때는 인덱스를 사용해야 하며, 이 인덱스는 1이 아닌 0부터 시작한다.
    즉, 맨 첫번째 값을 불러오기 위해서는 변수[0]을 입력해야 한다.

7. Object

let eng = {
  사과: "apple",
  포도: "grape",
  메론: "melon",
  바나나: "banana"
}

console.log(eng.사과); //apple
console.log(eng["포도"]) //grape
  • 하나의 변수에 여러 개의 값을 저장하고 싶을 때 사용하는 데이터 타입으로 객체라고 불린다.
  • 중괄호{} 안에는 키(key):값(value) 이 쌍으로 구성된 프로퍼티(property)가 들어간다. 키에는 문자형이, 값에는 모든 데이터 타입이 허용된다.
profile
박지윤
프론트엔드 개발 및 실무 프로젝트 구현과정 수료
다음 포스트

02. JavaScript - 연산자

0개의 댓글