[JavaScript] JavaScript 기본 문법

Language/JavaScript

[JavaScript] JavaScript 기본 문법

gangintheremark 2024. 3. 10. 12:17

728x90

💡 기존 JAVA와 동일 시 되는 부분은 생략하여 작성함

JavaScript 선언

HTML에서 JavaScript를 사용하려면 <script> 태그를 사용
<script>태그는 HTML 파일 내부의 <head>나 <body> 안 어느 곳에서나 선언 가능하지만 <body>안의 끝부분에 <script>태그를 둘 것을 권장
웹 브라우저가 HTML문서를 순차적으로 해석(parsing)하므로, script 위치에 따라 로드의 실행 시점이 달라진다.

변수

변수의 타입 지정없이 값이 할당되는 과정에서 자동으로 변수의 타입이 결정
같은 변수에 여러 타입의 값을 할당 가능
Camel 표기법을 사용
키워드, 공백, 문자 포함, 숫자로 시작X
특수 문자 _ $ 허용

Camel case : 소문자로 작성하되 2개 이상의 단어일 경우 단어의 첫 글자는 대문자로 표기

자료형을 원시타입(primitive)과 객체타입(object)로 분류
원시 타입에는 number, string, boolean, undefined, null 5가지가 존재

number

숫자를 정수와 실수로 나누어 구분하지 않는다.
언더플로우, 오버플로우, 0으로 나누는 연산에 대해 예외를 발생시키지 않는다.
Infinity : 무한을 나타내는 상수. ➜ 0으로 나눈 경우
NaN : Not a Number, 계산식의 결과가 숫자가 아님을 나타내는 상수

    // 언더플로우
    console.log(0 / 100); // 0
    console.log(-0 / 100); // -0

    // 오버플로우
    console.log(100 / 0); // Infinity
    console.log(-100 / 0); // -Infinity
    console.log(Infinity / 0); // Infiniity
    console.log(-Infinity / 0); // -Infinity

    console.log(0 / 0); // NaN
    console.log('3A'); // 1
    console.log('A3'); // NaN
    console.log(new Number('1')); // 1
    console.log(new Number('1A')); // NaN

string

작은 따옴표 ', 큰 따옴표 " 둘 다 사용 가능
비어 있는 문자열, null, undefined, 숫자 0은 false로 간주된다.
null은 값이 없거나 비어있음을 의미하고, undefined는 값이 초기화 되지 않았음을 의미

    var a;
    var b = null;
    var c = 0;

    if(!a) console.log('a');  // a 출력
    if(!b) console.log('b');  // b 출력
    if(!c) console.log('c');  // c 출력

서로 다른 자료형의 연산이 가능하다. 어떤 자료형이든 전달할 수 있고, 그 값을 필요에 따라 변환 가능

    console.log("This size is " + 40);
    console.log("40" - 5); // 35
    console.log("40" + 5); // 405
    console.log(parseInt("123.45") + 1); // 124
    console.log("1.1" + "1.1"); // 1.11.1
    console.log(+"1.1" + +"1.1"); // 2.2

변수 호이스팅

호이스팅이란, var 선언문이나 function 선언문 모든 선언문이 해당 Scope의 처음으로 옮겨진 것처럼 동작하는 특정이다. 즉, JavaScript의 모든 선언문이 선언되기 이전에 참조가 가능하다.

선언 단계: 변수 객체에 변수를 등록
초기화 단계: 변수 객체에 등록된 변수를 메모리에 할당. undefined로 초기화됨
할당 단계: undefined로 초기화된 변수에 실제 값을 할당

선언과 초기화 단계는 한 번에 이루어짐.

    console.log(num); // undefined
    var num = 123;
    console.log(num); // 123

[JavaScript] var let const 차이점

자바스크립트의 변수 선언 방식인 var let const 의 차이점 변수 선언 방식 var 선언한 변수와 동일한 변수명으로 중복 선언이 가능하다. 즉, 마지막에 할당된 값이 최종 변수에 저장된다. 간단한 테

gangintheremark.tistory.com

연산자

+ 연산자는 대상의 값이 모두 숫자인 경우 산술 연산을 수행
+ 연산자는 대상 중에 문자열이 포함된 경우 모든 연산 대상을 문자열로 변환 후 문자열 결합
== 와 === 의 차이점은 자료형까지 비교하는지 아닌지의 여부

반복문 - for

for 구문은 카운터 변수를 사용하는 구분과 in keyword 를 사용하는 구문으로 분류
in keyword를 사용하는 구문은 배열 또는 객체가 가진 프로퍼티를 순회하면서 index값을 조회

객체(Object)

JavaScript의 객체는 키와 값(Key-Value)로 구성된 프로퍼티들의 집합이다.
JavaScript의 함수는 일급객체이므로 값으로 사용할 수 있다.

/* 객체 생성 */

var obj = {}; // 객체 리터럴
var obj = new Object(); // Object 생성자 
var student = { // 생성자 함수
  name: '남경민',
  area: '서울',
  age: 20,
  info: function() {
    console.log(this.name + ' ' + this.age);
  },
};

객체는 . 이나 대괄호 []를 통해 속성 값에 접근한다.
객체에 없는 속성에 접근하면 undefined를 반환

console.log(student.name); // dot 표시법
console.log(student['area']); // [] 표기법

console.log(student.address); // undefined
console.log(student.address || '불명'); // 불명

속성 값을 변경할 때는 . 이나 대괄호 [] 사용
객체에 값을 할당하는 속성이 없을 경우, 그 속성은 자동으로 추가됨
delete 연산자를 이용하면 속성 제거

student['age'] = 25;
student.area = '서울특별시';
student.hobby = '코딩'; // 속성 추가
delete student.hobby; // 속성 제거

객체는 복사되지 않고 참조된다. 원시 데이터 타입이 아닌 모든 값은 참조 타입이다.

728x90