객체
// 객체
// 키와 밸류의 조합.
// 하나의 변수에 여러 개의 값을 넣을 수 있다.
// 함수도 넣을 수 있고, 객체도 넣을 수 있고, 불리안값도 넣을 수 있고... 밸류에 넣을 수 있는 데이터타입에는 제한이 없다.
let person = {
name: "민준이",
age: 14,
gender: "남자",
};
// 1-2 생성자 함수를 이용한 객체의 생성 방법
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
let person1 = new Person("홍길동", 30, "남자");
// 2. 객체에 접근하는 방법.
// 접근하고 싶은 객체의 키를 . 뒤에 입력.
console.log("1", person.name)
console.log("2", person.age)
console.log("3", person.gender)
// 3. 객체 메소드(객체가 가진 여러가지 기능. : Object.~~~)
let person = {
name: "민준이",
age: 14,
gender: "남자",
};
// 3-1. Object.key() : key를 가져오는 메소드.
let keys = Object.keys(person);
console.log("keys =>", keys); // 키(앞에 있는 거)
// 3-2. Object.value() : value를 가져오는 메소드.
let values = Object.values(person);
console.log("values =>", values); // 밸류(뒤에 있는 거)
// 3-3. entries
// key와 value를 묶어서 배열로 만든 배열. (2차원 배열)
let entries = Object.entries(person);
console.log(entries); // [ [ 'name', '민준이' ], [ 'age', 14 ], [ 'gender', '남자' ] ]
// 3-4 assign
// 복사가 주기능. 객체를 복사한다.
let newPerson = {};
Object.assign(newPerson, person);
console.log(newPerson);
// 만약 복사를 하되, 밸류값을 바꾸고 싶다면?
let newPerson = {};
Object.assign(newPerson, person, {age : 31}); // 이렇게 하면 나이만 바뀐다. 마찬가지로 다른 값도 바꿀 수 있다.
console.log(newPerson);
// 3-5. 객체의 비교.
// 크기가 상당히 크다. -> 메모리에 저장할 때 별도의 공간에 저장.
// persona1 별도 공간에 대한 주소.
let person1 = {
name: "민준이",
age: 14,
gender: "남자",
};
// person2 별도 공간에 대한 주소.
let person2 = {
name: "민준이",
age: 14,
gender: "남자",
};
let str1 = "aaa";
console.log("answer =>", person1 === person2); // false!?! -> 값은 같지만, 주소가 달라서 같지가 않아.
// 그럼 어떻게 비교할 수 있어???
console.log(JSON.stringify(person1) === JSON.stringify(person2));
//객체를 '문자열화'하는 메소드. 이렇게 하면 주소가 달라도 내용물만 문자열로 끄집어내서 비교가 가능하다.
// 3-6. 객체 병합.
let person1 = {
name: "민준이",
age: 14,
};
let person2 = {
gender: "남자",
};
// ... : spread operator
// ...을 쓰면 객체를 해부해서 풀어놓을 수가 있다.
let perfectman = { ...person1, ...person2 };
console.log(perfectman); // { name: '민준이', age: 14, gender: '남자' }
배열 1. 다양한 메소드들.
// 배열
// 1. 생성
// 1-1. 기본 생성
let fruits = ["사과", "바나나", "오렌지"];
// 1-2. 크기의 지정.
let number = new Array(5); // 5개의 빈칸이 있는 배열 생성.
console.log(fruits.length); // 3
console.log(number.length); // 5
// 2. 배열에서의 요소 접근.
console.log(fruits.[0]); // 사과
console.log(fruits.[1]); // 바나나
console.log(fruits.[2]); // 오렌지
// index 안에 변수를 투입하는 것도 가능.
// 3. 배열의 메소드.
// 3-1. push. 요소를 추가할 수 있다. 그것도 맨 끝에.
let fruits = ["사과", "바나나"];
fruits.push("오렌지");
console.log(fruits); // [ '사과', '바나나', '오렌지' ]
// 3-2. pop 마지막 요소를 삭제한다.
fruits.pop();
console.log(fruits); // [ '사과', '바나나' ]
// 3-3. shift 첫 번째 요소를 삭제한다.
fruits.shift();
console.log(fruits); // [ '바나나' ]
// 3-4. unshift 무언가를 첫 번째 순서에 추가한다.
fruits.unshift("포도");
console.log(fruits); // [ '포도', '바나나' ]
// 3-5. splice. 위치를 지정.
let fruits = ["사과", "바나나", "오렌지"];
fruits.splice(1, 1, "포도"); // 첫 번째에서 첫 번째 요소까지를 삭제하고, 포도로 갈아끼워주시죠.
console.log(fruits);
// 3-6 slice.
let fruits = ["사과", "바나나", "오렌지"];
let slicedFruits = fruits.slice(1, 2); // 바나나부터 시작해서 오렌지 전까지 분리해서 새로운 배열을 만들어줘.
console.log(slicedFruits); // [ '바나나' ]
배열 2. forEach, map, filter, find
// (1) forEach
let numbers = [1, 2, 3, 4, 5];
// 매개 변수 자리에 함수를 넣는 것 : 콜백 함수.
numbers.forEach(function (item) {
console.log("item => " + item);
});
// (2) map
// 기존에 있던 배열을 가공해서 새로운 배열을 생성하는 역할을 한다. 반드시 새로운 배열이 튀어나옴
// 항상 원본 배열의 길이만큼이 return 된다. ※중요.
let newnNumbers = numbers.map(function (item) {
return item * 2;
});
console.log(newnNumbers); // [ 2, 4, 6, 8, 10 ]
// (3) filter
// map이랑 비슷하게 새로운 배열을 만들어낸다.
// 단, 조건에 맞는 요소만 뽑아낸 걸로 배열을 만든다. map과 다르게 원본 배열의 길이만큼 return되지 않는다.
let filterednumbers = numbers.filter(function (i) {
return i === 5;
});
console.log(filterednumbers); // [ 5 ]
// (4) find
// 거장 첫 번째로 찾은 것만! 반환.
let result = numbers.find(function (i) {
return i > 3;
});
console.log(result); // 4
return 문이 필요한 건 새로운 값을 배출한다. map, filter, find 너네들 말하는 거다.
for문.
// for, while =. ~동안, 반복문.
// for (초기값; 조건식; 증감식) {
// }
// i란 변수가 있는데, 얘는 0부터 시작할 거임.
// 걔는 10에 도달하기 전까지 계속 할 거임.
// 걔는 한 사이클이 돌고 나면 1을 더할 거야.
for (let i = 0; i < 10; i++) {
console.log("for문 이상 무 ", i);
}
// 배열과 for문은 짝꿍이다.
const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
console.log(i);
console.log(arr[i]);
}
// ex : 0부터 10까지의 수 중에서 2의 배수만 console.log로 출력하는 예시
for (let i = 0; i < 11; i++) {
if (i >= 2) {
if (i % 2 === 0) {
console.log(i, "는 2의 배수입니다.");
}
}
}
// for ~ in문
// 객체의 속성을 출력하는 문법.
let person = {
name: "존",
age: 30,
gender: "남자",
};
// person[key]
for (let key in person) {
console.log(key + ": " + person[key]);
}
break, continue
// while ~~ 하는 동안.
let i = 0;
while(조건) {
// 메인 로직
// 증감
}
// while문을 활용해서 3초과 100 미만의 숫자 중 5의 배수인 것만 출력하는 예.
let i = 4;
while (i < 100) {
if (i % 5 === 0) {
console.log(i);
}
i++;
}
이건 내가 한 예시.
// while문을 활용해서 3초과 100 미만의 숫자 중 5의 배수인 것만 출력하는 예.
// 튜터님꺼
let i = 3;
while (i < 100) {
if (i % 5 === 0 && i >= 5) {
console.log(i);
}
i++;
}
이건 튜터님 꺼. 조건을 추가하려면 &&를 넣으면 된다.
// do ~ while
let i = 0;
do {
console.log(i);
i++
} while (i < 10);
해석하자면 10 미만일 때까지 do 중괄호 안에 있는 걸 하라는 뜻. 좀 편리할 지도?
// break와 continue
for (i = 0; i < 10; i++) {
if (i === 5) {
break; // for문 블록을 깨뜨리고 밖으로 나가버린다. for문을 스탑한다.
}
console.log(i);
}
for (i = 0; i < 10; i++) {
if (i === 5) {
continue; // continue를 만나면? 그 다음 순서로 넘어간다. 조건에 맞으면 무시한다.
}
console.log(i);
}
코테 넘버 1.
대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다.
예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다.
function solution(s) {
var answer = true;
var nonanswer = false;
let sarray = [...s];
let Pnumbers = sarray.filter(function (a) {
if (a === "p" || a === "P") {
return a;
}
});
let Ynumbers = sarray.filter(function (b) {
if (b === "y" || b === "Y") {
return b;
}
});
if (Pnumbers.length === Ynumbers.length) {
console.log(answer);
return answer;
} else {
console.log(nonanswer);
return nonanswer;
}
}
solution("pPoooYy");
나는 s라는 문자열을 배열로 바꿔준 다음, 여기서 filter을 이용.
s라는 배열을 토대로 각각 p와 P만 존재하는 배열 하나. 그리고 y와 Y만 존재하는 배열 하나를 만든 다음, 두 개의 length를 비교해 같은 경우에는 true, 다를 경우에는 false를 반환하는 식을 만들었다.
function solution(s){
var result = true;
s = s.toUpperCase();
var num = 0;
for(var i = 0; i < s.length; i++){
if(s[i] === 'P') num++; // p이면 갯수 더하기
if(s[i] === 'Y') num--; // y이면 갯수 빼기
}
result = (num === 0); // p, y 갯수가 같으면 0 (p가 많으면 양수, 반대 음수)
return result;
}
튜터님의 정답은 이렇다.
튜터님은 먼저 toUpperCase(); 를 사용해 모든 문자를 대문자로 바꿔준 다음, for문을 사용해서 s의 length만큼 반복시킨 다음, num이란 변수를 만들고, p와 y의 갯수에 따라 값이 변동되게끔 만들어준 뒤, p,y 개수가 같아 둘이 상쇄되면 true를 반환하는 코드를 짜셨어.
for문을 사용해서 그런지, 코드가 간결하네.
코테 넘버 2
어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요.
var answer = 0; // 답 넣을 구멍
let x; // 음양 바꾼 뒤 걸러질 최종값
function solution(absolutes, signs) {
for (let i = 0; i < absolutes.length; i++) {
x = signs[i] ? absolutes[i] : -absolutes[i]
// 삼항 연산자. signs가 트루면 앞에 거? 펄스면 뒤에 거. 음양 구분을 해줬다.
answer += x
// 다 더해!
}
console.log(answer)
return answer
}
이번 건 좀 빡셌다. 삼항 연산자에 대한 감을 전혀 잡지 못 했더라면 위험했을 지도...
각종 ES6 문법 소개.
// 삼항 연산자.
// condition ? true인 경우 : false인 경우
// 구조 분해 할당 : destructuring
// 배열이나, 객체의 속성.
// (1) 배열의 경우.
let [value1, value2] = [1, "new"]
console.log('1', value1) // 1
console.log('2', value2) // new
let arr = ["value1", "value2" , "value3"]
let [a, b, c] = arr;
console.log(a) // value1
console.log(b) // value2
console.log(c) // value3
// (2) 객체의 경우.
// 구조 분해 할당
let { name, age } = {
name: "naf",
age: 30,
};
console.log(name)
console.log(age)
name에 취소선이 그어져 있어... 왜지?! 나중에 물어보러 가야할 지도...
// 새로운 이름으로 할당.
let user = {
name: "naf",
age: 30,
};
let { name: newname, age: newage } = user;
// 기존에 있던 객체를 분해하고 name에 있던 걸 newname 변수에, age에 있던 걸 newage 변수에 넣는다.
console.log(newname) // naf
console.log(newage) // 30
배열 객체 양 쪽 모두 초기값을 부여해줄 수 있다.
초기값 부여에는 =을 사용한다.
// 단축 속성명 : property shorthand
const name = "avc";
const age = 30;
const obj = {
name: name,
age: newage,
};
// 이거를
const obj = {
name,
age: newage,
};
// 키 밸류가 똑같으면 이렇게 생략이 가능하다.
// 전개 구문 = spread operator
// 구조 분해 어쩌구랑 가장 함께 많이 사용됨.
// 배열을 해체하고 새로운 배열을 만들 때 사용.
let arr = [1, 2, 3];
console.log(arr) // [ 1, 2, 3 ]
console.log(...arr) // 1 2 3
let newArr = [...arr, 4]
console.log(arr) // [ 1, 2, 3 ]
console.log(newArr) // [ 1, 2, 3, 4 ]
// 객체의 경우.
let user = {
name : 'abd',
age: 30,
}
let user2 = {...user}
console.log(user2) // { name: 'abd', age: 30 }
아무튼 간 풀어 헤칠 수 있단 걸 기억하다.
스뿌레드.
// 나머지 매개변수(rest parameter)
function ef(a, b, c, ...args) {
console.log(a, b, c); // 1 2 3
console.log(...args) // 4 5 6 7
}
ef(1, 2, 3, 4, 5, 6, 7);
...args가 아니라 그냥 args로 써버려서 스뿌레드를 안 하면 args가 배열이 되어버린다. 꼭 스뿌레이드를 해주자.
// 템플릿 리터럴
const testv = "안녕!"
console.log(`hello world ${3+3} ${testv}`); // hello world 6 안녕!
// ''랑 다르게 ``안에는 자바 스크립트 언어가 들어갈 수 있다!
console.log(`
안녕!
나는 짜바 더 헛!
만나서... 빵가워!
`)
// 그리고 무려 줄바꿈까지 지원된다는 사실!
// 안녕!
// 나는 짜바 더 헛!
// 만나서... 빵가워! 이렇게 출력된다!
일급 객체로서의 함수
일급 객체란? 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가능하다.
오오 뭔 소린지 전혀 모르겠는데?
예시를 좀 봐야할 거 같다.
// 일급 객체로서의 합수.
// (1) 변수에 함수를 할당할 수 있음.
// 함수가 마치 값처럼 취급된다.
// 함수가 나중에 사용될 수 있도록 조치되었다.
const sayHello = function () {
console.log("하이?");
};
// (2) 함수를 인자로 다른 함수에 전달할 수가 있다.
// (2) -1. 콜백 함수 : 매개변수로써 쓰이는 함수
// (2) -2. 고차 함수 : 함수를 인자로 받거나 return 하는 함수.
function callfunction(func) {
// 매개 변수로 받은 변수가 사실? 함수다.
func();
}
const sayHello = function () {
console.log("하이?");
};
// (3) 함수를 반환할 수 있다.
function createAdder(num){
return function (x) {
return x + num
}
}
const addFive = createAdder(5)
console.log(addFive(10)) // 15
당황하지 말고 마지막 걸 해석해보자.
먼저 addFive에 createAdder에다가 5를 삽입한 값을 삽입한다.
function createAdder(5){
return function (x) {
return x + 5
}
}
그럼 대충 이런 모습이 되는데, 그 다음에 로그로 addFive에 10 넣은 값을 출력한다.
function createAdder(5){
return function (10) {
return 10 + 5
}
}
그럼 이렇게 되니, 최종 리턴값은 15다.
그래서 로그로 15가 찍힌단 말씀. ;;
// 일급 객체로서의 함수 (2)
const person = {
name: "john",
age: 31,
married: true,
sayHello: () => {
console.log(`안녕! 내 이름은 ${this.name}`);
},
};
person.sayHello(); // 아니 이게 왜 undefined??
// 화살표 함수는 this를 바인딩하지 않는다.
// function을 쓸 때는 잘 나오는데...
// 이럴 때는 화살표 함수 쓰면 안 된다.
// 배열의 요소로 함수를 할당.
const myArr = [
function (a, b) {
return a + b;
},
function (a, b) {
return a - b;
},
];
console.log(myArr[0](1, 3)); // 4
console.log(myArr[1](10, 3)); // 7
function multiplyBy(num) {
return function (x) {
return x * num;
};
}
function add(x, y) {
return x + y;
}
const multiplybyTwo = multiplyBy(2);
const multiplybyThree = multiplyBy(3);
console.log(multiplybyTwo(10)); // 20
console.log(multiplybyThree(10)); // 30
const result = add(multiplybyTwo(5), multiplybyThree(10));
console.log(`final = ${result}`) // final = 40
간단한 곱셈 콤보. 멀티플라이 바이에 2를 넣으면 2 곱해지는 함수가 되고, 3을 넣으면 3곱해지는 함수가 된다.
이런 식으로 함수를 객체 취급해서 여러 가지 것들을 할 수 있다.
Map 소개 및 예시.
// (1) Map
// - Key / Value
// 맵에는 키에 어떤 데이터 타입(유형)도 다 들어갈 수 있다.
// 맵은 키가 정렬된 순서로 저장되기 때문이다.
// - 기능
// 검색, 삭제, 제거, 여부 확인.
const myMap = new Map();
// myMap.set('key', 'value');
// myMap.get('key') 검색할 때.
// 반복을 위한 메서드 : keys, values, entries
const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);
console.log(myMap.keys()); // [Map Iterator] { 'one', 'two', 'three' }
for (const key of myMap.keys()) {
console.log(key);
}
console.log(myMap.values());
for (const value of myMap.values()) { // [Map Iterator] { 1, 2, 3 }
console.log(value);
}
console.log(myMap.entries()); // [Map Entries] { [ 'one', 1 ], [ 'two', 2 ], [ 'three', 3 ] }
for (const entries of myMap.entries()) {
console.log(entries);
}
맵에다가 set으로 키-밸류값을 넣었을 때의 결과.
console.log(myMap.size) // map의 사이즈(길이) // 키-값이 얼마나 저장되어 있지? 3!
console.log(myMap.has("two")) // key 기반 검색 two 있네? 트루!
이런 식으로 검색도 가능!
특강 HTML, CSS 기초.
html 기초.
HTML : 웹사이트의 뼈대를 구성하는 마크업 언어.
HTML의 기본 구조.
● HTML 최상위 root
● head : 화면에 안 보임. 주로 웹사이트의 정보를 넣는다.
● body : 화면에 보이는 부분, 이 안에 주요 코드를 작성한다.
자주 사용하는 태그.
● div. 만능. 애매할 떄는 div. 공간의 좌우 전체를 차지한다. (block)
● h1, h2, h3, h4.. . : 제목
● p : paragraph 문단. 긴 문단을 쓸 때 사용.
● span : 짧은 글을 쓸 때 사용. 글 사이에 뭔가 강조하고 싶을 때 사용한다. (inline 요소)
● img 이미지. src 안에 주소를 넣는다. alt = 어떤 이미지인지 설명
● a : 다른 페이지로 넘어갈 수 있는 링크. href 안에 주소를 넣는다.
● button : 버튼. type="submit"을 사용하면 편리. 주로 form 안에 넣ㄴ는다.
● input 입력창. text, number, email, password, checkbox 등의 다양한 타입이 있다. form 안에 label이나 input를 쌍으로 배치하는 구조를 자주 사용한다. minlength ="" 사용시 최소 입력 자리 설정 가능. label을 활용하면 파일 선택 버튼을 커스텀할 수 있다. label을 활용하면 input을 제어할 수가 있다.
●ul : unorderd list. 여러 항목을 나열할 때 사용한다. ul안에 li를 여러 개 나열하는 형태로 사용.ol도 있는데 잘 안 씀
CSS
웹페이지를 스타일링하는 코드
셀렉터의 종류.
● 태그 그 자체.
● id 셀렉터 #
● class 셀렉터.
● attrubute 셀렉터. ex) button[type="submit"]
● pseudo-class 셀렉터 ex) button:hover
자주 쓰이는 속성
● width
● height
● margin 공간 밖의 여백
● border
● padding 공간 안의 여백
● font-size 글자 크기.
● font-weight 글자 굵기
● color 글자 색깔
● background-color 배경 색깔
● border-radius 모서리 둥글게~
● position
- 요소를 특별한 위치에 배치할 수 있음.
● display
- 레이아웃을 조정하는 역할.
- block, none 화면에 보이거나 숨기는 역할
- flex랑 grid. : 배치와 정렬
- justify-content 메인축 정렬
- align-items : 세로축 정렬
- flex-direction : column : 메인축을 ㅔ로축으로 변경.
오늘까지 배운 문법을 토대로, 예제를 풀어보자.
예제 5) 복수전
function getTruthyArray(arr) {
let truthyArr = [];
for (i = 0; i < arr.length; i++) {
if (Boolean(arr[i]) === false) {
arr.splice(i, 1);
i--
}
}
truthyArr = arr
return truthyArr
}
const array = [-1, 0, "", {}, [], null, undefined, NaN];
const result = getTruthyArray(array);
console.log(result); // 출력 결과: [-1, {}, []]
이렇게 짰을 때 성공했는데, 문제에선 truthyArr가 const로 선언되었다는 점이다.
따라서 truthyArr에 무언가를 push하는 식으로 코드를 바꿔야만 한다...
// 아래 함수는 배열을 입력받아서 배열 요소들 중 truthy한 요소들만 필터링하여 반환합니다.
// Truthy 란 boolean type을 기대하는 문맥에서 true 로 평가되는 값을 의미합니다.
// for문과 if문을 이용하여 작성해 보세요.
function getTruthyArray(arr) {
const truthyArr = [];
for (const el of arr) {
if (el) truthyArr.push(el);
}
return truthyArr;
}
const result = getTruthyArray( [ -1, 0, "", {}, [], null, undefined, NaN ] );
console.log(result); // [-1, {}, []]
push로 바꾸면 이러한 문법이 된다. 으으... 복수 실패다.
예제 6) 연산자 - 홀짝 구분
// 숫자 배열을 입력받아서 홀수의 값만 합치는 함수를 완성해 보세요.
// result 값이 아래아 같이 출력되어야 합니다.
// for문, if문, %(나머지) 연산자를 사용해 보세요.
function sumOdd(arr) {
let sum = 0;
for (i = 0; i < arr.length; i++) {
if (arr[i] % 2 === 1) {
sum += arr[i]
}
}
return sum;
}
let array = [1, 2, 3, 4, 5];
const result = sumOdd(array);
console.log(result); // 출력 결과: 9
생각보다 간단하게 성공.
예제 7) 논리 연산자 ||
// 아래의 결과와 같이 출력되도록 함수를 완성해 보세요.
function order(item, quantity, price) {
// item, quantity, price 중 하나라도 입력이 되어 있지 않으면
// '주문 정보를 모두 입력해주세요' 를 리턴합니다.
// quantity 수량이 0이하면
// '수량은 1개 이상 입력해주세요' 를 리턴합니다.
// 위 두 가지 경우만 아닌 경우에만 아래와 같이 주문 완료 메시지를 출력합니다.
// 이 부분에 코드를 작성해 보세요.
if (item === null || quantity === null || price === null) {
return "주문 정보를 모두 입력해주세요.";
} else {
if (quantity <= 0) {
return "수량은 1개 이상 입력해주세요";
} else {
return `주문이 완료되었습니다. ${item} ${quantity}개를 ${
quantity * price
}에 구매하셨습니다`;
}
}
}
console.log(order("아이폰 12", 2, 1200000));
// 출력 결과: '주문이 완료되었습니다. 아이폰 12 2개를 2400000원에 구매하셨습니다.'
console.log(order("맥북 프로", -1, 2500000));
// 출력 결과: '수량은 1개 이상 입력해주세요'
console.log(order("아이패드 에어", 1, null));
// 출력 결과: '주문 정보를 모두 입력해주세요'
||은 이렇게 쓰는 거군.
if가 중첩되서 코드가 좀 더럽긴 하지만...
예제 8) 논리연산자 ||
// 결제 카드에 따라 할인율이 다른 쇼핑몰이 있다고 가정합니다.
// 우리카드 또는 신한카드는 10% 할인.
// 롯데카드 또는 현대카드는 5% 할인.
// 아래 결과를 출력하는 함수를 완성해 보세요.
function getDiscountedPrice(original_price, card) {
// 할인 전 가격과 결제 카드에 따라 할인을 적용한 가격을 반환해야 합니다.
let result = 0;
if(card==="우리카드"||card==="신한카드"){
result += original_price * 0.9
} else {
result += original_price * 0.95
}
return result
}
const result = getDiscountedPrice(70000, "신한카드");
console.log(result); // 출력 결과: 63000
예제 9) 함수 정의 문법
// 함수 선언문으로 정의한 foo 함수
function foo() {
console.log("함수 선언문");
}
foo(); // 출력 결과: '함수 선언문'
// "함수 표현식"을 콘솔로그로 출력하는 foo2 함수를 함수 표현식으로 만들어 보세요.
// function 키워드를 사용해 주세요.
let foo2 = function () {
console.log('함수 표현식')
}
foo2(); // 출력 결과: '함수 표현식'
// "화살표 함수"를 콘솔로그로 출력하는 foo3 함수를 화살표 함수로 만들어 보세요.
let foo3 = () => console.log('화살표 함수')
foo3(); // 출력 결과: '화살표 함수'
/* 참고로 화살표 함수 역시 변수에 함수가 할당되는 함수 표현식 입니다. */
ez!
예제 10) if-else문
// 아래는 점수에 따라 학점을 반환해 주는 함수입니다.
// if / else if 문을 활용하여 아래 결과대로 출력되도록 함수를 완성해 보세요.
// 90 ~ 100 : A
// 80 ~ 90: B
// 70 ~ 80: C
// 60 ~ 70: D
// 60 미만: F
function getGrade(score) {
if (score >= 90 && score <= 100) {
return 'A'
} else if (score >= 80 && score < 90 ) {
return 'B'
} else if (score >= 70 && score < 80) {
return 'C'
} else if (score >= 60 && score < 70) {
return 'D'
} else if (score < 60) {
return 'F'
}
}
const result1 = getGrade(85);
const result2 = getGrade(65);
console.log(result1); // 출력 결과: 'B'
console.log(result2); // 출력 결과: 'D'
이것도 쉬웠다.
'본 캠프 > JavaScript 문법 종합반' 카테고리의 다른 글
| JavaScript 문법 종합반 2주차. (2) (1) | 2024.10.15 |
|---|---|
| JavaScript 문법 종합반 2주차. (1) (0) | 2024.10.14 |
| JavaScript 문법 종합반 1주차. (4) (2) | 2024.10.11 |
| JavaScript 문법 종합반 1주차. (2) (7) | 2024.10.08 |
| JavaScript 문법 종합반 1주차. (1) (2) | 2024.10.07 |