본 캠프/JavaScript 문법 종합반
JavaScript 문법 종합반 1주차. (2)
Iruka913
2024. 10. 8. 20:55
함수
// 함수 == function
// input, output
// 함수를 잘 만들면 효율적인 코드를 짤 수 있다.
// 1. 함수 선언문.
function add(매개변수) {
// 함수 내부에서 실행하는 로직.
}
// ex) 두 개의 숫자를 입력받아 덧셈을 한 후 내보내는 함수.
function add(x, y) {
return x + y;
}
// 2. 함수 표현식
let add2 = function (x, y) {
return x + y;
};
// 함수를 호출한다(=사용한다.)
// 함수명() -> add(입력값)
add(2, 3);
console.log(add(2, 3)); // 5
let functionresult = add(3, 4);
console.log(functionresult); // 7
// 문제! add2를 가지고 10과 20을 더한 값을 출력!
console.log(add(10, 20)); // 30
// 함수의 input -> 매개변수(매개체가 되는 변수!)
// retrun 문 뒤에 오는 값 : 반환값
스코프와 화살표 함수.
스코프, 전역변수, 지역변수
// 스코프, 전역변수, 지역변수.
let x = 10; // 전역 변수
function printX() {
console.log(x);
}
console.log(x); // 10
printX(); // 10 함수 밖에서 선언된 변수이므로, 코드 전체에 영향을 끼친다.
function printX() {
let x = 10; // 함수 안에 변수가..? -> 지역변수
console.log(x);
}
console.log(x);
printX(); // -> 여기서는 x를 참조할 수가 없어... 에러가 뜬다. 스코프란 범위를 뜻한다. 스코프를 잘 참고하면서 코드를 짜자
화살표 함수
// 화살표 함수
//ES6 신문법! 신문물 좋아!
function add(x, y) {
return x + y;
} // 이게 기본 형식인데...
// 1-1, 기본적인 화살표 함수
let arrowFunc1 = (x, y) => {
return x + y;
};
// 1-2 한 줄로 끝나면 이렇게 쓸 수도 있다. 중괄호 없음에 유의하다.
let arrowFunc2 = (x, y) => x + y;
//
function testFunc(x) {
return x;
}
// 화살표 함수로.
let arrowFunc3 = (x) => x;
// 익숙하지 않다면? 그냥 함수 쓰자. 근데 읽을 줄은 알아야겠지???
문
조건문
// 1. if 문
// if (true 아니면 false가 나올 수 있는 조건) {
// }
// 1-1.
let x = 10;
if (x > 0) {
console.log("x는 양수입니다.");
}
// 1-2 y의 길이가 5보다 크거나 같으면 길이를 console.log로 표시.
let y = "hello world";
if (y.length >= 5) {
console.log(y.length);
}
// 2. if - else 문
if (x > 0) {
console.log("x는 양수입니다.");
} else {
console.log("x는 음수입니다. ");
}
// if - else if - else 문
if (x<0) {
// 메인 로직 1번
console.log(1)
} else if (x>=0 && x<10) {
//메인 로직 2
console.log(2)
} else {
// 메인 로직 3
console.log(3)
}
// 3. switch문 변수의 값에 따라 여러 개의 경우 중 하나를 선택.
// default
let fruit = "사과";
switch (fruit) {
case "사과":
console.log("사과다.");
break; // 매우 중요. 꼭 넣어야함.
case "바나나":
console.log("바나나다");
break;
default:
console.log("아무것도 아니다.");
break;
}
조건문의 중첩과 실행.
// 조건문 중첩
let age = 20;
let gender = "여성";
// 미성년자의 구분
if (age > 18) {
// console.log("성인입니다.");
if (gender === "여성") {
console.log("성인 여성입니다.");
} else {
console.log("성인 남성입니다.");
}
} else {
// console.log("성인이 아닙니다.");
if (gender === "여성") {
console.log("미자 여성입니다.")
} else {
console.log("미자 남성입니다.")
}
}
// 조건문을 많~이 쓰는 건 코드 가독성이 떨어져서 그닥이다.
// 조건부 실행
let x = 10;
x > 0 && console.log("양수!");
// x가 0보다 크다면, 양수를 출력하라는 if문. 매우 중요!!!!!
//삼항 연산자와 단축평가.
let y; // y에는 undefined란 값이 들어가 있다.
let z = y || 20; // y가 존재하지 않는 경우, 기본값으로 20을 집어넣어줘.
console.log(z);
&&랑 ||은 논리 연산자를 할 때도 배웠었어. 논리 연산자를 다시 한 번 찾아봐야할 지도.
-> GPT에 물어본 결과, &&랑 ||은 단락 평가 (short-circuit evaluation)**라는 특성을 활용한 조건부 실행에도 사용된다고 한다. 조건이 맞다면 뒤에 걸 실행한다! 라는 조건부 실행! 이 얼마나 편리한가! 그저 감사할 뿐
오늘까지 배운 문법을 토대로, 예제를 풀어보자.
예제 1) 문자열 길이
// 입력받은 문자열의 길이를 구해서 result 값이 아래와 같이 출력되도록 함수를 완성해 보세요.
function getLengthOfString(str) {
// 이 부분에 코드를 작성하세요.
}
const result = getLengthOfString("abcde");
console.log(result); // 출력 결과: 5
이 문제를 풀어보자.
함수의 필수 요소 중 하나는 input과 output이라고 배웠었지.
return을 통해서 반환할 필요가 있겠어.
길이를 구하기 위해선 .length를 썼으면 됐나.
function getLengthOfString(str) {
let length = str.length;
return length;
}
const result = getLengthOfString("abcde");
console.log(result); // 출력 결과: 5
제대로 5가 출력된다!
예제 2) 문자열 자르기
// 입력받은 문자열을 잘라서 result 값이 아래와 같이 출력되도록 함수를 완성해 보세요.
// 메소드는 slice 를 이용해 보세요.
function getToken(str) {
// 이 부분에 코드를 작성하세요.
}
const result = getToken("Bearer a012345");
console.log(result); // 출력 결과: 'a012345'
슬라이스로 무언가를 자르기 위해서는 숫자 두 개가 필요했었지.
처음 부분에서 어떤 지점까지 자를 것인지.
그리고 해당 지점에서 다시 한 번 어디까지 자를 것인지.
당장 해볼까?
// 입력받은 문자열을 잘라서 result 값이 아래와 같이 출력되도록 함수를 완성해 보세요.
// 메소드는 slice 를 이용해 보세요.
function getToken(str) {
let sliced = str.slice(6, 14)
return sliced
}
const result = getToken("Bearer a012345");
console.log(result); // 출력 결과: 'a012345'
※주의 컴퓨터는 숫자를 0부터 센다. 이 바보 같은 놈. 그래서 0부터 세서 6에서 끊어줘야만 한다.
length로 견적 딱 재보니까 14의 인덱스까지 있었다. 그래서 띄어쓰기까지 포함해서 6에서 끊고, 14에서 한 번 끊었다.
예제 3) 문자열 대체
// 아래 결과와 같이 출력되도록 newStr에 들어갈 코드를 작성해 보세요.
const str = "I like coffee but I don't like coffee shop.";
const newStr = // replace 메소드를 이용하여 이 부분을 완성해 보세요.
console.log(newStr);
// 출력 결과: "I like tea but I don't like coffee shop."
.replace를 이용하면 내용을 고칠 수 있겠어.
당장 해보자고
// 아래 결과와 같이 출력되도록 newStr에 들어갈 코드를 작성해 보세요.
const str = "I like coffee but I don't like coffee shop.";
const newStr = str.replace("coffee" , "tea") // replace 메소드를 이용하여 이 부분을 완성해 보세요.
console.log(newStr);
// 출력 결과: "I like tea but I don't like coffee shop."
簡単！쉽다 쉬워.
만약에 뒤에 있는 커피까지 바꾸고 싶다면 replaceall을 쓰면 되는 듯 하다. replace는 가장 처음에 걸 바꾸는 용도로 쓰는 모양이다.
예제 4) 문자열 분할
// 아래 결과와 같이 출력되도록 newStr에 들어갈 코드를 작성해 보세요.
const str = "green/red/yellow/blue/white";
const splittedArr = // split 메소드를 이용하여 이 부분을 작성해 보세요.
console.log(splittedArr);
// 출력 결과: ["green", "red", "yellow", "blue", "white"]
/을 기준으로 스플릿할 필요가 있겠어.
// 아래 결과와 같이 출력되도록 newStr에 들어갈 코드를 작성해 보세요.
const str = "green/red/yellow/blue/white";
const splittedArr = str.split("/")
console.log(splittedArr);
// 출력 결과: ["green", "red", "yellow", "blue", "white"]
문법이 좀 기억이 안 나긴 했는데, 대충 때려박으니까 맞았다.
예제 5) 명시적 형변환 - 숫자 형변환
// 문자열을 입력받아도 result 값이 아래와 같이 출력되도록 함수를 완성해 보세요.
// if문과 typeof 키워드를 이용해야 합니다.
function add(a, b) {
// 이 부분을 완성해 보세요.
}
const result1 = add(5, "5");
const result2 = add("5", 5);
console.log(result1); // 출력 결과: 10
console.log(result2); // 출력 결과: 10
오 간단한데?
// 문자열을 입력받아도 result 값이 아래와 같이 출력되도록 함수를 완성해 보세요.
// if문과 typeof 키워드를 이용해야 합니다.
function add(a, b) {
let newa = Number(a);
let newb = Number(b);
return newa + newb;
}
const result1 = add(5, "5");
const result2 = add("5", 5);
console.log(result1); // 출력 결과: 10
console.log(result2); // 출력 결과: 10
if문과 typeof 키워드를 이용해야합니다.
if문과 typeof 키워드를 이용해야합니다.
if문과 typeof 키워드를 이용해야합니다.
...
다시 해야지 뭐.
// 문자열을 입력받아도 result 값이 아래와 같이 출력되도록 함수를 완성해 보세요.
// if문과 typeof 키워드를 이용해야 합니다.
function add(a, b) {
let newa;
let newb;
if (typeof a === String) {
newa = Number(a);
} else {
newa = a;
}
if (typeof b === String) {
newb = Number(b);
} else {
newb = b;
}
return newa + newb;
}
const result1 = add(5, "5");
const result2 = add("5", 5);
console.log(result1); // 출력 결과: 10
console.log(result2); // 출력 결과: 10
그렇게 해서 출력된 값.
55
55
... 왜?
찾아보니까 typeof a = string이 잘못 되었다고 한다.
typeof a = "string"이라고 적어한댄다...
// 문자열을 입력받아도 result 값이 아래와 같이 출력되도록 함수를 완성해 보세요.
// if문과 typeof 키워드를 이용해야 합니다.
function add(a, b) {
let newa;
let newb;
if (typeof a === "string") {
newa = Number(a);
} else {
newa = a;
}
if (typeof b === "string") {
newb = Number(b);
} else {
newb = b;
}
return newa + newb;
}
const result1 = add(5, "5");
const result2 = add("5", 5);
console.log(result1); // 출력 결과: 10
console.log(result2); // 출력 결과: 10
같은 원리로 type of 어쩌구 조건문을 쓸 때는 number라든가 null이라든가 NaN 같은 것도 전부 큰 따옴표가 필요할 듯 하다.
예제 5) Truthy / Falsy
// 아래 함수는 배열을 입력받아서 배열 요소들 중 truthy한 요소들만 필터링하여 반환합니다.
// Truthy 란 boolean type을 기대하는 문맥에서 true 로 평가되는 값을 의미합니다.
// for문과 if문을 이용하여 작성해 보세요.
function getTruthyArray(arr) {
const truthyArr = [];
// 이 부분을 완성해 보세요.
return truthyArr;
}
const result = getTruthyArray( [ -1, 0, "", {}, [], null, undefined, NaN ] );
console.log(result); // 출력 결과: [-1, {}, []]
오 갑자기 확 어려워졌는데?
어레이를 사용하니까 음. foreach를 이용해서 하나하나 순회할 필요가 있을 거 같다.
불리안타입을 각 element 마다 적용시킨 다음, false로 나오면 배열에서 빼면 될 듯 하다.
배열에서 빼는 건 unshift면 되겠지.
// 아래 함수는 배열을 입력받아서 배열 요소들 중 truthy한 요소들만 필터링하여 반환합니다.
// Truthy 란 boolean type을 기대하는 문맥에서 true 로 평가되는 값을 의미합니다.
// for문과 if문을 이용하여 작성해 보세요.
function getTruthyArray(arr) {
const truthyArr = [];
truthyArr.forEach(element => {
if (!Boolean(element)) {
truthyArr.unshift(element)
}
});
return truthyArr;
}
const result = getTruthyArray( [ -1, 0, "", {}, [], null, undefined, NaN ] );
console.log(result); // 출력 결과: [-1, {}, []]
1단계 방출기 작동 시작.
C:\Users\박민준\Desktop\WEEK_1>node ass01.js
[]
오 다 없어졌는데?
element를 다 없애버린 게 문제인 듯 하다.
그느느... 모... 모르겠어.
1-10까지 들었는데, 아직 for문이랑 배열에 대해서 제대로 배운 게 없어서 그런 듯 하다.
다음에 더 강의를 듣고 다시 한 번 도전해보도록 해야겠다.
두. 두고보자...