프론트-05 Javascript 기초

aggapang·2025년 3월 18일

kb IT's Your Life

목록 보기

6/20

객체 기반 스크립트 프로그래밍 언어
웹브라우저에서 동작하는 프로그래밍 언어
동적인 기능을 추가할때 사용
인터프리터 언어로 한 줄씩 실행해서 실행 시점, 위치, 순서가 중요
타입을 지정하지 않음 (typescript-type지정 script)
js는 <script></script> 태그 안에 작성
다른 파일이면 script의 src로 연결 가능 : <script src="./testjs.js"></script>

기본 용어

표현식 : 간단한 코드 10 + 20
문장 : 실행할 수 있는 코드 최소 단위 10+20;
- ;을 사용하여 종결을 나타냄
키워드, 예약어 : break case if etc,,,
식별자 : 변수나 함수에 이름을 붙일 때 사용하는 단어
단독 다른 식별자와 함께
( ) 없음 변수 input 속성 Array.length
식별자 뒤 ( ) 함수 addNum(1,3) 메서드 Math.abs(-273)
주석 /**/ , //

	단독	다른 식별자와 함께
( ) 없음	변수 `input`	속성 `Array.length`
식별자 뒤 ( )	함수 `addNum(1,3)`	메서드 `Math.abs(-273)`

리터럴(literal) : 값을 생성하기 위해 미리 약속한 표기법 (코드에서 값을 나타내는 표기법)

문자 리터럴

숫자 리터럴

boolean 리터럴

문(statement) : 코드에서 최소 실행 단위

반목문

조건문

할당문 name = ‘길동’;

표현식 : 값으로 평가될 수 있는 문

숫자 표현식 : 1

연산자 표현식 : 1+1

함수 호출 표현식 : call( )

출력

alert() : 경고 창
console.log() : 개발자 도구 console에 출력됨

자료형

type확인 console.log(typeof 변수명)

원시primitive 타입 - 변수에 한가지 종류만 담음

number 숫자

let num = 1;
1. 정수
2. 실수
3. 2진수 8진수 16진수

특정 숫자를 0으로 나누면 Infinity
문자로 나누면 NaN

string 문자

let name = ‘길동’;

`안에 ${}을 사용하면 변수와 문자열을 함께 사용할 수 있음 `${변수명}\`
이스케이프 문자 : /n

boolean 불

let isFree = ‘false’;

true
false

변수명 작성할때 is로 시작
값 앞에 !!을 붙이면 boolean 타입으로 변경할 수 있음 console.log(!!0);
- falshy : 0, -0, “”(빈문자열), null, undefined, NaN
- truthy : 0이 아닌 모든 숫자, 비어있지 않은 문자, 객체(비어있어도),Infinity

null 빈 값

정해진 값이 비어있음

undefined

정의 x, 할당 x

객체object 타입

여러가지 종류(복합 데이터)
상태와 행동을 가지고 있는 복합데이터
메모리에 저장되는 주소를 변경
서로 연관 있는 속성과 행동(함수/메소드)을 묶어주는 기능
heap에 따로 저장
복합데이터 {key:value, key:value, ….}

연산자

데이터 처리를 위한 연산자의 종류

산술 연산자

+ - * / % **

단항연산자

+(양) -(음) !(부정)

양수로 봐구기

숫자가 아닌 타입들을 숫자로 변환

console.log(+true); //1
console.log(+false); //0
console.log(+null); //0
console.log(+undefined); //NaN
console.log(+'text'); //NaN
console.log(!!'text'); //true
console.log(!!''); //false

할당연산자

+= -= *= %=

증가&감소 연산자

++ --

대소관계 비교 연산자

> < >= <=

논리 연산자

! && ||

비트 연산자

& ^ ~ << >>

동등 비교 관계 연산자

==
!= 값이 다른가
=== 값과 타입까지 같은가
!== 값과 타입이 다른가

변수

값을 저장할 때 사용하는 식별자

변수 선언 : let,const

let 변수 : 변할 수 있는 값
- let name = ‘홍길동’;
- 변경 가능
- 같은 변수 명으로 다시 선언 할 수 없음 (재할당은 가능)
const 상수 : 변할 수 없는 값
- 상수를 의미, 변경 불가
- 선언할 때 할당해야함
- 재할당 불가, 재선언도 불가
- const MAX_FRIST = 100; : 변수명을 대문자로 선언, 변경 안될 값 넣기

선언 규칙

변수 (식별자) 작성시 주의 사항
라틴문자 (0-9, a-z, A-Z), _ , $
대소문자 구분함

카멜케이스 형식 userName

파스칼케이스 PascalCase : 클래스명 작성하거나 생성자 함수 만들때

스네이크 케이스 MAX_SIZE : 상수

한국어 x
예약어 keyword 사용 X (let, const, if, for x)
숫자, 특수문자로 시작 X ( 예외 _ , $ )
여러개의 변수를 1,2,3 숫자로 구분은 가능한 하지 말자 → 길어져도 최대한 의미있고 구체적으로 사용하기

조건문

if (조건문) {실행문}

if (조건식) {실행문} else {실행문}

if (조건식) {실행문} else if (조건문) {실행문} else {실행문}

조건식 ? 참일경우 : 거짓일 경우

switch () {
  case :
    break;
  case :    
    break;
  default: ;
}

반복문

for

for (let i = 0 초기식 ; i < arr.length 조건식; i++) {실행문}
- break: 코드 종료
- continue : 건너뛴다

배열과 객체 데이터를 다룰 때 많이 사용됨

let arr = [10, 20, 30, 40, 50];

for (let i = 0; i < arr.length; i++) {
  console.log('for' + arr[i]);
}

forEach(()=>{})

배열의 요소를 뽑아서 순회

for ... of 반복문

배열의 요소를 직접 순회
이터러블

인덱스, 전체 배열을 사용할 수 없음

for (let value of arr) {
  console.log('of' + value);
}

for ... in 반복문

객체의 속성(key)을 순회

배열에서는 인텍스를 순회

for (let ind in arr) {
  console.log('in' + ind);
  console.log(arr[ind]); // 값이 나온다
}

while

//while
let index = 0;
while (index < arr.length) {
  console.log('while' + arr[index]);
  index++;
}

do while 반복문

조건이 false여도 한번 실행

//do-while
index = 0;
do {
  console.log('do-while' + arr[index]);
  index++;
} while (index < arr.length);

함수 ( )

함수는 호출이 일어나지 전까지 실행되지 않음
위치 상관 없음

선언 함수

function 함수이름(매개변수) {실행}

function add(a, b) {
  console.log(a + b);
}

익명 함수

let 변수명 = function(매개변수) {실행}

let add2 = function (a, b) {
  console.log(a + b);
};

화살표 함수

let 함수이름 = (매개변수) ⇒ 실행;

let add3 = (a, b) => a + b;

+) 할당

let add3 = add2;

생성자 함수

new Date()

객체를 생성

즉시 실행 함수

(function run(){})

콜백 함수

함수 내부에서 함수를 실행하는 것

parameters 매개변수

argument

return

return undefined; : 기본
return; : 실행 종료

객체 { }

key : 문자, ‘문자열’, 숫자
value : 원시값, 객체 (배열, 함수 등도 포함)
속성 : 객체에 있는 값
메서드 : 함수가 속성일 경우
- this
  - 객체 내에서 자신의 속성이나 매서드를 참조할 때 사용
  - 객체 안 method 정의할 때 익명함수 사용 추천
접근 방식
- 영어 단어 경우 객체명.키
- 객체명['키']

function을 만들어서 추가할 수 있음

function addKey(obj, key, value) {
  obj[key] = value;
}

key:value 같으면 짧게 줄일 수 있음

const x = 0;
const y = 0;
const coord = { x: x, y: y };

내장 객체

mdn

number 타입에서 사용하는 내장 객체

let num2 = 123456789.1234;
console.log(num2.toFixed());
console.log(num2.toString());
console.log(num2.toLocaleString());
console.log(num2.toPrecision(2));

console.log(Math.PI);
console.log(Math.abs(-10));

string에서 사용하는 내장 객체

let str = ' abc defg ';
console.log(str.length); //str의 길이
console.log(str.charAt(0)); //해당 인덱스의 값 찾기
console.log(str.indexOf('g')); //인덱스 찾기
console.log(str.lastIndexOf('g'));
console.log(str.includes('c')); //해당 값 유무
console.log(str.startsWith('a')); //시작 값인지
console.log(str.endsWith('g')); //끝나는 값인지
console.log(str.slice(5)); //인덱스 다음 부터
console.log(str.trim()); //앞뒤로 공백 제거

let long = 'hello everyone~! today is 12 march';
console.log(long.split(' ')); // 공백 기준 split
console.log(long.split('!', 2)); // ! 기준 split

console.log(new Date().getDate());

배열 [ ]

요소 : 배열에 있는 값

배열 생성

생성
- arr = Array.of(1, 2, 3, 4);
- const arr2 = Array.from(arr);
- let arr3 = arr;
- let arr4 = Array.from('hi my name');
- 객체 이용
```
arr4 = Array.from({
  0: 'hi',
  1: 'everyone',
  length: 2,
});

console.log(arr4);
```

배열과 함께 사용하는 함수들

.push() : 맨뒤에 값 추가
.unshift() : 맨앞에 값 추가
.pop() : 맨뒤 값 삭제
.shift() : 맨앞 값 삭제
.splice(i,n) : index i부터 n개 삭제, 중간 값 삭제
arr1.concat(arr2) : arr1 뒤에 arr2가 병합됨
.flat()
.fill()
.join()
forEach() : 배열의 각 요소에 대해 호출

aggapang

이전 포스트

프론트-04 CSS 속성

다음 포스트