1. 변수와 상수
- 변수: 값을 메모리에 저장하고, 저장된 값을 읽어들여 재사용
- 5가지 주요 개념
- 변수 이름: 저장된 값의 고유 이름
- 변수 값: 변수에 저장된 값
- 변수 할당: 변수에 값을 저장하는 행위
- 변수 선언: 변수를 사용하기 위해 컴퓨터에 알리는 행위
- 변수 참조: 변수에 할당된 값을 읽어오는 것
- 변수 선언 키워드
- var
- 잘 사용하지 않음
- 똑같은 이름으로 다시 선언할 수 있음
- 재할당 가능
- let
- 똑같은 이름으로 다시 선언할 수 없음
- 재할당 가능
- const
- 똑같은 이름으로 다시 선언할 수 없음
- 재할당 불가능
- var
| keyword | 재선언 (Redeclare) | 재할당 (Reassign) | Scope |
| var | 가능 | 가능 | Function-level |
| let | 불가능 | 가능 | Block-level |
| const | 불가능 | 불가능 | Block-level |
2. 데이터 타입
- 숫자(Number)
- 정수형
- 실수형
- 지수형
- NaN(Not a Number): 수학적으로 정의되지 않은 계산을 수행하거나, 숫자가 아닌 값을 숫자로 변화하려고 할 때 발생
- Infinity
- -Infinity
- 문자열(String)
- '' 나 ""로 감싸서 표현
- 문자열 길이 확인: length
- 문자열 결합: concat
- 문자열 자르기: substr, slice
- 문자열 검색: search
- 문자열 대체: replace
- 문자열 분할: split
- 불리언(Boolean)
- true 또는 false 반환
- 조건문, 논리 연산자와 함께 많이 사용됨
- undefined
- 변수는 선언되었으나 값이 할당되지 않은 변수
- null
- 값이 존재하지 않음을 '명시적'으로 나타내는 방법 (일부러 어떠한 변수가 값이 없다는 것을 표현하기 위함)
- null =! undefined
- 객체(Object)
- 중괄호{}를 사용하여 객체를 생성
- key와 value를 넣어줌
let person = { name: 'choi', age: 20, isMarried: true, }
- 배열(Array)
- 여러 개의 데이터를 순서대로 저장하는 데이터 타입
let number = [1, 2, 3, 4, 5];let fruit = ['apple', 'banana', 'orange'];
3. 형 변환
- 암시적 형 변환
- 자동으로 수행되는 형 변환으로 문자열과 다른 자료형이 연산자로 결합될 때 자동으로 다른 문자열로 변환한 후 연산을 수행
- 문자열
- {객체}, null, undefined + "1" => 문자열이 우선시 됨
let result1 = 1 + "2"; console.log(result1); // 12 반환 console.log(typeof result1); // string 반환 let result2 = 1 + true; console.log(result2); // 2 반환 console.log(typeof result2); // number 반환
- 숫자
- 더하기 연산자가 아닌 다른 연산자가 나오면 숫자가 우선시 됨
let result3 = 1 - "2"; console.log(result3); // -1 반환 console.log(typeof result3); // number 반환 let result4 = "2" * "3"; console.log(result4); // 6 반환 console.log(typeof result4); // number 반환
- 명시적 형 변환
- 개발자가 직접 자료형을 변환하는 것
- Boolean
console.log(Boolean(0)); // 0 이라는 값을 Boolean타입으로 변환하겠다 console.log(Boolean("")); // false console.log(Boolean(null)); // false console.log(Boolean(undefined)); // false console.log(Boolean(NaN)); // false console.log('-------------------'); console.log(Boolean("false")); // true: ""안에 들어가있는 문자열이므로 true 반환 console.log(Boolean({})); // true: 객체는 값이 비어있더라도 true 반환- 문자열
-
let result5 = String(123); console.log(typeof result5); // string console.log(result5); // "123" let result6 = String(true); console.log(typeof result6); // string console.log(result6); // "true" let result7 = String(false); console.log(typeof result7); // string console.log(result7); // "false" let result8 = String(null); console.log(typeof result8); // string console.log(result8); // "null" let result9 = String(undefined); console.log(typeof result9); // string console.log(result9); // "undefined" - 숫자
-
let result10 = Number("123"); console.log(result10); // number console.log(typeof result10); // 123 console.log(Number("")); // 0 console.log(Number(" ")); // 0 console.log(Number(true)); // 1 console.log(Number(false)); // 0
4. 연산자
- 산술 연산자
- 더하기 (+)
- 빼기 (-)
- 곱하기 (*)
- 나누기 (/)
- 나누기 (%)
-
console.log(5 / 2); // 2.5 console.log(5 % 2); // 1
- 할당 연산자
- 등호 (=)
- 더하기 등호 (+=)
-
x += 5; // x = x + 5 와 같음 console.log(x); - 빼기 등호(-=)
- 곱하기 등호 (*=)
- 나누기 등호 (/=)
- 나머지 등호 (%=)
- 비교 연산자
- ===
- 값과 데이터 타입 모두 비교
- 타입 변환을 시도하지 않으며, 값이 동일하고 데이터 타입도 동일할 때만 true를 반환
-
console.log(5 === '5'); // false, 숫자 5와 문자열 '5'는 데이터 타입이 다름 console.log(null === undefined); // false, null과 undefined는 데이터 타입이 다름
- ==
- 값만 비교
- 두 값의 데이터 타입이 다를 경우, 타입 변환(Type Coercion)을 시도한 후 비교 (자바스크립트는 자동 형변환 기능을 가지고 있음)
-
console.log(5 == '5'); // true, 숫자 5와 문자열 '5'가 타입 변환 후 같다고 간주됨 console.log(null == undefined); // true, 둘 다 비어있다고 간주됨
- !==
- 값과 데이터 타입 모두 비교
- 타입 변환을 시도하지 않으며, 값이 동일하지 않거나 데이터 타입이 다를 때 true를 반환
-
console.log(5 !== '5'); // true, 숫자 5와 문자열 '5'는 데이터 타입이 다름 console.log(null !== undefined); // true, null과 undefined는 데이터 타입이 다름
- !=
- 값만 비교하며, 필요시 타입 변환을 시도한 후 비교
- 두 값이 동일하지 않다고 간주될 때 true를 반환
-
console.log(5 != '5'); // false, 숫자 5와 문자열 '5'가 타입 변환 후 같다고 간주됨 console.log(null != undefined); // false, 둘 다 비어있다고 간주됨
- >, <
- > 는 좌측에 위치한 값이 더 클 때 true, 양쪽의 값이 같거나 우측에 위치한 값이 더 큰 경우 false
- < 는 우측에 위치한 값이 더 클 때 true, 양쪽의 값이 같거나 좌측에 위치한 값이 더 큰 경우 false
- >=, =<
- >= 는 좌측에 위치한 값이 더 크거나 같을 때 true, 우측에 위치한 값이 더 큰 경우 false
- =< 는 우측에 위치한 값이 더 크거나 같을 때 true, 좌측에 위치한 값이 더 큰 경우 false
- ===
- 논리 연산자
- && (AND 연산자)
- 두 조건이 모두 참일 때만 참을 반환
-
let isSunny = true; let isWarm = true; if (isSunny && isWarm) { console.log("It's a nice day!"); // 둘 다 참이므로 출력됩니다. } - || (OR 연산자)
- 두 조건 중 하나라도 참이면 참을 반환
-
let isWeekend = false; let isHoliday = true; if (isWeekend || isHoliday) { console.log("You can relax!"); // 하나라도 참이면 출력됩니다. } - ! (NOT 연산자)
- 논리 값을 반대로 바꿈, 참이면 거짓으로 거짓이면 참으로
-
let isTired = false; if (!isTired) { console.log("You have energy!"); // !false는 true이므로 출력됩니다. } - 복합 예제
-
let isAdult = true; // 성인인지 여부 let hasPermission = false; // 허가 여부 let isHoliday = true; // 휴일 여부 // 성인이고, (허가가 있거나 휴일이 아니면), 외출할 수 있다. if (isAdult && (hasPermission || !isHoliday)) { console.log("You can go out."); // 조건이 충족되지 않으므로 출력되지 않습니다. } else { console.log("You cannot go out."); // 이 조건이 출력됩니다. } - 삼항 연산자 (?:)
- 조건에 따라 값을 선택
-
let x = 10; let result = (x > 5) ? "크다" : "작다"; // 이 조건이 참이면 앞의 것, 거짓이면 뒤의 것을 반환 console.log(result); // "크다" - 타입 연산자
-
console.log(typeof 123); // "number" console.log(typeof "123"); // "string" console.log(typeof true); // "boolean" console.log(typeof undefined); // "undefined" console.log(typeof null); // "object" console.log(typeof {}); // "object" console.log(typeof []); // "object" console.log(typeof function(){}); // "function"
- && (AND 연산자)
5. 함수
- 함수 선언문
-
function add (매개변수) { //함수 내부에서 실행할 로직 } // 두 개의 숫자를 입력 받아서 덧셈을 한 후 내보내는 함수 function add(x, y) { return x + y; } console.log(add(2, 3)); // 5 - 함수 표현식
-
// 위의 함수 선언식과 동일한 역할을 하는 함수지만 선언하는 방법이 다름 let add2 = function(x,y){ return x + y; } - 함수 호출하기
-
// 방법 1 add(2,3); console.log(add(2,3)); // 방법 2 let functionResult = add(3,4); // functionResult 변수 선언 후 함수 호출 add(2,3) console.log(functionResult); // 할당 받은 값을 출력 // 연습 (add2를 가지고 10과 20을 더한 값을 출력) console.log(add2(10,20)); // 방법 1 let functionResult2 = add2(10,20); // 방법 2 console.log(functionResult2); - 함수 스코프
- 전역 스코프 (global scope): 전체 영역에서 영향을 끼침
-
// 스코프: 전역변수 let x = 10; // 전체 영역에서 선언이 된 변수 x function printX() { console.log(x); // 함수 내부에서도 } console.log(x); // 함수 밖에서도 호출이 가능함 printX(); - 지역 스코프 (local scope): 함수 내에서만
-
// 스코프: 지역변수 function printX() { let x = 10; // 함수 내부에서 선언이 된 변수 (지역변수) console.log(x); } console.log(x); // 여기서는 호출할 수 없음 -> 오류 발생 printX(); - 화살표 함수
-
// 화살표 함수 function add(x, y) { return x + y; } // 1-1. 기본적인 화살표 함수 let arrowFunc01 = (x, y) => { return x + y; } // 1-2. 한줄로 (중괄호{} 안에 있는 return문이 한 줄일 경우만 중괄호와 return 키워드 생략 가능) let arrowFunc02 = (x, y) => x + y; -
// 1-3. 매개변수가 하나인 화살표 함수 function testFunc(x) { return x; } let arrowFunc03 = x => x;
6. 조건문
- 논리적인 로직을 통해 조건이 충족될 때만 특정 구문을 실행
- if...else
-
if (condition1) // 명령문1 else // 명령문2 if (condition1) { // 명령문1 } else { // 명령문2 } - if...else if...else
-
if (condition1) { // 명령문1 } else if (condition2) { // 명령문2 } else if (condition3) { // 명령문3 } else { // 명령문4 } - switch문
-
let fruit = "사과"; switch (fruit) { case "사과": console.log("사과입니다."); break; // case가 끝날 때 break문을 같이 넣어줘야 함. 그래야 실행 후 빠져 나옴 case "바나나": console.log("바나나입니다."); case "키위": console.log("키위입니다."); default: console.log("아무것도 아닙니다.") }
7-1. 반복문 - for
- 모든 반복문은 기본적으로 특정 구문을 반복할 때 사용
- for
- 반복 횟수가 명확하거나 인덱스 기반으로 배열이나 리스트를 순회할 때 사용
- 배열, 리스트, 또는 반복 횟수가 명확한 경우에 유용함
-
for (let i = 0; i < 5; i++) { console.log(i); // 0, 1, 2, 3, 4 출력 } -
for (초기화구문; 조건문; 증감문) // 명령문 for (초기화구문; 조건문; 증감문) { // 명령문 }
- for...of
- 배열이나 반복 가능한 객체(배열, 문자열, Set, Map 등)의 값을 하나씩 순회
- 인덱스가 필요하지 않을 때 유용함
const persons = ['강승현', '홍길동', '김아무개']; for (const person of persons) { console.log(person); } // Print: '강승현' // '홍길동' // '김아무개'let fruits = ["apple", "banana", "cherry"]; for (let fruit of fruits) { console.log(fruit); // apple, banana, cherry 출력 } -
for (변수선언문 of 반복가능한객체) { // 명령문 }
- for...in
- 객체의 열거 가능한 속성을 반복
- 객체의 속성 이름(키)을 하나씩 순회
- 배열에는 권장되지 않음(인덱스를 키로 사용하기 때문에 예상치 못한 결과를 초래할 수 있음)
-
for (변수선언문 in 반복가능한객체) { // 명령문 }const persons = ['강승현', '홍길동', '김아무개']; for (const person in persons) { console.log(person); } // Print: 0 // 1 // 2 const persons = ['강승현', '홍길동', '김아무개']; for (const index in persons) { const person = persons[index]; console.log(person); } // Print: '강승현' // '홍길동' // '김아무개'let person = { name: "John", age: 30, city: "New York" }; for (let key in person) { console.log(key + ": " + person[key]); // name: John, age: 30, city: New York 출력 }
- for
7-2. 반복문 - while
- while
- 조건식이 false가 될 때까지 무한 실행
- true라면 계속 실행하고 false가 되면 즉시 while문 종료
-
while(조건){ // 메인로직 // 증감 } -
while (i < 10) { console.log(i); // 0 출력 -> 1 출력 > 2 출력 > 3 .. 4......9 i++; // i가 1 증감, 10이 되는 순간 끝남 } -
x = 3; while (x < 100) { if (x % 5 === 0 && x >= 5) { /// 5로 나눈 나머지가 0이고, (5의 배수일 때), x가 5보다 크거나 같을 때 console.log(x); } x++; }
- do...while
- do가 먼저 실행된 뒤 while문 실행
-
et i = 0; do { // do가 먼저 // 메인로직 console.log(i); // 최초에 한번 무조건 실행 i++; } while (i < 10); // 조건
- break
- 반복문을 종료함
-
for (let i = 0; i < 10; i++) { if (i === 5) { break; // for문 멈추고 종료함 } console.log(i); }
- continue
- 그 다음 순서로 넘어감
-
for (let i = 0; i < 10; i++) { if (i === 5) { continue; } console.log(i); } // output: 0 1 2 3 4 6 // 5가 생략됨 7 8 9
8. 객체
- { key1: value, key2: value } 의 형태로 표현하며, value에는 모든 자료형의 값을 담을 수 있음
- 다른 언어에서는 이와 같은 자료형을 **Dictionary(딕셔너리)**로 부르기도 하지만 JS에서의 공식 명칭은 Object
- key를 기준으로 객체에 있는 value(값)에 접근할 수 있음
- 객체 속성 접근 (객체의 key에 접근하는 방법 두가지)
- obj.key
- obj['key']
-
const person = { name: '강승현', age: 52 }; person.name; // Print: '강승현' person['name']; // Print: '강승현' person.hobby; // Print: undefined - 만약 객체의 key에 여백(스페이스), 대쉬(-), 특수문자(*) 등을 사용할 경우, 반드시 obj['key'] 와 같은 표현식을 사용
-
const person = { name: "강승현", age: 52, 'raising dog': '푸들', } - object의 키로 사용하기 위해서는 따옴표로 감싸야 함
- person.'raising dog'는 참조가 불가능하지만, person['raising dog']로 하는 경우 참조가 가능
- 객체 메소드
- Object.keys(): 객체의 속성이름(key)를 가져오는 메서드
-
let person = { name: "홍길동", age: 30, gender: "남자" }; let keys = Object.keys(person); console.log(keys); // ["name", "age", "gender"] - Object.values(): 객체의 속성 값(value)들을 배열로 반환
-
let values = Object.values(person); console.log(values); // ["홍길동", 30, "남자"] - Object.entries(): key와 value를 묶어서 배열로 만든 배열 (2차원 배열)
-
let entries = Object.entries(person); console.log(entries); // [ [ 'name', '홍길동' ], [ 'age', 30 ], [ 'gender', '남자' ] ] - Object.assign(): 객체를 복사
-
let newPerson = Object.assign({}, person, { age: 35 }); console.log(newPerson); // { name: "홍길동", age: 35, gender: "남자" }
9. 배열
- Array (배열)
- [value, value2, value3] 의 형태로 표현하며, value에는 모든 자료형의 값을 담을 수 있음
- 다른 언어에서는 이와 같은 자료형을 **List(리스트)**로 부르기도 하지만 JS에서의 공식 명칭은 Array
- 배열에는 Index라고 하는 개념이 존재하며, value에 접근 가능하게 해주는 식별자
- Index의 최소 값은 0
const names = ['강승현', '홍길동', '김아무개']; names[0]; // Print: '강승현' names[2]; // Print: '김아무개' names[3]; // Print: undefined
- 배열 메소드
- push(): 밀어 넣음, 배열의 뒤에 더해짐
- pop(): 마지막 요소를 삭제
- shift(): 첫번째 요소를 삭제
- unshift(): 맨 앞에 요소 추가
- splice(): 위치 지정
-
let fruits = ["사과", "바나나", "오렌지"]; fruits.splice(1, 1, "포도"); // 배열 1번째 자리에 1개를 지우고 . 그자리에 포도를 추가 console.log(fruits); // ["사과", "포도", "오렌지"] - slice()
-
let fruit8 = ["사과", "바나나", "오렌지"]; let slicedFruits = fruit8.slice(1, 2); // 배열의 두번째 요소부터 세번째 요소전까지 세로운 배열로 만듬 console.log(slicedFruits); // ["바나나"] - forEach()
-
let numbers1 = [1, 2, 3, 4, 5]; // numbers.forEach(매개변수) // 매개변수 자리에 함수를 넣는 것: 콜백 함수 numbers1.forEach(function (number) { console.log(number); }); - map(): map함수 안에 들어가는 함수는 반드시 return문을 가져야 함, map을 거치고 나면 새로운 배열이 나오기 때문에 새로운 배열을 받아야 함
-
let numbers2 = [1, 2, 3, 4, 5]; let newNumbers = numbers2.map(function (item) { // map을 거치고 나면 새로운 배열이 나오기 때문에 새로운 배열을 받아야 함 return item * 2; }); console.log(newNumbers); // 2,4,6,8,10 // 항상 원본 배열의 길이만큼이 return 됨 - filter(): 매개변수로 콜백함수가 들어가며 , 반드시 return문에 필터할 조건이 들어가야 함
-
let numbers3 = [1, 2, 3, 4, 5]; let filteredNumbers = numbers3.filter(function (item) { return item > 3; }); console.log("Filtered numbers: " + filteredNumbers); // 4, 5 let evenNumbers = numbers3.filter(function (number) { return number % 2 === 0; }); console.log("Filtered even numbers: " + evenNumbers); // 2, 4 - reduce()
- find(): 매개변수로 콜백함수가 들어가며, 필터와 유사하게 리턴문을 통해서 조건에 맞는 것만 반환 (단, 조건에 맞는 요소 중 첫번째 요소만 반환)
-
let numbers5 = [1, 2, 3, 4, 5]; let foundNumber = numbers5.find(function (number) { return number > 3; }); console.log(foundNumber); // 4 - some()
- every()
- sort()
- reverse()
'💻 JavaScript > 기초 문법' 카테고리의 다른 글
| JS 문법 종합: Map과 Set (0) | 2024.07.26 |
|---|---|
| JS 문법 종합: 일급 객체로서의 함수 (0) | 2024.07.25 |
| Javascript 기초 문법 (1) (0) | 2024.07.17 |
| Firebase 응용 2: 영화 데이터 넣기 / firestore Database에서 데이터 가져오기 (0) | 2024.07.16 |
| Firebase / 데이터베이스 (1) | 2024.07.16 |