[포스코✕코딩온] Javascript

게시 날짜 2023/10/31

작성자 seejnn 소요 시간 11 분

자바스크립트(Javascript)

앞으로 다룰 node.js, react 등 자바스크립트 생태계의 기초가 되는 언어입니다.
자바스크립트 언어 하나만 배워도 웹 개발, 모바일 앱 개발, 데스크탑 앱 개발, 웹서버 개발, 게임 개발 등
할 수 있는 것들이 무궁무진해집니다.

시작

HTML 파일에 자바스크립트를 작성하거나 불러오려면 어떻게 해야할까요?
크게 두 가지 방법이 있습니다.

1. 내장 방식

HTML 파일 안에서 <script> 태그를 열고 바로 작성하는 방법입니다.

  
<script>
  // 여기에 코드 작성
</script>

2. 링크 방식

별도의 .js 파일에 자바스크립트를 작성하고 HTML의 <head> 태그 안에서 <link> 로 불러오는 방법입니다.

  
<head>
  <link src="" >
</head>

  
const name = 'llama'

특징

하나의 js 파일을 여러 html 파일에서 사용 가능
유지보수 편리

우선순위
두 방식(내장/링크) 모두 사용했을 때 어떤 방식이 더 먼저 읽힐까?
위에서 아래로, <head> 먼저, <script> <body> 순서로
<head> 내장
<link>
<body>

<head> 에 포함될 경우
HTML parsing 과정 중 Fetching, Executing 과정이 오래 걸리면 <body> 가 나오는데 오래 걸릴 수 있다.

<body> 에 포함될 경우
<body> 내용이 너무 길면, <script> 로딩 전에 클릭시 에러처럼 보일 수 있음

그래서 때에 따라 다름

데이터 입출력

  
console.log();

다른 언어의 print, printf

alert();

모달

표기법

dash-case(kebab-case) : html, css에서 사용. javascript에서는 지양
snake_case : 쓰기는 하지만 지양
camelCase : javascript에선 제일 많이 사용
PascalCase : 특수한 경우에 사용

Zero-based Numbering

javascript에서 모든 숫자의 시작은 0부터 시작됩니다.
거의 모든 컴퓨터 언어의 숫자는 0부터 시작합니다.

주석

// 한 줄

/* 여러 줄
   여러 줄 
   여러 줄 */

	⊞ 윈도우	🍎 맥
한 줄 주석	`ctrl` + `/`	`⌘ Command` + `/`	커서가 있는 줄을 주석처리
블럭 주석	`ctrl` + `alt` + `A`	`⌘ Command` + `⌥ Option` + `A`	블럭 설정을 한 후에 누를 것

변수

variable
데이터를 저장하고 참조하는 데이터의 이름

선언

  
let 변수이름;

할당

  
const 변수이름 = 값;

var

선언과 동시에 초기화, 초기값은 undefined
중복 선언 / 재선언 가능

var의 문제점

기존 값을 덮어씌울 수 있음
{블럭 단위}에서 끝나는 것이 아님. 때마다 달라지므로 문제 발생 가능성 높음.
ES6부터는 let 사용 권장

let

중복 선언 불가능 / 재할당 가능
var과 마찬가지로 선언 후 초기값은 undefined

const

변수 이름 선언 후 할당 필수
재선언 불가능, 재할당 불가능

	재할당	재선언
`var`	O	O
`let`	O	O
`const`	X	X

변수 작명

문자, 숫자, _, $ 로 구성
첫 글자에 숫자 사용 불가능
예약어 사용 불가능 : this, if, break …
읽기 쉽고 남들도 보고 이해할 수 있도록 작명
상수(프로그램이 실행되는 동안 변하지 않는 변수)는 대문자로 선언

자료형

언어 타입

1. 강한 타입

타입 검사를 통과해야 실행 가능
string, int, double …

2. 약한 타입

타입 오류가 발생해도 실행 가능
타입 종류가 여러 종류인 값들 상관없이 지정

문자 + 변수 동시 사용

메소드의 매개 변수

boolean

true / false
참 / 거짓을 나타내는 타입

undefined

미할당 데이터
값이 할당되지 않은 상태 / 정의되지 않은 상태

null

의도된 빈 데이터
어떤 값이 의도적으로 비어 있음을 의미

Array

서로 다른 자료형도 한 배열에 저장 가능
배열에서 사용 가능한 속성, 함수

length
push(추가할 값)
pop()
unshift(추가할 값)
shift
indexOf(찾을 값)
includes(찾을 값)

Object

  
let cat = {
  name: "나비",
  age: 1,
  isCute: true,
  mew: function () {
    return console.log("meow");
  },
};

object 안에 배열과 함수도 포함 가능

타입 확인

typeof : 특정 자료의 유형 확인

  
typeof 123; // number
typeof "word"; // string
typeof true; // boolean
typeof null; // object

타입 변환

  
let mathScore = prompt("수학 점수를 입력해주세요");
let engScore = prompt("영어 점수를 입력해주세요");

let avg = (mathScore + engScore) / 2;

console.log(avg);

alert("당신의 평균 점수는 ", avg, "점 입니다");

이런 경우 문제 없이 실행은 되지만 이상한 값이 출력됩니다.
javascript는 자동으로 형 변환을 해주기 때문이죠.
당장은 편해보일 수도 있겠지만 나중에 코드가 길어지고 프로젝트 복잡도가 높아졌을 때 문제를 일으킬 가능성이 있습니다.
이런 문제를 예방하기 위해 Typescript가 등장합니다.

문자로 변환

  
// 문자 데이터로 변환
let num = 123;

let 

String(), toString() 차이

toString()은 null, undefined에서 문제 발생

mdn docs - 표준 내장 객체

string 타입을 number로 바꾸면 타입은 number로 바뀌지만,
실제로 변수에 저장되는 값은 NaN 입니다.

연산자

% 나머지 연산자

** 거듭 제곱

축약

  
num = num + 5 // num += 5

증감 연산자

  
num++; // 1씩 증가
num-- // 1씩 감소

  
let num = 10, num2 = 10

result = num++;
console.log(result); // 10

result = ++num2;
console.log(result); // 11

num에는 num 뒤에 증가 연산자 ++ 를 적었고,
num2에는 num2 앞에 증가 연산자 ++ 를 적어주었습니다.
여기서 알 수 있듯이 증가, 감소 연산자 위치에 따라 결과값이 달라집니다.
num는 출력을 하고나서 1 증가, num2는 증가시킨 후 1 증가시킨 결과값입니다.

일치 연산자

  
let a = 1;
let b = "1";

console.log(a == b) // true
console.log(a === b ) // false

변수의 값 뿐만 아니라 자료형까지도 비교해줍니다.

논리 연산자

OR 연산자 ||: 두 가지 중 하나만 만족해도 true 반환
AND 연산자 &&: 두 가지 모두 만족해야 true 반환
NOT 연산자 !: 데이터의 참, 거짓 값을 반대로 반환

함수

함수 선언문 어디서든 호출 가능

  
sayHello(); // 함수 선언문 전에 사용해도 작동합니다

function sayHello() {
  console.log('Hello')
}

함수 표현식 함수에 도달하면 생성

  
// [x] sayHello() : 아직 함수 표현식 라인에 도달하지 않았기 때문에 사용할 수 없습니다

let sayHello = function() {
  console.log('Hello')
}

sayHello(); // 함수 표현식 이후에 쓰였으므로 사용 가능합니다

함수 내부를 scope라고 부름
scope 변수 != global 변수

함수 선언문 : 어디서든 호출 가능

hoisting
Javascipt는 스스로 메모리 관리를 한다 데이터를 어딘가 저장을 해놔야 하는데 .. 주소

함수 선언 후 호출 가능
먼저 호출하면 에러

화살표 함수

  
let add = (num1, num2) => {
  return num1 + num2
}

  
function hello(name, age = 15) {
  console.log(name + '님 안녕하세요');
  console.log(age + '세');

  // 반환값이 있는 함수
  return age + 10;
}

매개 변수에 기본값을 설정 가능
매개 변수가 들어오지 않으면 기본으로 설정 값 사용

코딩온

javascript