[Javascript] Data types, Function

이승준·2025년 1월 11일

JS

목록 보기
2/5
post-thumbnail

JS 자료형, 함수 객체

안녕하세요 이번 포스트는 자바스크립트의 기초 문법을 정리해보려고합니다.
모든 내용을 다루지는 않고 필자에게 필요한 내용만 요약하고자 합니다!



JS var 사용해도 될까?

var변수는 유효 범위 문제, 중복 선언 허용의 이슈가 있다. 각각은 함수에서 선언된 변수를 함수 밖에서 사용이 가능하던가 중복에서 선언이 가능하다는 뜻인데. 이보다 더 큰 이슈가 있어서 사용을 지양하는편이다.

호이스팅(Hosting)

다음 코드의 결과값은 어떻게 될까?

console.log(x);
var x = 5;

정적 타입 언어만 사용해봤던 나는 당연히 에러가 난다고 생각했다. 하지만 실행 결과는?


undefined가 출력된다. 왜 그럴까?! var 변수는 선언이 최상단부에서 진행된다는 신기한 특징이 있다. 이거 끌어올린다고해서 호이스팅이라고 부른다. 즉, 위에 예시 코드는 다음과 같이 작동하는것이다.

var x;
console.log(x);
var x=5;

하지만 초기화는 선언과 함께 끌어 올려지지 않기에 예상치 못한 에러를 야기한다.
let과 const를 사용하자.






JS의 Data types

JavaScript는 기본적으로 느슨한 타입(loosely typed)동적(dynamic) 언어이기 때문에, 변수는 특정한 타입에 종속되지 않고, 모든 타입의 값으로 할당 (및 재할당) 가능함



원시 타입

Boolean: true / false
Null: null
undefined: undefined
Number: 일상에서 사용할 수 있는 대부분의 범위의 숫자 값
BigInt: Number 타입이 나타낼 수 있는 값의 범위를 넘어서는 값
String: '문자열'
Symbol: 변경 불가능한 원시 타입의 고유한 값

Null    vs   undefined

Null: 개발자가 의도적으로 설정해야하는값으로, 의도적으로 비어있음을 나타냄.
undefined: 값이 정의되지 않음을 나타내며, 변수가 선언되었지만 초기화되지 않았거나 존재하지 않는 속성을 참조할 때 반환됩니다.

참조 타입

Object: 일반적으로 여러 개의 기본 타입의 값들을 묶어서 사용하는 타입



동적 타입 vs 정적타입

JavaScript는 값이 할당되는 과정에서 타입이 결정되기때문에, 동적타입 언어이다. 즉 컴파일 타임이 아닌 런타임에 타입이 동적으로 결정되는 언어이다.

let a; // 아직 타입이 결정되지 않음
a = 5;
let a=5; 
a='동물'; //타입이 언제든지 변경될 수도 있음

자바스크립트는 할당되는 시점에 타입이 결정되고, 도중에 다른 타입의 값도 할당이 가능하다.

int a=5;
a="문자열"; //compile error

자바나 C++같은 언어는 정적타입으로서, 선언 시점에 타입이 결정된다.

  • 동적 타입 언어의 장점은 코드 작성에 유연하지만 신뢰성이 떨어짐
  • 정적 타입 언어의 장점은 코드 작성에 제약이 많지만 신뢰성이 높음

Function

함수는 간단하게 여러가지 선언 방식만 정리하고 넘어가겠습니다.

기본적인 함수 선언방식

function greet(name) {
    return `Hello, ${name}!`;
}
console.log(greet("Alice")); // Hello, Alice! 

이런 방식으로 선언되는 함수는 호이스팅 됩니다!

함수 표현식

  • 변수에 익명함수나 이름 있는 함수를 할당하는 방식
const greet = function(name) {
    return `Hello, ${name}!`;
};
console.log(greet("Bob")); // Hello, Bob!

함수 표현식으로 선언된 함수는 호이스팅 X

화살표 함수 (ES6에서 도입됨.)

const greet = (name) => `Hello, ${name}!`;
console.log(greet("Charlie")); // Hello, Charlie!

함수 몸체가 한 줄일 때, {}와 return 키워드를 생략 가능.
this 바인딩: 화살표 함수는 this가 상위 스코프(렉시컬 스코프)를 따름

profile
들은것은 잊어버린다 본것은 기억된다 해본것은 내것이 된다

0개의 댓글