[ JavaScript ] 자바스크립트 기초 (1)

결·2023년 7월 14일
JavaScript

JavaScript

목록 보기
1/9
post-thumbnail

💻 개발환경 구축

참고1
참고2


📌 Hello,World

  • 콘솔창에 "Hello World" 나타내기
consol.log('Hello World');
consol.log('Hello','World');


📌 주석

// 코멘트 작성하는 첫 번째 방법 (한줄)
consol.log('Hello World');

/**
* 코멘트 작성하는 두 번째 방법 (여러줄)
*/

📌 네이밍 컨벤션

  1. 일반적으로 영어를 사용하며 문자, 숫자 모두 사용 가능
  2. 특수기호는 언더스코어( _ )와 달러( $ )만 사용 가능
  3. 숫자로 이름 시작 불가능
  4. 키워드는 변수명으로 사용 불가
  5. camelCase : 첫번째 글자는 소문자, 띄어쓰기마다 대문자로 입력
  6. snakecase : 띄어씌기 있는 경우, 언더바( )로 사용
  7. PascalCase : 주로 C# 마이크로소프트 계열의 언어에서 사용

📌 변수 선언

선언 : 변수를 선언
할당 : 변수에 값을 할당

static typing : 변수 선언시 어떤 타입의 변수를 선언할지 명시
dynamic typing : 변수 타입을 명시적으로 선언하지 않고 갑에 의해 타입을 추론
📢 JavaScript는 dynamic typing

- var

  • 더 이상 사용X 🙅
  • 값 추후 변경 가능 🙆
  • 선언만할 경우 자동으로 undefined로 할당
var name = '가나다';
console.log(name);

var age = 21;
console.log(age);

- let

  • 값 추후 변경 가능 🙆
  • 선언만할 경우 자동으로 undefined로 할당
let month = '7월';
console.log(month);

month = '8월';
console.log(month)

- const

  • 값 추후 변경 불가 🙅
  • 변수 선언 동시에 할당해야함
const day = '15일';
console.log(day);


📌 데이터 타입

  • 여섯개의 Primitive Type과 한개의 오브젝트 Type이 있음

- Primitive Type

Number (숫자)

const age = 21;
const temperature = 30;
const infinity = Infinity;
const uinfinity = -Infinity;

console.log(typeof age);
console.log(typeof temperature);
console.log(typeof infinity);
console.log(typeof uinfinity);

String (문자열)

  • Template Literal
    newline : \n
    tab : \t
    백슬레시를 스트링으로 표현 => 두번 입력
const month = '7월';
console.log(typeof month);

const date = "'15'일";
console.log(date);
console.log(typeof date);

const iveYuJin = '아이브\n유진';
console.log(iveYuJin);

const iveLiz = '아이브\t리즈'
console.log(iveLiz);

const backSlash = '아이브\\백슬레시';
console.log(backSlash);

const smallQutoation = '아이브\`작은따옴표';
console.log(smallQutoation);

const iveYuJin2 = `아이브
안유진`;
console.log(iveYuJin2);

const group = '아이브';
console.log(group + '안유진');
console.log(`${group} 안유진`);


Boolean

const isTrue = true;
const isFalse = false;
console.log(isTrue);
console.log(isFalse);


undefined

  • 사용자가 직접 값을 초기화하지 않을시 지정되는 값
let noInit;
console.log(noInit);
console.log(typeof noInit);


null

  • undefined와 같이 값이 없다는 뜻
  • JS에서는 개발자가 명시적으로 없는 값으로 직접 초기화할 때 사용
let init = null;
console.log(init);
console.log(typeof init);


Symbol

  • 유일무이한 값을 생성할 때 사용
  • 다른 Primitive Type 값들과 다르게 Symbol 함수 호출해 사용
const test1 = '1';
const test2 = '1';
console.log(test1 == test2);

const symboll1 = Symbol('1');
const symboll2 = Symbol('1');
console.log(symbol1 == symbol2);


- Object Type

  • key:value 쌍으로 이룸
const dic = {
    red: '빨간색',
    orange:'오렌지색',
    yellow : '노락색'
};
console.log(dic);
console.log(dic['red']);
console.log(typeof dic);


Array Type

  • 값을 리스트로 나열할 수 있는 타입
  • 인덱스를 통해 값에 다가감
const numArray = [
    '1', '2', '3', '4', '5', '6', '7'
];
console.log(numArray);
console.log(numArray[0]);

numArray[0] = '0';
console.log(numArray);

console.log(typeof numArray);



📌 Hoisting

  • 모든 변수 선언문이 코드의 최상단으로 이동되는 것처럼 느껴지는 현상
console.log(name);
var name = '가나다';
console.log(name);


/** 위의 코드는 다음과 같이 실행되는 것과 같음
var name;
console.log(name);
name = '가나다';
console.log(name);
*/


⭐⭐⭐ let과 const에서도 hoisting 현상이 일어날까 ❓❗
=> YES!!! 🙆‍♀️

CASE1

console.log(name);
let name = '가나다';

Error : 변수 name 을 초기화하기 전까지 접근 불가


CASE2

console.log(name);

Error : 변수 name 은 정의되지 않음

=> CASE1에서, 변수 name 선언 전에 엑세스를 하면 실제 변수 name 변수가 존재는 함 (name 변수가 이미 hoisting 현상으로 인해 undefined로 내정되어있음)

=> let 혹은 const로 선언했기 때문에 변수에 값을 할당하기 전에 접근할 수 없는 것

=> var 키워드는 hoisting 현상을 막아주지 못함 => var 사용X 🙅





📒 코드팩토리 - <9시간만에 끝내는 코드팩토리의 Javascript> https://inf.run/8E6Q

profile
결
다음 포스트

[ JavaScript ] 자바스크립트 기초 (2)

0개의 댓글