HYEWON JUNG의 개발일지
2023102nd WIL 데이터 타입, 연산자, 변수, 배열, 조건문, 반복문, 함수기초 본문
하루종일 적은 걸 날렸다.
1데이터 타입
1-1 숫자
정수형 | 10 | 실수형 | 3.14 | 지수형 | 2.5e5 |
NaN | "hello"/2 | Infinity | 1/0 | -infinity | -1/0 |
(1)숫자 변환
+를 제외한 연산자
Number(); 를 이용한 변환
1-2 String
ex)
let str = "hello";
let str2 ="world";
길이 확인 | length | str.length | 자르기 | substr | str.substr(2,3) //"llo" > (n번째 부터, m개) |
결합 | concat | let result = str.concat(str2); | 자르기 | slice | str.slice(2,3) //"l" > (n번째 부터, m번째까지) |
대체 | replace | let result = str.replace("e","a") //"hallo" |
검색 | search | str.search("e") //2 > e가 시작되는 시점 |
분할 | split | let result = str.split("e") //["h" , "llo"] >기준 삼은 건 사라짐 |
타입 (연산자) | typeof | typeof (값) |
공백제거 | trim() | str.trim(); |
(1)이스케이프 문자
표현 | 결과 | 표현 | 결과 |
"This is \"string\"" | This is "string" | "This\t is\t string" | "This (tab) is (tab) string" |
"This is \n string" | "This is string" |
"This\\ is\\ string" | "This\ is \string" |
(2)문자열의 인덱스
"hello"
h | e | l | l | o |
[0] | [1] | [2] | [3] | [4] |
ex) 'hello'[2] //"l"
(3)문자열 변환
+ 연산자를 이용해 결합 시
String();을 이용한 변환
1-3 Boolean
true와 false를 나타냄
(1)불리언 변환
bollean(); // !!
->false값 0,"",null, undefined,NaN
->true값 나머지
1-4undefined
값이 할당되지 않은 변수 (비의도적)
1-5null
값이 존재하지 않음 (의도적)
1-6객체(obj)
key - value pair
{}를 사용하여 객체 생성
속성과 메소드를 가짐
2 .연산자
- 산술 연산자 = 숫자 계산
- 할당 연산자 = 변수 계산
- 비교 연산자 = 값을 비교
- 논리 연산자 = 주어진 논리식을 판단하여, 참(true)과 거짓(false)을 결정
산술연산자 | 할당연산자 | 비교연산자 | 논리연산자 | ||||
빼기 | - | 등호 | = | 일치 | === | 논리곱 (2true) | && |
더하기 | + | 더하기등호 | += | 불일치 | !== | 논리합(1true) | || |
곱하기 | * | 빼기 등호 | -= | 작다 | < | 논리부정 | ! |
나누기 | / | 곱하기 등호 | *= | 크다 | > | ||
나머지 | % | 나누기 등호 | /= | 작거나 같다 | <= | ||
제곱 | ** | 나머지 등호 | %= | 크거나 같다 | >= |
- 삼한 연산자
let 이름 = 값;
let result = (조건) ? " true일경우":"false일경우";
- 증감 연산자
변수 ++ | 기존 변수의 값에서 1을 더하기 //기존 먼저 불러오고 +1 |
변수 -- | 기존 변수의 값에서 1을 빼기 //기존 먼저 불러오고 -1 |
++변수 | 기존 변수의 값에서 1을 더하기 //바로 +1 값 호출 |
--변수 | 기존 변수의 값에서 1을 빼기 //바로 -1 값 호출 |
헷갈릴만한 것
let number = 10
alert(number++)
alert(++number)
alert(number--)
alert(--number)
호출값
//10
//12
//12
//10
let number = 10
console.log(number)
number++
number++
console.log(number)
console.log(number)
number--
number--
console.log(number)
//10
//12
//12
//10
3. 식별자
구분 | 단독으로 사용 | 다른 식별자와 사용 |
식별자 뒤에 괄호 없음 | 변수 ex) input | 속성 ex)Array.length |
식별자 뒤에 괄호 있음 | 함수 ex) alert() | 메소드 ex)math.abs() |
4. 변수
4-1 변수 선언
var | var myVar = "hello"; var myVar = "world"; //"world" |
같은 이름의 변수 덮어쓰기 가능 |
let | let myLet = "hello"; myLet = "world"; //"world" |
선언되어있는 값에 덮어쓰기 |
const | const myConst = "hello world" | 값 변경 X |
5. 조건문
5-1 if 조건문
let X=10;
if (x>0){ //여기가 if문
console.log('x는 양수입니다.')
} else if (x<0){ //여기가 if-else-if-else문
console.log('x는 음수입니다.')
} else{ //여기가 if-else문
console.log('x는 0입니다')
}
5-2 중첩 조건문
let age = 20;
let gender = "여성";
if (age >= 18) {
if (gender === "남성") {
console.log("성인 남성입니다.");
} else {
console.log("성인 여성입니다.");
}
} else {
console.log("미성년자입니다.");
}
5-3 switch 문
switch(변수 이름){
case 조건1 :
break
case 조건2 :
break
default: ---->생략 가능
break
}
6. 배열 Array
배열은 여러개의 변수를 한번에 선언해 다루는 자료형, []를 사용해 생성, 배열 안에 있는 값은 요소라고 함.
요소의 순서인 인덱스를 가짐 0부터 시작
const str = '안녕하세요'
str[2]
-> 하
str[str.length-1]
->요
6-1 배열 요소 추가하기
//기본형//
배열이름.push(추가 할 요소)
//emtpy요소//
//배열의 요소가 3개인데 추가할 요소를 10번째에 넣고 싶을 때//
배열이름[10] = '추가할 요소'
(11)[요소1, 요소2, 요소3, empty x 7, '추가한 요소']
6-2 배열 메소드
push() | 배열이름. push(요소) | 배열의 맨 뒤에 요소 추가 |
pop() | 배열이름. pop(요소) | 배열의 맨 뒤 요소 삭제 |
shift() | 배열이름. shift(요소) | 배열의 맨 앞 요소 삭제 |
unshift() | 배열이름. unshift(요소) | 배열의 맨 앞에 요소 추가 |
splice() | 배열이름. splice(n ,m, 요소) | n번인덱스부터 m개의 요소 지우고 요소 추가 |
splice()//제거 | 배열이름. splice(n ,m) | n번인덱스부터 m개의 요소 지우기 |
slice() | 배열이름. slice(n ,m) | n번 인덱스부터 m개로 새로운 배열 만들기 |
forEach() | let 배열이름 = [ ] 배열이름.forEach(function(매개변수){ }) |
콘솔 상에 배열의 index가 반복되며 출력 |
map() | let arrayName = [ ]; let newArray = arrayName.map(function(매개변수){ return 새로운 배열을 만들 식 Ex) 매개변수*매개변수 }) |
기존 배열을 가공해 새로운 배열을 생산 // 항상 원본의 길이 만큼 return 된다 |
filter() | let arrayName = [ ]; let newArray = arrayName.filter(function(매개변수){ return 해당해야하는 조건 }) |
해당하는 조건만 호출해 새로운 배열 생성 |
reduce() | let sum= numbers.reduce(function(accumulator,currentValue){ return accumulator + currentValue; },0); |
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce 하나의 결과값을 반환 reduce의 콜백함수는 4개의 인수를 가진다. accumulator, currentValue, currentIndex, array //콜백함수 공부 후 추가 |
find() | let 배열이름 = [ ] 배열이름.find(function(매개변수){ return 찾는 요소 조건 }) |
찾는 요소 조건에 맞는 첫번째 요소를 반환 |
some() | let 배열이름 = [ ] 배열이름.some(function(매개변수){ return 찾는 요소 조건 }) |
찾는 요소 조건에 true인게 하나라도 있는지 확인 |
every() | let 배열이름 = [ ] 배열이름.every(function(매개변수){ return 찾는 요소 조건 }) |
배열의 요소가 모두 찾는 요소 조건에 true인지 |
sort() | 배열이름.sort(); let 배열이름 = [ ] 배열이름.sort(function(a, b){ return b-a; |
배열을 오름차순으로 정렬 ↓ 내림차순으로 정렬 |
reverse() | 배열이름.reverse(); | 배열의 순서를 역순으로 |
indexOf() | 배열이름.indexOf("찾을 요소") | 요소의 인덱스 출력 |
7. 반복문
7-1 for 반복문
for (초기값;조건식;증감식){}
for(let i = 0; i <반복횟수; i++){
문장
}
// with 배열
for(let i = 0; i <배열.length; i++){
*문장* 배열[i]
}
//배열을 반대로 하고 싶을 땐
for(let i = 배열.length -1; i>=0; i--){
*문장* 배열[i]
}
7-2 for in 반복문
for (let 반복 변수 in 배열 또는 객체 ){
문장
}
// 객체의 경우
let person = { name: "John", age: 30, gender: "male" };
for (let key in person) {
console.log(key + ": " + person[key]); <--- 객체 value 접근법
}
// 배열의 경우
let todos = ['우유사기','업무메일확인'. '필라테스수업']
for (let i in todos){
console.log(`${i}번째 할일 : ${todos[i]}`)
}
7-3 while 반복문
//while 의 기본 형식//
while(bool 표현식/조건){
문장
}
// while문은 조건이 변하지 않는다면 무한 반복함.
//고로 문장에 조건을 거짓으로 만드는 내용이 있어야함
7-4 break 키워드
// break는 반복문을 종료합니다.
for (let i = 0; i < 10; i++) {
if (i === 5) {
break;
}
console.log(i);
}
7-5 continue문
// 기준만 제외하고 그대로 출력 지금 예제에선 5만 제외
for (let i = 0; i < 10; i++) {
if (i === 5) {
continue;
}
console.log(i);
}
8.함수
8-1 함수의 장점
1. 반복되는 코드를 한번 정의 해놓고 필요할 때마다 호출해 반복 작업을 피함
2. 가독성이 좋아진다.
3. 기능별로 수정이 가능하므로 유지보수가 쉽다.
8-2 함수 정의 하기
(1) 함수 선언문
function 함수(){}
(2)함수 표현식
let 함수 = function(){};
8-3 함수의 매개변수와 리턴값
함수에 넣는 input = 매개변수
결과로 나오는 output = 리턴값
8-4 기본 매개변수
함수이름 (매개변수, 매개변수 = 기본값, 매개변수 = 기본값)
매개변수의 값이 주어지지 않으면 기본값을 적용
8-5 화살표 함수
강의 듣고 정리한 거 날리고 책이랑 같이 보면서 정리하니가 이해가 더 잘된다. 시간이 좀 걸리긴 하지만.. 근데 이제 1주차 정리 다 한건데.. 나머지 주차도 정리하려면 정말.. 시간이 부족하겠다. 주말이 놀지 말걸~~~ 조금더 할 걸~!~
메소드들은 발견할 때 마다 추가할 예정이다. 사전처럼.. 그리고 예제들은 따로따로 풀이섹션을 만들어서 많이 해야겠다. 알고리즘을 들어도 잘 안떠올라. ㅜ
'개발일지' 카테고리의 다른 글
20231020 TIL 바닐라 자바스크립트 외부api 대입하기 (0) | 2023.10.20 |
---|---|
20231019 TIL 하루종일 뭐 했지. (0) | 2023.10.19 |
20231018 TIL 개인과제 시작! grid, overflow 사용 (1) | 2023.10.19 |
20231005 TIL (id와class차이/ live server활용/ 사진 및 페이지 연결 등) (1) | 2023.10.11 |
20231010 Til /방명록 삭제하기 & input 필수 입력값주기 (0) | 2023.10.11 |