포스코x코딩온 웹 풀스택 양성과정

[포스코x코딩온] 웹 풀스택 과정 2주차 회고 | Javascript

Codult 2024. 3. 28. 11:18
728x90

JS 기초

1) <script> </script> 내 JS코드를 입력하여 실행하며, CSS와 마찬가지로 내장방식 또는 링크방식으로 연결할 수 있다.

2) 위에서부터 순서대로 실행된다.

3) 위치는 head, body 태그 내에 적절히 작성하는 것이 좋다.

  • head에 포함하는 경우:
    HTML을 모두 불러오기 전에 script를 읽기 때문에, script 정보가 너무 많다면 로딩되는 시간동안 사용자에게 빈페이지가 뜨는 문제가 발생할 수 있다.
  • body에 포함하는 경우:
    HTML을 불러온 뒤에 script를 읽기 때문에, 로딩되는 시간동안 기본 형태의 html을 보여준다.

4) console.log();
: 브라우저의 개발자 도구 내 콘솔에 출력한다.
5) alert();
: 브라우저가 열렸을 때 알림창으로 뜬다.

변수

var, let, const

  • var: 재선언 가능, 재할당 가능
  • let: 재선언 불가능, 재할당 가능 (var는 다른 데이터로 덮어 씌워질 수 있기 때문에, let 사용을 권장)
  • const: 재선언 불가능, 재할당 불가능 (처음에 선언할 때, 할당까지 해야 함)

변수 기본 규칙

  • 변수 이름으로는 문자, 숫자, $, _ 만 사용 가능하다. (dash(-) 불가능)
  • 첫번째 글자로 숫자를 쓸 수 없다.
  • 예약어 사용할 수 없다.
  • 읽기 쉽도록 의미를 담아 이름을 설정한다.
  • 상수(const)는 대문자로 선언한다. (다른 개발자도 알 수 있도록)

자료형

※ 강한 타입 언어: 변수의 타입이 명확하게 지켜져야 실행된다. (C언어, Java) 예를 들어, String 타입의 변수에 숫자를 적으면 아예 실행이 안된다.
※ 약한 타입 언어: 변수의 타입을 명확하게 지키지 않아도 실행된다. (JS, Python) 예를 들어, JS는 데이터 종류와 관계없이 var, let, const 키워드로 변수를 선언하고 사용한다.

String 문자형 데이터

  • 따옴표를 사용한다.

※ 문자와 변수를 동시에 쓰고 싶을 때?
(i) 메소드의 매개변수로 넣어서 사용

const name = "길동";
const msg = "안녕하세요";
console.log(msg, name, "님");

(ii) + 연산자를 사용 (변수가 문자로 변환됨)

console.log(msg + name + "님");

(iii) 백틱 문자 사용

console.log(`${msg} ${name} 님`);

Number 숫자형 데이터

  • 정수와 실수

Boolean 참, 거짓 데이터

  • true/false

Undefined 미할당 데이터

  • 선언했지만, 아직 할당하지 않은 데이터

Null 의도된 빈 데이터

  • '의도적'으로 넣은 빈 데이터 (예를 들어, 무언가를 찾지 못했다는 것을 알려줘야 할 때)

Array 배열 데이터

  • 대괄호[ ]로 여러 개의 값을 저장할 수 있는 데이터
  • 데이터 내 순서인 index로 값을 불러온다.
  • JS는 약한 타입 언어이기 때문에, 하나의 배열 안에 여러가지 자료형이 섞여도 된다.
  • 배열에서 사용 가능한 속성, 함수
    변수명.length 배열의 길이
    변수명.push(추가할 값) 배열의 끝에 값을 추가
    변수명.pop() 배열의 가장 끝의 값을 삭제
    변수명.unshift(추가할값) 배열의 시작에 값을 추가
    변수명.shift() 배열의 가장 앞의 값을 삭제
    변수명.indexOf(찾을 값) 배열 내에 해당하는 값의 index를 알려줌 (없으면 -1)
    변수명.includes(찾을 값) 배열 내에 해당하는 값이 있는지를 알려줌 (Boolean 값)
    변수명.reverse() 배열의 순서를 반전시킴

Object 여러 데이터 꾸러미

  • 중괄호를 이용한다.
  • '속성 : 값' 을 저장한다.

※ typeof 자료형을 알려주는 역할을 한다.

console.log(typeof 3);
console.log(typeof "안녕");

※ propmt() 사용자로부터 숫자를 입력받아 '문자'로 저장한다.

 

형변환

JS는 자료형이 달라도, 자동 형변환하여 처리한다. 이런 경우, error가 뜨지 않고 진행되면서 문제를 일으킬 수 있기 때문에, 적절하게 형변환을 해주어야 한다.

문자 형변환

  • String() 어디에서나 사용 가능
	let num = 456;
	let num1 = String(num);
  • toString() 어떤 특정한 변수에 대해서 문자열로 변환하기 때문에, null, undefined에는 사용 불가능
	let num = 456;
	let num2 = num.toString();

숫자 형변환

  • Number()
  • 문자를 숫자로 형변환하면, NaN(Not a number)의 결과 나옴.

 

기본 연산자

  • 대입연산자: =
  • 비교연산자: ==, !=, === (자료형까지 비교), !===, >, >=, <, <=
  • 산술연산자: +, -, *, /
  • 논리연산자: ! (not), $$ (and), || (or)
  • 나머지연산자: %
  • 거듭제곱: **

※ 1씩 증가/감소하는 경우 ++, --으로 표현 가능하지만, 앞/뒤 위치에 따라 연산순서가 다르다.

let result, result2;
let num = 10, num2 = 10;

result = num++;	// result에 num을 대입하고, num에 +1
console.log(result); // 10

result2 = ++num2; // num2에 +1 한 뒤에,  result에 대입
console.log(result2); // 11

 

함수

함수 선언문 vs 함수 표현식 vs 화살표 함수

  • 함수 선언문은 어디서든 호출이 가능하기 때문에, 선언된 함수들을 미리 위에서 선언을 해놓는 '호이스팅(hoisting)'이 가능하다.
  • 함수 표현식은 코드에 도달해야 함수가 생성되기 때문에, 호이스팅 불가능하다.
  • 함수 function은 '=>'를 이용하여 화살표 함수 형태로도 표현할 수 있다.

onclick / onfocus / onchange / onkeyup / onkeydown

= 원하는 HTML 요소에 속성 값으로 JS함수와 연결시킬 수 있다.

  • onclick="functionName()" 클릭했을 때 함수 실행
  • onfocus 포커스 상태일 때 함수 실행
  • onchange 내용이 변했을 때 함수 실행
  • onkeyup 키보드의 키를 눌렀다가 뗐을 때 함수 실행
  • onkeydown 키보드의 키를 눌렀을 때 함수 실행

 

조건문

if

특정 조건을 만족했을 때, 특정 명령을 실행하도록 한다.

  • if / else
if (조건1) {
	// 조건1이 참일 때 실행할 코드
} else {
	// 조건1이 거짓일 때 실행할 코드
}
  • if / else if / else
if (조건1) {
	// 조건1이 참일 때 실행할 코드
} else if (조건2) {
	// 조건2가 참일 때 실행할 코드
} else if (조건3) {
	// 조건3이 참일 때 실행할 코드
} else {
	// 조건 1,2,3 모두 참이 아닐 때 실행할 코드
}
  • if 중첩
if (조건1) {
	if (조건2) {
	   	// 조건1이 참일때 조건2가 참이면 실행할 코드
    } else {
    	// 조건1이 참일때 조건2가 거짓이면 실행할 코드
    }
}
  • 3항 연산자 (조건이 참/거짓으로 나뉠 때, 한줄로 간단히 표현할 수 있다.)
    조건식 ? 참인 경우 : 거짓인 경우;
let age = "25";

age != "25" ? console.log("25세 입니다.") : console.log("25세가 아닙니다.");

Switch

특정 값과 일치할 때, 명령을 실행하도록 한다.

switch (변수) {
	case 값1:
    	// 변수와 값1이 일치하면 실행할 코드
    	break;
 	case 값2:
        // 변수와 값2가 일치하면 실행할 코드
        break;
    default:
        // 일치하는 값이 없을 때 실행할 코드 (기본값)
        break;
    }

 

반복문

똑같은 명령을 일정 횟수만큼 반복해 수행하도록 한다.

for

for (초기화식; 조건식; 증감식) {
	// 실행 문장 (명령문)
}

while

for문과 달리 증감식 없이 조건만 있기 때문에, 명령문에서 조건으 ㄹ변경시켜주거나 종료할 수 있는 명령어를 기재해야 한다.

while (조건문) {
	// 실행 문장 (명령문)
}

반복문 제어

  • break: 특정 조건이 되었다면, 반복문의 조건에 아직 부합하지 않아도 일단 멈추고 빠져나오게 한다.
  • continue: 특정 조건을 만족했을 때, 멈추고 다음 반복으로 진행한다.
728x90