변수:
자주쓰는 값을 미리 할당해서 재사용
변수를 사용하는 이유:
1. 편의성: 자주 변경해야 하는 값을 한번에 관리하기 위함
2. 성능: 한 번 연산된 값을 또 찾지 않고 재사용하기 위함
프로그래밍 언어에서 "="는 같다라는 개념이 아닌 대입의 개념
- 변수 선언
- 변수에 값 할당
- 변수 초기화 (선언 + 할당)
- 변수 재할당
변수와 상수 비교
- 변수: 추후에 바뀔수도 있는 값 (덮어쓰기 가능)
- let myAge = 37;
- 상수: 바뀌지 않는 고정된 값 (덮어쓰기 불가)
- const myGender = 'male';
변수의 범위
변수의 유효범위 (variable scope)
- 변수의 값이 읽히는 범위
- 보통 선언된 변수의 코드블록 {}이 해당 변수를 사용할 수 있는 유효범위로 설정됨
지역변수
- 특정 코드 블록 안에서 설정된 변수
- 해당 코드 블록안에서만 변수에 접근 가능
- 코드 블록 밖에서는 변수 접근 불가
- 특정 코드블록 안에서만 동작되는 값을 지정할 때 사용
const plusNum = () => {
let num = 0;
num++;
console.log('함수 코드블록 안에서 호출', num);
};
plusNum();
//num 변수 접근 불가하다는 콘솔 에러
console.log('코드 블록 밖에서 호출', num);
전역 변수
- 코드 블록 밖에 설정된 변수
- 전역 객체(window)에 등록하여 어떤 코드블록에서도 사용가능한 변수
- 전역에 등록되므로 다른 js파일에서도 접근 가능
- 보통 서로 다른 코드블록(함수)에서 하나의 값을 공유시켜야 할때 사용
- 주의점 : 전역에 너무 많은 변수를 설정하면 복잡한 프로젝트 구조에서 변수값이 엉킬 수 있음 (전역변수 오염)
//전역 변수 코드 블록 외부에 선언된 변수
//전역객체인 window에 변수가 등록됨
let num = 0;
//num값을 1 더하는 함수
const plusNum = () => {
num = num + 1;
};
//아래처럼 함수를 호출하여 2번 더하고 한번 뺀후 콘솔로 출력
plusNum();
plusNum();
console.log(num); // 결과값 : 2
모듈화
- 각 파일에서 생성한 변수가 window 전역 객체에 등록되지 않도록 해당 파일로 스코프를 제한
- 해당 파일에 type='module'로 지정 (defer는 오픈 상태)
<script defer src="js/common.js"></script>
<script type="module" src="js/validation.js"></script>
모듈화된 파일의 변수값을 다른 파일에서 사용하는 법
- 내보내고자 하는 변수 앞에 export 지정
- 가져오고자 하는 파일 상단에 import {변수명} from '파일 경로'
validation.js
export let global = 20;
common.js
import { global } from './validation.js';
console.log(global);
자료형:
자바스크립트에 다루는 자료의 종류
- 원시형 자료 : 메모리 안에 실제 값이 담기는 자료형
- 문자열
- 숫자
- boolean
- 참조형 자료 : 메모리에 실제 값이 아닌 값의 위치값이 담기는 자료형
- 배열
- 객체
원시형
let myName = 'Davide'; //문자열 (string)
let myAge = 37; //숫자 (number)
let isFemale = false; //논리형 (boolean)
참조형
배열 (array)
let myColors = ['red', 'green', 'blue'];
객체: 복잡한 구조의 데이터를 그룹화 할때
let myInfo = {
name: 'David',
age: 40,
IsFemale: false
};
출력
배열 출력: 배열명[순번]
console.log(myColors[0]);
객체 출력: 객체명.프로퍼티명
console.log(myInfo.name);
undefined 과 null
- undefined : 있어야 할 값이 없을 때, 할당을 안했을 때.
- null : 값을 비워둔다는 의미로 'null'값을 입력 (에러아님)
참조형 복사하는 방법
참조형의 복사를 하면, 값이 복사 되는 것이 아니라 주소를 복사하므로 원본도 함께 수정된다.
let colors = ['red', 'green', 'blue'];
// let colors2 = colors;
let colors2 = [...numbers];
let student = {
name: 'David',
age: 20
};
// let student2 = student
let student2 = {...student};
배열의 구조분해 할당
const colors = ['red', 'green', 'blue'];
const [color1, color2, color3] = colors;
console.log(color1);
객체의 구조분해 할당 (객체의 경우 name 그대로 할당해야 한다.)
const student = {
name: 'David',
age: 20
};
const { name, age } = student;
console.log(name);
연산자:
특정 값을 도출하기 위한 식별자
- 대입 연산자
- =
- 산술 연산자
- +, -, *, /, %
- 복합 대입 연산자
- +=, ++
- 비교 연산자
- ===: 값과 자료형 모두 비교
- ==: 값만 비교
- and 및 or 연산자
- and: &&
- or: ||
함수:
함수(function)
: 자주쓰는 구문들을 그룹핑해서 통째로 재활용하기 위한 코드 모음집
함수 만드는 방법
- 선언적 함수 : function 키워드로 선언방식 (호출 위치가 자유로움)
- 대입형 함수 : 변수에 화살표 함수를 대입하는 방식 (선언 이후에만 사용가능)
매개변수 (parameter) : 함수 외부에서 특정 값을 내부로 전달해주는 통로명
인자 (argument) : 매개변수를 통해 실제 전달되는 실질적인 값
선언적 함수
function plus(n1, n2) {
let result = n1 + n2;
console.log(result);
}
plus(2, 3);
대입형 함수
// es6버전의 대입형 함수 (화살표함수: Arrow function)
const divider = (n1, n2) => {
let result = n1 / n2;
console.log(result);
};
divider(4, 2);
조건문:
: 조건식을 만들어서 조건식이 ture, false인지에 따라서 코드 분기처리하는 식
if(조건식1){
조건식1이 참이면 이 코드블록 안쪽의 구문이 실행되면서 조건문 종료
조건식1이 거짓이면 다음 조건식2로 넘어감
}else if(조건식2){
조건식2가 참이면 이 코드블록 안쪽의 구문이 실행되면서 조건문 종료
조건식2가 거짓이면 다음 조건식2로 넘어감
}else {
만약 위의 조건식이 거짓이면 이곳의 구문을 실행하고 조건문 강제 종료
}
배열과 반복문:
배열:
비슷한 성격의 복수 개의 데이터를 그룹핑하기 위한 자료형
배열의 갯수:
- 배열명.length
반복문:
배열의 데이터를 손쉽게 제어하기 위한 문법 반복문
for(let i =0; i<최대수치; i++){
반복할 코드
}
i값이 0부터 최대수치값 만큼 {}안쪽의 구문을 반복처리
익명함수:
배열.forEach(익명함수)
colors.forEach((data, index) => {
console.log(data);
console.log(index);
console.log('------------');
});
자바스크립트에서의 형변환
실무에서 형변환이 일어나는 대표적 사례
1. 문자 + 숫자를 더하면, 문자화
let str = '1';
let num1 = 1;
let num2 = 2;
console.log(str + num1 + num2); //112
console.log(num1 + num2 + str); //31
문자열 템플릿 예시 - 백틱
let myName = '남상도';
console.log('제 이름은 ' + myName + '입니다.');
//위와 같은 번거로움을 개선하고자 ES6에서는 문자열 템플릿 문법이 생김
console.log(`제 이름은 ${myName}입니다.`);
문자를 숫자로 형변환 처리 (또는 숫자 형변환)
- parseInt(문자화된 숫자) : 정수 변환
- parseFloat(문자화된 숫자) : 실수 변환
let num = '3.5';
console.log(typeof num); // string
let num3 = parseFloat(num);
console.log(typeof num3); // number
console.log(num3); // 3.5
let num2 = parseInt(num3);
console.log(typeof num2); // number
console.log(num2); // 3
함수 호출시, 값이 없을 경우 예제
const userInfo = (name, age, gender) => {
if (!name || !age || !gender) {
console.error(`올바른 정보를 입력하세요.`);
} else {
console.log(`${name}님의 나이는 ${age}이고 성별은 ${gender}입니다.`);
}
};
userInfo('백설공주', '17', '여성');
userInfo('남상도', '37');
자바스크립트 문자열 내장함수
//문자열 자르기
const h1 = document.querySelector('h1').innerText;
console.log(h1);
const h1_cut = h1.substring(0, 10);
console.log(h1_cut);
//전체 문자열에서 특정 문자의 위치값 알아보기
//값이 존재하지 않으면 -1로 출력되므로,
//값이 존재하는지 체크할 때도 사용할 수 있다.
const p = document.querySelector('p').innerText;
console.log(p.indexOf('Sara'));
//문자열 분리해서 배열로 반환
const span = document.querySelector('span').innerText;
console.log(span);
const date = span.split('/')[0];
console.log(date);
const date_arr = date.split('-');
console.log(date_arr.join('.'));
//문자의 양옆 빈칸 제거해서 정리
const myName = '홍길동 ';
const myName2 = myName.trim();
console.log(myName2.length);
Tags:
웹개발_교육
