[JS] 자바스크립트 기초

View

Web/Javascript

[JS] 자바스크립트 기초

책읽는 감자 2022. 9. 18. 23:26

💡 자바스크립트란?

자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다

자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다

클래스가 존재하지 않는 프로토타입 기반의 객체지향 언어이다( Edition 6에서는 Class개념 지원됨)

💡 자바스크립트 선언

<script src="hello.js" type ="text/javascript"></script>

src속성은 외부의 자바스크립트 파일을 HTML문서에 포함할 때 사용하며 생략 가능함

또한 자바스크립트는 HTML파일 내부의 <head>와 <body>태그 안에 위치할 수 있다

웹 브라우저가 HTML문서를 순차적으로 해석(parsing)하므로 스크립트 위치에 따라 로드와 실행 시점이 달라진다

<head> 안 위치: 브라우저의 각종 입출력 발생 이전에 초기화되므로 브라우저가 먼저 점검함
<body>안 위치: 브라우저가 HTML부터 해석하여 화면에 그리기 때문에 사용자가 빠르다고 느낄 수 있음

💡 자바스크립트 변수(variable)

자바스크립트는 동적타입 언어이기에 변수의 타입 지정없이 값이 할당되는 과정에서 자동으로 변수의 타입 결정
원시타입: 숫자, 문자열, boolean, null, undefined(5가지) 이외는 모두 객체 타입

자바스크립트는 숫자를 정수와 실수로 나누어 구분하지 않음 (모든 숫자를 8byte의 실수 형태로 처리 )

자바스크립트는 언더플로우,오버플로우, 0으로 나누는 연산에 대해 예외를 발생시키지 않음
숫자와 관련된 특별한 상수가 존재한다

Infinity: 무한대를 나타내는 상수, 어떠한 수를 0으로 나누거나Infinity를 어떠한 수로 사칙연산한 결과

NaN(Not a Number) :계산식의 결과가 숫자가 아님을 나타냄

💡 자바스크립트 변수 호이스팅(variable Hoisting)

var키워드를 사용한 변수는 중복해서 선언 가능

var n= 123;
console.log(n); // 123

var n= 456
console.log(n) ;// 456

💡 let키워드와 const키워드( + var: 전역 스코프)

출처: https://iancoding.tistory.com/131

let은 데이터 값 변경이 가능한 변수이며, const는 데이터 값의 수정이 불가능한 상수이다.

둘 다 데이터 값에 이름을 지정하여 사용하고 싶고 데이터 값을 반복해서 사용하기 위해서 사용한다.

// 변수 초기화는 변수 let만 가능하며 상수 const는 불가능하다
let value; // (O) 가능
const value; // (X) 불가

// 변수 name에 '이안'을 대입
let name = '이안';
name = '이안92'; // 다른 값 대입이 가능

// 상수 name에 '이안'을 대입
const name = '이안';
name = '이안92'; // 값 변경 불가능 => 코드 에러 발생

숫자 타입 변수 간에 계산이 가능하며, 문자열 타입 변수 간 결합이 가능하다.

// 콤마(,)로 구분하면 한꺼번에 변수와 상수 선언 가능
let a = 1, b = 2;
const a = 1, b = 2;

// 숫자 계산, 문자열 결합은 둘다 가능
let number1 = 100;
let number2 = 200;
let sum = number1 + number2;
console.log(sum); // 결과 : 300
// console.log는 브라우저의 개발자 도구 콘솔에 결과를 보여주는 역할을 한다

let name = '이안';
let birth = '92';
let nickname = name + birth;
console.log(nickname); // 결과 : '이안92'

// 변수 let과 마찬가지로 상수 const도 위와 동일하다
const number1 = 100;
const number2 = 200;
const sum = number1 + number2;
console.log(sum); // 결과 : 300

const name = '이안';
const birth = '92';
const nickname = name + birth;
console.log(nickname); // 결과 : '이안92'

but, 상수로 선언된 배열과 객체 내부의 값은 변경이 가능하다.

const array = ['피카츄', '라이츄', '파이리'];
array[2] = '꼬부기';
// 결과 array = ['피카츄', '라이츄', '꼬부기'];

const object = { nickname: '이안', age: 20 };
object.age = 30;
// 슬프지만 객체 내부의 age값이 30으로 변경된다

값 변경이 필요한 데이터에만 let을 쓰고, 이외에는 const를 주로 이용하는 추세인데

const를 적극 이용함으로써 변경이 필요한 데이터와 그렇지 않은 데이터의 구분이 쉬워져 가독성이 높아지는 메리트를 얻게된다.

저작자표시 비영리 변경금지

'Web > Javascript' 카테고리의 다른 글

[JS] localStorage 사용법 (읽기, 쓰기, 삭제, 키목록 등) (0)	2022.09.19
[JS]자바스크립트로 CSS속성 변경하기 (0)	2022.09.19

Share Link

Fasebook
Twitter

reply

개발 감자🥔

View