본문 바로가기

Javascript

[Javascript] 01. 시작

0. Javascript 정리


이번에 프로젝트를 진행하면서, js 학습의 필요성을 여실히 느꼈다. 백엔드 개발자로 취업하면 js를 다룰일이 거의 없다고는 하지만, 학습자의 입장에서 그리고 미래를 준비하는 개발자의 입장에서 웹생태계에 기여하는 개발자의 입장에서는 반드시 잘 알아야 하는 언어라고 생각되었고, 그렇기 때문에 내가 모르고 있거나 꼭 필요한 부분을을 정리하려한다. 자세한 설명을 적기보다는 내가 헷갈릴때 찾아보는 용도로 빠르게 많은 양을 정리하고, 추후에 수정해 나갈 예정이다.


1. nvm을 이용하여 node버전 관리



nvm use 14.17.0

npm init -y

npm install parcel-bundler -D # devDependencies, 개발용 의존성 패키지 설치

npm install lodash # dependencies, 일반 의존성 패키지 설치

# package.json 파일에 있는 패키지들을 한번에 설치
npm install 

package.json

{
  "name": "Vanilla_JS", // 프로젝트 명
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev" : "parcel index.html" // npm run dev
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.12.5"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

2. 변수 유효범위


1. const & let

function scope() {
  if (true) {
    const a = 123
    console.log(a) // 123
  }
}
scope()
  • 정상 실행

function scope() {
  if (true) {
    const a = 123
  }
  console.log(a) // a is not defined
}
scope()
  • 변수 유효범위 밖: 정의되지 않음

function scope() {
  if (true) {
    console.log(a) // undefined
    const a = 123
  }
}
scope()
  • 변수의 유효범위 안이지만, 아직 값이 지정되지 않음

function scope() {
  console.log(a) // a is not defined
  if (true) {
    const a = 123
  }
}
scope()
  • 변수 유효범위 밖: 정의되지 않음

let과 const는 block level의 유효범위를 가짐


2. var

function scope() {
  if (true) {
    var a = 123
  }
  console.log(a) // undefined
}
scope()

  • 변수의 유효범위 안이지만, 아직 값이 지정되지 않음

var는 function level의 유효범위를 가짐, 범위가 더 커짐, 따라서 컨트롤하기 어렵고 메모리 누수가 발생 할 수 있다. var는 안쓴다고 생각.


3. 형변환


== 는 동등연산자, 형변환이 일어남, 안쓰는 것을 권장함

const a = 1
const b = '1'
console.log(a == b) // true

  • Truthy(참 같은 값)
    • true, {}, [], 1, 2, 'false', -12, '3.14' ...

  • Falsy(거짓 같은 값)
    • false, '', null, undefined, 0, -0, NaN
    • null은 의도적으로 빈 데이터, undefined는 의도적이지 않게 빈 데이터, 둘 다 선언은 된 상태임
    • NaN은 Not a Number, 숫자데이터로 선언되었지만 숫자가 아님

if (1) { // true
  console.log(123) // 123
}