[01]
- javscript: 인터프리터 언어(바로실행), 컴파일을 거치지 않음.
- 버그가 덜 걸러지고, 실행이 조금 느리다는 단점이 있음.
- 객체 지향, 프로토타입 기반..
[02]
- 변수와 상수
- 데이터에 의미 부여
- var (예전 자바스크립트 버전에서 사용. 오늘날에는 사용하지 x)
- ES6 부터는 let, const 사용!!
- 자바스크립트는 데이터의 종류에 있어 엄격하지 않음. (하나의 주머니에 텍스트, 숫자, 배열 등 담아도 됨)
- 이미 만든 상수와 같은 이름의 상수를 다시 만들 수 없음.(브라우저 콘솔 예외) - let : 변수
- 넣은 데이터를 바꿀 수 있음 - const : 상수
- 넣은 데이터를 바꿀 수 없음
- 상수는 선언만 할 수 없음. 데이터를 넣어줘야함 - 변수 명명 규칙
- $나 _ 제외하고는 사용하지 않아야한다.
- 숫자로 시작하지 않아야한다. (변수 중간이나 끝에 사용하는 것은 가능)
- 변수명에는 예약어를 사용할 수 없다.
[03] 자료형(타입)
- 다른말로 집합
- 원시타입(Number, String, Boolean, Null, Undefined) - Number
- 표현가능한 숫자(1, 1.1, -1..)
- 사칙연산 가능 / 나머지 연산도 가능(모듈러 연산)
- NaN(연산이 실패했을 경우) - String
- let myName = ‘홍길동’; (*따옴표로 감싸줘야함)
- 덧셈 연산을 지원(문자열을 이어붙임)
- `(백틱) : 변수의 값을 동적으로 넣을 수 있음.
- let introduce = ${myName} : 템플릿 리터럴 문법 (실무에서도 자주 이용됨!) `${변수명}` - Boolean
- 상태(참, 거짓) - Null
- let empty = null; (아무것도 들어있지 않다.) - undefined
- 어떠한 값도 넣지 않았을 때 자동으로 할당됨. - null은 어떠한 값도 없다는 뜻(프로그래머가 할당),
undefined는 자동으로 할당
[04] 형 변환
- 다른 타입으로 변경하는 것 (Number → String)
- 묵시적 형 변환 (암묵적 형변환) : 자바스크립트 엔진이 형 변환
let num = 10;
let str = '20';
const result = num + str;
console.log(result); //1020 (문자열간의 덧셈 연산)
- 명시적 형 변환 : 개발자가 직접 함수를 이용해 변환(내장함수등을 이용)
let str1 = '10';
let strToNum1 = Number(str1);
console.log(10 + strToNum1); //20
let str2 = '10개';
let strToNum2 = Number(str2);
console.log(strToNum2); //NaN
// 문자 --> 숫자 형변환
let strToNum2 = parseInt(str2);
console.log(str2) // 10
// 숫자 --> 문자 형변환
let num = 20;
let numToStr1 = String(num);
console.log(numToStr1 + '입니다.');
[05] 연산자1
- 다양한 연산을 위한 기호, 키워드 등(덧셈, 뺄셈, 곱셈, 나눗셈등..)
// 1. 대입연산자
let var1 = 1;
// 2. 산술연산자
let num1 = 1 + 2;
let num2 = 1 - 2;
let num3 = 1 * 2;
let num4 = 1 / 2;
let num5 = 1 % 2;
let num6 = 1 + 2 * 10;
console.log(num6) // 21
// 3. 복합 대입 연산자 (산술 + 대입)
let num7 = 10;
num7 += 20;
console.log(num7) // 30
num7 -= 20;
console.log(num7) // 10
// 4. 증감 연산자
let num8 = 10;
num8++; // 후위 연산
console.log(num8++) // 11
console.log(++num8) // 전위연산
// 5. 논리 연산자(true & false)
let or = true || false;
let and true && false;
let not = !true;
console.log(or, and, not) // true false false
// 6. 비교 연산자
let comp1 = 1 === 2;
let comp2 = 1 !==2;
let comp3 = 2 > 1;
let comp4 = 2 < 1;
let comp5 = 2 >= 2;
let comp6 = 2 <= 2;[06] 연산자2
- null 병합 연산자
- 존재하는 값을 추려내는 기능
- null, undefind가 아닌 값을 찾아내는 연산자
let var1;
let var2 = 10;
let var3 = 20;
let var4 = var1 ?? var2; //10
let var5 = var1 ?? var3; //20
let var6 = var2 ?? var3; //var2값인 10이 출력
// 예시
var userName = '이원경'
var nickName = 'Wendy';
let displayName = userName ?? nickName; //둘중에 하나가 없을 떄 보여줄 값 출력
- typeof 연산자
- 값의 타입을 문자열로 반환하는 기능을 하는 연산자
let var7 = 1;
var7 = 'hello';
var7 = true;
let t1 = typeof var7;
console.log(t1) // string, number, boolean 등 변수가 가진 타입을 반환해줌
- 삼항 연산자
- 항을 3개 사용하는 연산자
- 조건식을 이용해서 참, 거짓을 판별하여 값을 다르게 반환
let var8 = 10;
// 요구사항 : 변수 res에 var8의 값이 짝수 -> '짝', 홀수 -> '홀'
let res = var8 % 2 === 0 ? "짝수" : "홀수";
// 조건식 ? 참 : 거짓
console.log(res) // 짝수
[07] 조건문
- 특정 조건을 만족했을 때에만 실행되는 코드를 작성하기 위한 문법
- 대표적으로 if, switch
// 1. if 조건문 (if문)
let num = 4;
if (num >= 10) {
//console.log("num은 10 이상입니다");
//console.log("조건이 참 입니다!");
} else if (num >= 5) {
//console.log("num은 5 이상입니다");
} else if (num >= 3) {
//console.log("num은 3 이상입니다");
} else {
//console.log("조건이 거짓입니다!");
}
// 2. Switch 문
// -> if문과 기능 자체는 동일
// -> 다수의 조건을 처리할 때 if보다 더 직관적이다.
let animal = "owl";
switch (animal) {
case "cat": {
console.log("고양이");
break; //조건을 만족할 때 중지시키려면 필요!!
}
case "dog": {
console.log("강아지");
break;
}
case "bear": {
console.log("곰");
break;
}
case "snake": {
console.log("뱀");
break;
}
case "tiger": {
console.log("호랑이");
break;
}
default: { // 어떤 케이스에도 해당되지 않을 때
console.log("그런 동물은 전 모릅니다");
}
}
[08] 반복문
- 어떠한 동작을 반복해서 수행할 수 있도록 만들어주는 문법
for (let idx = 1; idx <= 10; idx++) {
if (idx % 2 === 0) {
continue;
}
console.log(idx);
if (idx >= 5) {
break;
}
}
[09] 함수
- 중복으로 작성된 유사한 기능을 하는 코드
- 동일한 기능을 일일히 타이핑 해야하는 불편함, 유지보수 시 문제가 될 수 있음. - 함수
- 공통 코드를 묶고 이름을 붙여서 가져다 쓸 수 있도록 하는 자바스크립트 문법
// 함수선언
function greating() {
console.log('안녕하세요');
}
greating(); // 함수호출 시 소괄호 필수!!
// 함수
let area1 = getArea(10, 20);
console.log(area1);
let area2 = getArea(30, 20);
console.log(area2);
getArea(120, 200);
// 호이스팅
// -> 끌어올리다 라는 뜻
function getArea(width, height) {
function another() {
// 중첩 함수
console.log("another");
}
another();
let area = width * height;
return area;
}[10] 함수 표현식과 화살표 함수
- 함수 표현식 : 함수를 변수에 저장
- 화살표 함수 : 함수를 더 간결하게 표현하는 방식
function funcA(){
console.log("funcA");
}
let varA = funcA; // 함수 자체를 변수에 담을 수 있다.
console.log(varA);
// 1. 함수 표현식
let varB = function funcB(){
console.log("funcB");
}
varB();
funcB(); // 함수의 이름으로 호출 불가
// 2. 화살표 함수
let varC = (value) => {
console.log(value); // 10
return value + 1;
};
console.log(varC(10)); // 11
[11] 콜백함수 LINK
- 자신이 아닌 다른 함수에, 인수로써 전달된 함수를 의미 함
// 1. 콜백함수
function main(value){
console.log(1);
console.log(2);
value(); // 원하는 타이밍에 호출해서 사용 가능.
}
function sub(){
console.log("I am sub");
}
// main(1);
main(sub);
main() => { // sub 콜백 함수를 main에 넣어서 단축시킨 형태
console.log("I am sub");
});
// 2. 콜백함수의 활용
function repeat(count, callback){
for(let idx = 1; idx <= count; idx++){
callback(idx);
}
}
repeat(5, (idx) => {
console.log(idx);
});
repeat(5, (idx) => {
console.log(idx * 2);
});
repeat(5, (idx) => {
console.log(idx * 3);
});
/*
function repeatDouble(count){
for(let idx = 1; idx <= count; idx++){
console.log(idx * 2);
}
}
*/
repeat(5); //1 2 3 4 5
repeatDouble(5) //2 4 6 8 10[12] 스코프
- 변수나 함수에 접근하거나 호출할 수 있는 범위를 말 함
// 스코프
// -> 전역(전체 영역) 스코프 / 지역(특정 영역) 스코프
// -> 전역 스코프 : 전체 영역에서 접근 가능
// -> 지역 스코프 : 특정 영역에서만 접근 가능
let a = 1; // 전역 스코프
function funcA(){
let b = 2; // 지역 스코프
console.log(a);
}
funcA();
console.log(b); // b is not defined
if (true){
let c = 1;
}
console.log(c); // error
for(let i = 0; i < 10; i++){
let d = 1;
}
console.log(d); // error
--> 중괄호 안에 선언된 변수는 외부에서 접근할 수 없다!!
--> 함수도 지역 스코프를 갖게 된다.
--> 조건문이나 반복문에서는 지역 스코프를 갖지 않는다.(함수 선언식만 그렇다.)
[13] 객체1
- 원시 타입이 아닌 객체 타입의 자료형
- 여러가지 값을 동시에 저장할 수 있는 자료형
- 객체를 이용하면 현실세계에 존재하는 어떤 사물이나 개념을 표현하기 용이함
// 1. 객체 생성
let obj1 = new Object() // 객체 생성자
let obj2 = (); // 객체 리터럴(대부분 사용)
// 2. 객체 프로퍼티(객체 속성) key : value
let person = {
name : "홍길동",
age : 27,
hobby : "테니스",
job : "FE Developer",
extra: {},
10 : 20,
"like cat" : true,
};
// 3. 객체 프로퍼티를 다루는 방법
// 3-1. 특정 프로퍼티에 접근하는 방법(점 표기법, 괄호 표기법)
let name = person.name;
console.log(name); // 홍길동
let age = person["age"] // 쌍따옴표와 함께 문자열로 작성해야한다!!
console.log(age) // 27
let property = "hobby";
let hobby = person[property];
console.log(hobby); // 테니스
// 3-2. 새로운 프로퍼티를 추가하는 방법
person.job = "fe developer";
person["favoriteFood"] = "떡볶이";
console.log(person);
// 3-3. 프로퍼티를 수정하는 방법
person.job = "educator";
person["favoriteFood"] = "초콜릿"
// 3-4. 프로퍼티를 삭제하는 방법
delete person.job;
delete person["favoriteFood"];
console.log(person);
// 3-5. 프로퍼티 존재 유무를 확인하는 방법 (in 연산자)
let result1 = "name" in person;
let result2 = "cat" in person;
console.log(result1) // true
console.log(result2) // false[14] 객체2
// 1. 상수 객체
const animal = {
type : "고양이",
name : "나비",
color: "black",
}
animal.age = 2; // 추가
animal.name = "야옹이"; // 수정
delete animal.color; //삭제
console.log(animal); // {type: '고양이', name: '야옹이', age: 2}
animal = '123'; // 새롭게 할당하는 것은 불가!!! 추가, 수정, 삭제 가능*
// 2. 메소드
// -> 값이 함수인 프로퍼티를 말함
const person = {
name: "홍길동",
// 메서드 선언
sayHi() {
console.log("안녕!");
},
};
person.sayHi();
person["sayHi"]();
[15] 배열
- 여러개의 값을 순차적으로 담을 수 있는 자료 형
// 1. 배열 생성
let arrA = new Array(); // 배열 생성자
let arrB = []; // 배열 리터럴(대부분 사용)
let arrC = [ // 어떤 타입의 값이든 다 저장할 수 있다.
1,
2,
3,
true,
"hello",
null,
undefined,
() => {},
{},
[],
];
console.log(arrc);
// 2. 배열 요소 접근
let item1 = arrC[0];
let item2 = arrC[1];
console.log(item1, item2); // 1 2
arrC[0] = "hello"; // 배열의 값을 변경하는 것도 가능
* 출처 : 한입 크기로 잘라먹는 리액트
'javascript & jquery' 카테고리의 다른 글
| 자바스크립트 - 심화 (0) | 2025.03.14 |
|---|
댓글