연산자
문자 연산자
- '+' : 문자열 합치기
숫자 연산자
-
산술 연산자
- '+' : 더하기
- '-' : 빼기
- '*' : 곱하기
- '/' : 나누기
- '%' : 나머지
-
증가 연산자
- 전위 ++a;
- 후위 a++;
-
감소 연산자
- 전위 - -a;
- 후위 a- -;
-
대입 연산자
- = : 대입
- x+=y : x=x+y
- x-=y : x = x-y
- x=y : x=xy
- x/=y : x=x/y
논리 연산자
- && : and 연산자, 둘 다 참이어야 참
- || : or 연산자, 둘 중 하나만 참이라도 참
삼항 연산자
- 조건 ? 참일 경우 : 거짓일 경우
- 너무 깊지 않게 사용
비교 연산자
-
== : 느슨한 비교, 자료형 자동 변환
-
=== : 엄격한 비교, 자료형도 일치 해야 함
-
! = : 느슨한 비교, 같지 않다
-
! == : 엄격한 비교, 같지 않다
-
크기 비교
- '<'
- '>'
- '≤'
- '≥'
제어문
if문
if( 조건문 ){
실행 코드
}
if( 조건문 ) {
실행문
} else if( 조건문2 ){
실행 코드
} else {
실행 코드
}- 기본 if문
- 조건문에 대해 판단
- 참일 경우 실행 코드 실행
- 거짓일 경우 다음 코드로 이동
- if - else 문
- 조건문에 대해 판단
- 참일 경우 실행 코드 실행
- 거짓일 경우 조건문2에 대해 판단
- else if 이용해 여러 조건 제시 가능
switch문
switch( 상황 )
case 조건1:
실행 코드1
case 조건2:
실행 코드2
case 조건3:
실행 코드3
break- switch문
- 상황과 조건들을 비교
- 참일 경우 그 실행 코드부터
break 만나기 전 모든 실행 코드 실행
- 만약 조건2가 참이라면
- 실행 코드2와 실행 코드3 실행 후 종료
while문
while ( 조건문 ) {
실행코드
조건과 관련된 코드
}- while문
- 조건문에 대해 판단
- 참일 경우 실행 코드 실행
- 거짓일 경우 반복문에서 빠져나옴
- 무한 반복 주의
for문
for ( 변수 선언; 조건문; 변수 변화) {
실행 코드
}- for문
- for문의 횟수에 대한 변수 선언
- 조건문에 대해 판단
- 참일 경우 실행 코드 실행
- 반복 설정에 대한 코드 실행
- 횟수 변수에 대한 연산
- 다시 조건문에 대한 판단 반복
함수
함수의 기본 형태
- 함수
- 작업을 수행하기 위한 명령문의 집합
- 하나의 함수는 하나의 작업을 수행
- 매개변수
- 함수가 입력값을 받을 변수를 의미
- 기본값 지정 : param2=’3’
- 가변인자 : …args
- 매개변수의 개수를 정해두지 않는 것
- 자료형으로 취급
- 변수에 대입
- 함수의 매개변수
- 함수의 반환값
function name(param1, param2) {
실행 코드;
return;
}함수 작성 형태
- 선언식
funcA(); function funcA() { console.log('java'); };
- 표현식
const funcA = function() { console.log('script'); } funcA(); - 화살표 함수
const simplePrint = function() { console.log('simpleTrint!'); } const simplePrint = () => { console.log('simplePrint!'); }
Callback 함수
- 다른 함수의 인자로 전달되어 특정 시점에 실행되는 함수
- 주로 비동기 처리, 이벤트 핸들링, 배열 메서드에서 활용
- 콜백 중첩 발생을 해결하기 위해 Promise나 async/await를 사용
Closure
- 지역 변수가 사라지지 않고 계속 기억되는 현상
- 외부 함수의 변수를 참조하는 내부 함수를 반환할 때만 발생
- 지역변수를 가진 함수를 변수에 담아 실행
- 함수 내부에 변수를 작성하여 외부에서는 접근 불가
- 데이터 보호 시 사용
객체
Class
- 연관 있는 데이터를 한 곳에 담는 컨테이너
- 다양한 소지품을 담은 가방에서 가방의 역할
Object
-
주로 데이터 관리를 위해서 사용
-
{key : value}의 형태를 가짐
-
자주 사용하는 기능
- ‘key’ in object
: 객체 내에 key가 존재하는지 확인 - for( const key in object)
: 객체 내에 key 확인 후 value 확인
- ‘key’ in object
-
object 복사
- 대입 연산자 사용 시
기존 값도 변경됨 - assign(빈 객체, 복사할 객체)
: 이렇게 복사 시 기존 객체 변경x
- 대입 연산자 사용 시
-
모듈 내보내기/가져오기
- export
- 다른 곳에서 사용할 수 있도록 내보내는 역할
- 개별 내보내기
-
// math.js export const pi = 3.14159; export function add(a, b) { return a + b; } export const multiply = (a, b) => a * b;
-
- 기본 내보내기
// message.js export default function greet(name) { return `안녕하세요, ${name}님!`; }
- import
- 다른 곳의 모듈을 사용하도록 가져오는 역할
- 개별 가져오기
- 별칭 사용하여 가져오기
// main.js import { pi, add, multiply } from "./math.js"; console.log(pi); // 3.14159 console.log(add(2, 3)); // 5 console.log(multiply(4, 5)); // 20 // 별칭 사용하여 가져오기 import { add as sum } from "./math.js"; console.log(sum(2, 3)); // 5 - 기본 가져오기
import greet from "./message.js"; console.log(greet("철수")); // "안녕하세요, 철수님!" - 모든 요소 한 번에 가져오기
import * as math from "./math.js"; console.log(math.pi); // 3.14159 console.log(math.add(2, 3)); // 5 console.log(math.multiply(4, 5)); // 20
- export
배열
for Each
- 모든 요소를 순서대로 하나씩 꺼내어 확인
- 배열의 key와 value를 각자 확인할 수 있음
<body>
<SCript>
const animals = ['🐶', '🐱', '🐷'];
// forEach
animals.forEach(run);
// forEach로 리스트의 각 값이 callback 함수의 인자로 적용됨
// 외우기
function run(v, i){
console.log(v, i);
}
animals.forEach(function (animal, index, array) {
console.log(`${animal} | ${index} | ${array}`);
});
animals.forEach((animal, index, array) => {
console.log(`${animal} | ${index} | ${array}`);
});
</SCript>
</body>map
- 모든 요소에 접근하여 제어
<body>
<div></div>
<script>
const arr = [1, 2, 3, 4, 5];
const arr2 = arr.map((v,i,a) => {
return `<p>${v}</p>`
});
console.log(arr2);
arr2.forEach((v) => {
// 순수 자바스크립트 = 바닐라 스크립트
document.querySelector('div').innerHTML += v;
})
</script>
</body>
배우는중입니다.