반응형
<JavaScript>
1. Function ( 함수 )
- 함수란? 특정 동작(기능)을 수행하는 일부 코드의 집합(부분)
// 함수 선언문 : 어디서든 호출 가능
function sayHello(name){
console.log(`Hello, ${name}`);
}
// 함수 표현식 : 코드에 도달하면 생성
let sayHello = function(name){
console.log(`Hello, ${name}`);
}
// 화살표 함수
let sayHello = (name) => {
console.log(`Hello,${name}`)
}
호이스팅 (Hoisting) 이란? - 함수 안에 존재하는 모든 선언들을 해당 함수 최상단으로 끌어올리는 것 - 호이스팅은 선언에서만 발생함 |
2. Onclick
- 각각의 html 요소에 속성 값으로 JS 함수를 연결함
<!--html 코드-->
<body>
<div class="box" onclick="testClick()"> click </div>
</body>
// JavaScript 코드
function testClick() {
alert("TEST");
}
3. 조건문
- 특정 조건 만족 시 실행하는 명령의 집합
- 특정한 조건 속에서 작업을 수행하고 싶을 때 사용
If문
// 1. if , else 문
if (조건1) {
// 조건1이 참이라면 실행
}else{
// 조건1이 거짓이라면 실행
}
// 2. if , else if , else 문
if(조건1) {
// 조건1이 참이라면 실행
} else if(조건2){
// 조건2가 참이라면 실행
}else{
// 조건1과 조건2가 모두 거짓이라면 실행
}
// 3. if 중첩문
if(조건1){
if(조건2){
// 실행1
}else{
// 실행2
}
}
switch문
switch(변수){
case 값1:
// 변수와 값1이 일치하면 실행
break;
case 값2:
// 변수와 값2이 일치하면 실행
break;
case 값3:
// 일치하는 값이 없을 때 실행
break;
}
3항 연산자
- if문을 3항 연산자를 이용해 한줄로 간단히 표현 가능함
let name = '길동';
// 기존의 if문 방식
if(name==='길동'){
console.log('맞았어요');
}else{
console.log('틀렸어요');
}
// 3항 연산자 방식
// 조건식 ? 조건이 참인 경우 : 조건이 거짓인 경우;
name != '진형' ? console.log('맞았어요') : console.log('틀렸어요');
4. 반복문
- 똑같은 명령을 일정 횟수만큼 반복해 수행하도록 하는 실행문
for 문
for(let index=0; index < 10; index++){
console.log('인사를', i+1, '번째 드립니다');
}
while 문
- for문과 달리 조건을 변경하는 구문이 기본적으로 포함되어있지 않기 때문에 무한 루프가 가능함
➡️ 무한루프가 가능하기 때문에 주의하여 사용이 필요함!
// 1. 조건문을 사용하기
let index1 = 0;
while(index1 < 10){
console.log("인사를", index1 + 1, "번 째 드립니다!");
index1++;
}
// 2. 조건문을 사용하지 않고 if문 + break문 사용하기
let index2 = 0;
while (true) {
console.log("인사를", index2 + 1, "번째 드립니다!");
index2++;
if ( index2 == 10 ){
break;
}
}반복문 제어 : break 와 continue break : 반복문을 멈추고, 밖으로 빠져나옴 continue : 반복문을 한번만 멈추고, 다음 반복으로 진행 |
5. 메소드
문자열 관련 메소드
length |
문자열의 길이를 반환 ( 공백 포함 ) |
toUpperCase() & toLowerCase() |
문자열 전체를 대문자 혹은 소문자로 변경 |
indexOf('') |
매개변수로 문자열을 받아서 몇번째 인덱스인지 숫자 반환 |
slice(startIndex,endIndex) |
start 부터 end-1까지 슬라이싱, 매개변수로 음수값도 가능 |
replace(문자열1,문자열2) |
문자열1을 문자열2로 변경 |
replaceAll(문자열1,문자열2) |
문자열1을 전부 찾아서 문자열2로 바꿔줌 |
repeat(n) |
문자열에 대해 n번 반복 |
trim() |
문자열의 양끝 공백 없애기 |
split() |
매개변수로 들어온 문자열을 기준으로 str을 쪼개서 배열로 저장 |
- 코드 예시
let str = "Happy Day~!";
// 1. 문자열 길이 확인
console.log("length : ", str.length);
// 2. 영어 문자열을 모두 대문자로 바꾸기
console.log("toUpperCase : ", str.toUpperCase());
// + 소문자
console.log("toLowerCase : ", str.toLowerCase());
// 3. index 가져오기 ( 같은 글자 있으면 첫번째 인덱스를 받아옴 , 마지막 가져오고 싶으면 lastindexOf)
console.log("index : ", str.indexOf("y"));
console.log("index : ", str.lastIndexOf("y"));
// 4. 문자열 자르기 ( 4라고 적으면 3까지 나오고 잘림. 바로 앞 까지 하나 작게 나온다!! , 뒤에 어디까지 자를지는 선택사항임 )
// 첫번째 파라미터는 필수 , 두번째는 선택
console.log("slice : ", str.slice(0, 6));
// 5. 바꾸기
//replace 는 제일 먼저 찾아지는 한 가지 요소만 바꾼다.
console.log("replace p -> a : ", str.replace("p", "a"));
//replaceAll 은 찾아지는 모든 요소를 변경한다.
console.log("replaceAll a -> k : ", str.replaceAll("a", "k"));
// 6.반복 (repeat)
console.log("repeat : ", str.repeat(10));
// 7. split : 문자열을 내가 원하는 부분에서 자르고, 그걸 리스트로 만들어주는 친구
// 기준이 되는 값은 사라짐. a가 기준이 되면 사라지고 콤마만..
console.log("split : ", str.split(" "));
console.log("split : ", str.split("a"));
// 사라지지 않게 전부 리스트로 만들고 싶으면 띄어쓰기도 뭣도 없이
console.log("split : ", str.split(""));
// 8.trim() : 좌우 공백 제거
console.log("trim 전 : ", str);
console.log("trim : ", str.trim());
- 코드 실행 결과
배열 관련 메소드
length |
배열의 길이 반환 |
push() |
배열 끝에 추가 |
pop() |
배열 끝 요소 제거 |
shift() |
배열 앞에 제거 |
unshift() |
배열 앞에 추가 |
indexOf() |
문자열에서 indexOf와 마찬가지로 매개변에 해당하는 배열의 인덱스를 받아옴. 단, 매개변수로 문자열만 넣을 수 있는 것은 아님. |
includes() |
해당 배열에 지정한 요소가 있는지 확인하는 메소드 |
reverse() |
배열의 순서를 뒤집어서 반환 |
join() |
join 안의 문자열 기준으로 문자열로 병합 |
- 코드 예시
// < 배열 관련 메소드 >
let days = ["M", "T", "W", "T", "F", "S", "S"];
console.log("days : ", days);
// 0. 길이
console.log("length : ", days.length);
// 1. 마지막 요소 추가&삭제
// push(): 마지막 요소 추가 -> 마지막 위치에 원하는 만큼 요소를 추가하고 추가된 이후의 리스트 길이를 반환해주는 함수
// ... = 전개해도 된다. 전개하겠다.
//
let pushResult = days.push("z", "a");
console.log("push : ", days);
console.log("pushResult : ", pushResult);
// pop() : 마지막 요소 삭제 -> 마지막 위치의 요소를 추출해 반환해준다. ( 추출하기 때문에 리스트에서는 삭제 )
let popResult = days.pop(); // : string | undefined -> 문자열 혹은 undefined 를 반환하겠다.
console.log("pop : ", days);
console.log("popResult : ", popResult);
// 2. 맨 앞 요소 추가&삭제
// unshift() : 첫번째 요소 추가 -> 첫번째 위치에 원하는 만큼 요소를 추가하고 추가된 이후의 리스트 길이를 반환해주는 함수
let unshiftResult = days.unshift("r", "e");
console.log("unshift : ", days);
console.log("unshiftResult : ", unshiftResult);
//shift() : 첫번째 요소 삭제 -> 첫번째 위치의 요소를 추출해 반환해준다 ( 추출하기 대문에 리스트에서는 삭제 )
let shiftResult = days.shift();
console.log("shift : ", days);
console.log("shiftResult : ", shiftResult);
// 3. 인덱스 가져오기
// indexOf (찾을요소,[검색을 시작할 인덱스 넘버])
let indexResult = days.indexOf("T");
console.log("indexOf T : ", days.indexOf("T"));
console.log("indexOf T : ", indexResult); // 윗줄과 같은 코드
//indexOf(A,?B) : 설명 중 파라미터에 ? 가 붙어있으면 선택 사항. 없으면 필수 파라미터
//(T,3) 이면 3번째 인덱스 부터 찾기 시작함. 시작지점 지정됨
console.log("indexOf T2 : ", days.indexOf("T", 3));
console.log("lastIndexOf : ", days.lastIndexOf("T"));
// 4. includes() 포함유무
// includes(찾을 요소, [검색을 시작할 인덱스])
// includes(): 요소를 찾고, 그에 대한 결과를 boolean 타입으로 반환해준다. -> 있으면 true / 없으면 false로 반환해줌
console.log("includes S", days.includes("S"));
console.log("includes B", days.includes("B"));
// 5. reverse() : 반전시키는 함수
console.log("reverse : ", days.reverse());
// 6. join() : 배열을 연결해서 문자열로 가져온다.
// join([연결고리])
console.log("join : ", days.join());
console.log("join : ", days.join("&"));
console.log("join : ", days.join(" "));
- 실행 결과
메소드 체이닝
- 각각의 메소드를 연결해서 사용하는 개념
➡️ 단, 사용한 메소드가 반환(return) 값을 가지고 있는 경우에만 사용 가능
- 코드 예시
//메소드 체이닝 전 따로 써보기
let str2 = "Holiday";
let splitResult = str2.split("");
console.log("splitResult : ", splitResult);
let reverseResult = splitResult.reverse();
console.log("reverseResult : ", reverseResult);
let joinResult = reverseResult.join("");
console.log("joinResult : ", joinResult);
// 메소드 체이닝으로 연결해서 한번에 쓰기 -> 결과는 결국 같음
console.log("total : ", str2.split("").reverse().join(""));
- 실행 결과
6. 배열에서의 for
let numbers = [1,2,3,4,5,6];
let fruits = ["사과","바나나","수박","포도","파인애플"];해당 코드를 배열에서의 기본 for문과 forEach문 방식으로 써보겠다.
1) 기본 for문으로 사용 할 때
// numbers
for(let i = 0; i < numbers.length; i++){
console.log(numbers[i]);
}
// fruits
for(let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
2) [ ].forEach 문으로 사용 할 때
// numbers
numbers.forEach(function (number,index,array) {
console.log(number,index,array);
});
numbers.forEach((number,index,array) => {
console.log(number,index,array);
});
// fruits
fruits.forEach(function (fruit, i ,arr){
console.log(fruit,i,arr);
});
fruits.forEach((fruit,i,arr) => {
console.log(fruit, i , arr);
});
7. 배열의 합
let numbers = [ 1,2,3,4,5,6 ];
var sum1 = 0;
var sum2 = 0;
var sum3 = 0;
// 기본 for문 이용
for (let i = 0; i <numbers.length; i++){
console.log(numbers[i]);
sum1 = sum1 + numbers[i];
}
// for of 반복문 이용
for (let num of numbers){
sum2 = sum2 + num;
}
// 화살표 함수 이용
numbers.forEach((num) => {
sum3 = sum3 + num;
});
console.log(sum1,sum2,sum3);
- 코드 예시
// array 를 반복문 돌릴 것임
// for ( 초기식;조건식;증감식) {명령}
// 초기식 -> 조건식 확인 -> 명령 -> 증감 -> 조건 확인 -> 명령 -> 증감 ......
// 0:apple , 1:banana , 2:melon, 3:cherry, 4:grape
let fruits = ["apple", "banana", "melon", "cherry", "grape"];
console.log("fruits : ", fruits);
console.log("apple : ", fruits[0]); // 특정값을 가져올때는 배열[인덱스]
// 기본 for문
for (let i = 0; i < fruits.length; i++) {
console.log(" i : ", i);
console.log("fruits[i] : ", fruits[i]);
}
// for of 문
//for(변수 of 배열) : 배열에 있는 요소를 하나씩 변수로 가져온다.
for (let f of fruits) {
console.log("for-of : ", f);
}
// forEach (함수)
// 배열.forEach((변수,인덱스,배열)=>{})
// 변수 > 배열에 들어있는 요소가 하나씩 들어온다.
// 인덱스 > 변수가 하나씩 들어올 때 그 변수의 인덱스
// 배열 > 현재 내가 돌고 있는 배열
let result = fruits.forEach((f, index, arr) => {
console.log("f : ", f);
console.log("index : ", index);
console.log("arr : ", arr);
console.log("-----------");
console.log(f);
});
console.log(result);
// 중괄호가 없으면 바로 리턴하겠다는 뜻
// () => { let a ='1'}
// () => 'a'
// 콜백 함수 : 다른 함수에 parameter 로 보내지는 함수
// 그 함수한테 '네가 원하는 작업하고 콜백함수를 실행시켜줘' 라고 요청하는 의미
console.log("-----------------------------------");
// callBackFn : (value : string, index:number , array:string[])
// forEach 에서 callBack 함수를 받는데, 그때 받는 함수는 3개의 parameter를 가질 수 있다.
// 3개의 parameter 는 각각 value , index, array
// value : 반복을 돌 때 그 값
// index : 배열에서 value 의 index
// array : 현재 돌고 있는 그 배열의 원본
let function2 = (a, b, c) => {
console.log();
console.log("function2 가 실행되었다.");
};
fruits.forEach();
fruits.forEach(function2);
// function1이 함수라고 할 때, 콜백 함수를 보냈다.
// for Each 함수가 반복을 돌고, function1을 실행시켜라.
8. 배열함수 filter
- 조건에 부합하는 배열 요소만을 반환
- [ ].filter((매개변수)=> 조건);
let numbers = [ 1,2,3,4,5,6 ];
let arr;
arr = numbers.filter(function(num){
return num >3 ;
});
console.log(arr);
const words = ['spray', 'limit', 'elite', 'exuberant' , 'destruction' , 'present'];
// 중괄호가 없으면 바로 리턴하겠다!
const result = words.filter(word => word.length > 6);
console.log(result);
반응형
'개발 > HTML,CSS,JS' 카테고리의 다른 글
| [JS] JQuery (0) | 2023.08.09 |
|---|---|
| [JS] JavaScript(3) - 객체 / DOM (0) | 2023.08.04 |
| [JS] JavaScript(1) - 개념 / 변수 /자료형 / 형변환 / 연산자 (0) | 2023.07.16 |
| [CSS] CSS(4) - transform / transition / animation (0) | 2023.07.16 |
| [CSS] CSS(3) - position / background / display (0) | 2023.07.16 |
