변수는 데이터를 담는 공간, 컴퓨터도 사람과 같이 많은 데이터를 기억해야 하는데, 이때 변수를 사용한다.
변수를 선언한다는 것은 어떤 변수를 사용할지 정하는 작업이다.
크게 var, let, const를 사용한다.
var name; // name이라는 변수를 선언
name = "김개발"; // name이라고 선언된 변수에 "김개발"이라는 값을 저장
var name = "김개발"; // 합치면 이렇게 사용
//var, let, const 차이
//1. var는 같은 이름이 변수 사용 가능.
var num1 = "김개발";
var num1 = "developer";
//2. let은 한번 선언된 변수에 다시 새롭게 선언 불가능
let num1 = "김개발";
let num1 = "developer"; // <- Error!
//3. const는 선언된 변수에 새로운 값을 정의할 수 없다. 변수 값을 더이상 변경하지 않을 때 사용
const num1 = "김개발"
num1 = "developer"; // <- Error!
변수명은 영문 + 숫자로 지어야 하며 띄어쓰기와 특수문자가 불가능하다.
- 한 파일에서 같은 변수 이름을 중복해서 사용할 수 없습니다.
- 대소문자 구문 - 변수이름, 함수이름, 연산자 모두 대소문자를 구분합니다. 따라서 myName과 MyName은 다른 변수입니다.
- 변수 이름을 정할 때, 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($)중 하나 입니다.
- 두 번째 문자 부터는 글자, 밑줄, 달러, 숫자 중에서 자유롭게 쓸 수 있습니다.
- 변수이름, 함수이름 등 camelCase(카멜케이스) 방식으로 사용합니다.
let firstName = 'kim'; // camelCase
let first_Name = 'kim'; // snakeCase
함수는 자바스크립트의 꽃이라고 불릴 정도로 많이 사용된다.
작업을 수행하는 코드들을 정의하는 독립적인 블록
// sayHello라는 함수선언하기
//1. 함수 선언식
function sayHello(){
console.log("say Hello");
}
//2. 함수 표현식
function sayHello() {
console.log("say Hello");
}
//선언된 sayHello 함수를 호출
sayHello(); //sayHello
함수를 사용한다는 것은 실행 한다는 것을 뜻한다. 실행할 때 소괄호( ) 를 붙이고, 실행되면 함수의 { } 안에 있는 코드들이 실행된다.
함수의 () 내부에 입력 값을 넣을 수 있는데, 이를 인자혹은 파라미터라고 한다.
function calculate(x) { //x를 인자(입력값)
let result = 3 * x * 5;
console.log('결과 값은' + result + '입니다');
}
let result = calculate(5); //결과 같은 20입니다.
let getAge = function(name, age) { 인자는 여러 개 입력 가능
console.log(name + '은' + age + '살입니다.');
}
getAGe('김개발', 30); // 김개발은 30살입니다.
매개변수(parameter)는 '자리'혹은 '변수의 이름'이라고 한다. 반면에, 인자(argument)는 그 자리에 들어갈 구체적인 값을 뜻한다.
- 한번 만든 함수는 여러 번 호출이 가능하다. 반환값을 변수에 저장해 두면 매번 확인이 가능하다.
function sayHello() {
let name = '김개발';
}
console.log(name) // undefined
let name = '김개발';
function getName() {
// 여기서 사용된 name은 함수의 인자인 name이다.
console.log(name);
}
getName(); // 김개발
아래의 설명을 읽고 함수를 작성해주세요.
- 함수 이름은
checkYear
로 해주세요.- 올해 년도를
return
합니다.- 년도를 작성할 때는
""
(쌍따옴표)없이 숫자만 4자리 써주세요.function checkYear() { let year = 2021; return year; }
함수는 값을 반환할 수 있다. return 이라는 표현을 통해 값을 반환할 수 있는데 여기서 값은 모든 자료형 (string, number, 배열, 객체) 그리고 함수 또한 return이 가능하다.
let result = noPrarameter(); // result라는 변수에 noParameter 함수 호출한 결과 값을 할당 console.log(result);
위처럼 함수를 호출해서 반환한 값을 다시 변수에 저장해서 확인할 수도 있지만, console.log() 로 바로 확인이 가능하다.
console.log(noParameter());
모든 함수가 return을 포함해야 하는 건 아니지만, 함수 내부에 return 키워드를 생략도 가능하다. 하지만 이 경우에도 함수는 무언가를 반환하고 있다. 함수가 반환을 생략하면 undefined 라는 값을 반환한다.
function calculate(x) { //함수를 실행했을 때 return이 있어야지만 값을 얻을 수 있다.
let result = 3 * x * 5;
return result;
}
let value1 = calculate(5); // calculate를 호출하면 20의 결과값을 반환
let vaule2 = calculate(10); // calculate를 호출하면 30의 결과값을 반환
console.log(value1);
console.log(value2);
//입력한 parameter를 profile 객체로 만들어주는 함수
function getProfile(profileName, profileAge) {
return { //여기선 객체를 return
name : profileName,
age : profileAge
}
}
let profile = getpProfile('김개발', 30); // name, age를 key로 가지는 객체를 받는다.
console.log(profile,name) // 김개발
function sayHello() {
console.log('실행 O');
return;
console.log('실행 X'); // return 아래에 있는 코드는 실행되지 않음
}
sayHello();
Assignment
함수 작성에 익숙해지셨나요? 아래의 설명을 듣고 함수를 작성해주세요.
- 함수 이름은
addTen
입니다.- 받은 parameter에 10을 더해서 반환(return)해주세요.
function addTen(num) { return num + 10; }
Pratice
let products = [{ name: '농구공', description: '농구 황제 마이클 조던이 사용', price: 80000, seller: '철수' }, { name: '축구공', description: '축구 황제 메시가 사용', price: 100000, seller: '영희' }]
1.인자로 배열을 받았을 때 길이를 return 하는 함수를 만드시오. 그리고 products를 넣어 실행해보세요.
2. product 객체를 넣었을 때 product의 seller를 반환하는 함수를 만들어 보세요. 그리고 products의 첫번째 값을 넣어 실행해보세요.function getProducts(arr) { return arr.length; } getProducts(products) // 2
조건문은 조건(Condition)에 따라 로직을 다르게 수행하도록 돕는다. 조건에 따른 다른 로직이 수행할 때 조건문이 사용된다.
if(조건) { // 로직 } let answer = 3 + 3; if (answer > 5) { alert("5보다 큰 숫자!"); } //여기서 조건이 안 맞을 때 실행할 코드를 추가하면, if (answer > 5) { alert("5보다 큰 숫자!"); } else { alert("5보다 작거나 같은 숫자!"); }
if (A condition) { A 조건이 맞으면 여기만 실행 } else if (B condition) { B 조건이 맞으면 여기만 실행 } else if (C condition) { C 조건이 맞으면 여기만 실행 } else if (D condition) { D조건이 맞으면 여기만 실행 } else { 위의 조건이 모두 안 맞으면 여기 실행 }
let answer = 3 + 3;
if (answer > 15) {
alert ("15보다 큰 숫자");
} else if (answer > 10) {
alert ("10보다 큰 숫자");
} else if ( answer > 5 ) {
alert ("5보다 큰 숫자");
} else {
alert ("5보다 작거나 같은 숫자");
}
let name = "김개발";
let age = 30;
// 조건문 안에 특정 값이 들어있으면 내부 로직 수행. (null, 0, false, "") 이면 수행 X
if (age > 25 && name === "철수") {
console.log('real');
} else {
console.log('fake'); //값이 false이므로 'fake'출력
}
if (age > 30) { //값이 false이므로 else if 로직으로 넘어감
console.log('fake');
} else if (age > 25) {
console.log('real');
} else {
console.log('젊음');
}
조건에 맞게 함수를 구현해주세요.
myFavoriteColor
함수는"색깔"
을 인자로 받고 3가지 결과 값을 리턴합니다.- if문을 사용해 다음 조건에 맞게 함수를 구현 해주세요.
color
가"navy"
이면"Good!"
리턴color
가"yellow"
이면"Bad!"
리턴- 그 외의 경우
"Whatever!"
리턴
function myFavoriteColor(Color) {
if (color === 'navy') {
return color = "Good!";
} else if (color === "yellow") {
return color = "Bad!";
} else {
return color = "Whatever!"
}
}
Practice
let products = [{ name: '농구공', description: '농구 황제 마이클 조던이 사용', price: 80000, }, { name: '축구공', description: '축구 황제 메시가 사용', price: 100000 }]
- products의 갯수가 1개 이상일 때와 아닐 때를 나누는 조건문을 짜보세요.
- products의 갯수가 5개 이상일 때, 1~4개 사이일 때, 0개일 때 조건문을 짜보세요.
// 1.
if (products.length >= 1) {
// 로직
} else {
// 로직
}
// 2.
if (products.length >= 5) {
//로직
} else if (products.length >= 1) {
//로직
} else {
//로직
}
연산자는 변수들(혹은 값)을 가공할 수 있도록 도와준다.
기본적으로 산술(덧셈,뺄셈)을 돕는 기본 연산자, 값들을 비교하는 비교 연산자, 논리적인 순서를 제공하는 논리 연산자가 있다.
산술을 돕는 기본 연산자는 +, -, *, / 등이 있다.
//기본 연산자(산술 연산자, 문자열 연산자)
let num1 = 1;
let num2 = 2;
let char1 = "프론트엔드";
let char2 = "개발자";
let num3 = num1 + num2; // 숫자 + 숫자, 결과 : 3
let char3 = char + "" + char2; // 문자열 + 문자열, 결과: 프론트엔드 개발자
let chartNumMixed = char1 + num1; // 문자열 + 숫자, 결과: 프론트엔드1
값을 서로 비교하는 연산자는 >, <, >=, <=, ===, !== 이 있다.
비교 연산자를 거치면 boolean 값을 반환 받는다.
//비교연산자(>, <, >=, <=, ===, !==)로 boolean 값을 반환
let name = '김개발';
let num = 10;
console.log(num < 5); // 값의 크기를 비교, 결과: false
console.log(name === '김개발'); // 값이 일치하는 지를 비교, 결과: true
console.log(name !== '홍길동'); // 값이 일치하지 않는 지를 비교, 결과: false
if (answer !== "개발") {
alert("틀렸습니다.");
}
answer 값이 "개발"이 아니면, 다음 구문이 실행된다.
//부정 연산자 !, true <-> false로 반환
let nope = false;
let yes = !nope // true
if ("3" == 3) {
return true;
}
if ("3") === 3 {
return false;
}
index.js를 보고 아래 조건에 맞는 함수를 구현해주세요.
- 우리나라는 20살 부터 술을 마실 수 있습니다. 우리나라 사람들이 가장 즐겨마시는 술은 소주 입니다.
- canIDrinkSoju 함수 안에 비교 연산자를 사용하여 다음의 경우들이 구현될 수 있도록 해주세요.
- age 가 20살 보다 어리면: "애야 가서 공부나 해라!" 리턴
- age 가 50살 이상이면: "건강을 위해서 술은 적당히 마시세요!" 리턴
- 그 외의 경우에는: "소주에는 곱창 어떠신가요?" 리턴
function canIDrinkSoju(age) { if (age < 20) { return age = "애야 가서 공부나 해라!" } else if (age >= 50) { return age = "건강을 위해서 술은 적당히 마시세요!" } else { return age = "소주에는 곱창 어떠신가요?" } }
논리 연산자는 다른 연산자들의 실행을 논리적으로 제어하는 연산자이다.
일반적으로 비교 연산자와 콤비로 많이 사용. ||, &&
&&는 통상적으로 AND 조건이다. 앞의 연산 결과가 true일 때 뒤의 연산값을 반환
- 그리고
||는 통상적으로 OR 조건이다. 앞의 연산 결과가 true라면 앞의 연산 값을 반환. false라면 뒤의 연산 값을 반환- 혹은
const answer = prompt("어디사세요?");
if (answer === "선릉" || answer === "강남" || answer === "역삼") {
alert("가까우시네요!");
} else if (answer === "을지로") {
alert("조금 멀리 사시네요.");
} else {
alert("거긴 어디인가요?");
}
let name = '김개발';
let age = 30;
// && 앞의 연산 결과가 true일 때 연산을 수행
console.log(name === '김개발' && age > 25); // 결과: true
console.log(name === '김개발' && age > 40); // 결과: false
// || 앞의 연산 결과가 true라면 뒤 연산을 실행하지 않음
console.log(name === '김개발' || age < 30) // 결과: true
// || 앞의 연산 결과가 false라면 뒤 연산을 수행
conosle.log(name !== '김개발' || age > 25); // 결과 true
let nope = false;
let yes = true;
console.log(nope || yes); // 결과: true
console.log(nope && yes); // 결과: false
index.js에 있는 가위 바위 보 게임 함수를 아래 조건에 맞게 구현해주세요.
rockPaperScissors
함수를 구현해서 가위 바위 보 게임을 구현해주세요.- 가능하면 || 와 && 연산자 둘다 사용해주세요.
- player1과 player2 중 이긴 사람이 누군지 리턴해주세요.
- 예를 들어, player1이 이겼으면 "player1" 이 리턴 되고 그 반대의 경우라면 "player2"가 리턴이 되어야 합니다.
- 만일 비기는 경우에는 무조건 "player1"이 리턴 되어야 합니다.
- player1 과 player2 의 값은 다음 셋 중 하나 입니다.
- "가위"
- "바위"
- "보"
- 예를 들어, player1은 "가위" 이고 player2는 "보" 이면 "player1" 이 리턴 되어야 합니다.
function rockPaperScissors(player1, player2) { if ((player1 === '가위' && player2 === '보') || (player1 === '가위' && player2 === '가위') || (player1 === '바위' && player2 === '가위') || (player1 === '바위' && player2 === '바위') || (player1 === '보' && player2 === '바위') || (player1 === '보' && player2 === '보')) { result = "player1"; return result; } else { result = "player2"; return result; } }
let products = [{ name: '농구공', description: '농구 황제 마이클 조던이 사용', price: 100000, seller: '철수', }, { name: '축구공', description: '축구 황제 메시가 사용', price: 80000 seller: '영희' }]
- 인자로 배열을 받았을 때 길이를 return 하는 함수를 만드시오. 그리고 products를 넣어 실행해보세요.
- product 객체를 넣었을 때 product의 seller를 반환하는 함수를 만들어 보세요. 그리고 products의 첫번째 값을 넣어 실행해보세요.
// 1. let result = products.length >= 1 && products[0].name === '축구공'; console.log(result); //false
// 2. function getProductsSeller (products) { return products.seller; } getProductsSeller(products[0]);
데이터를 전달 받는 함수의 재정의
function alertSuccess(name) {
alert(name + "님 로그인 성공!");
}
//함수의 호출
alertSuccess("김개발"); 결과: 김개발님 로그인 성공!
index.js를 보고 아래 조건에 맞는 함수를 작성해주세요.
- 데이터를 전달 받는
isbiggerThanHundred
이라는 이름의 함수를 만들어주세요.isbiggerThanHundred
함수에서 받은 argument를myNumber
라는 parameter에 저장해주세요.isbiggerThanHundred
함수에서
myNumber
가 100보다 크면 "크다!"라는 문자열을 return 해주세요.myNumber
가 100보다 작거나 같으면 "작다!"라는 문자열을 return 해주세요.function isbiggerThanHundred(myNumber) { if (myNumber > 100) { return "크다!"; } else if (myNumber <= 100) { return "작다!" } }
함수 - parameter, argument (2)
매개 변수(parameter)
함수를 정의하면서, 괄호 () 안에 변수명을 쓰면, 매개변수라고 부른다.
함수 안쪽에서 변수와 같은 역할을 한다.
인자(argument)
호출문의 괄호() 안에 어떤 값 또는 값이 정의된 변수를 쓰면, 인자라고 부른다.// doubleNumber 함수 선언식 function doubleNumber(myNumber) { // <- 호출시 전달받은 값을 myNumber 라는 변수명으로 함수 안쪽에서 사용하겠다. let myResult = myNumber * 2 return myResult } // doubleNumber 함수 호출문 doubleNumber(3); // <- doubleNumber를 호출하면서 값 3을 전달해주겠다.
✔️ Assignment 1 : 함수
halfNumber
를 선언하고 구현하세요.
- 숫자로 된 인자 하나를 받습니다.
- 받은 값을 2로 나눈 결과를 리턴합니다.
- 매개변수 이름은 마음대로 정해서 사용합니다.
✔️ Assignment 2 : 함수
halfAndAddNumber
를 선언하고 구현하세요.
- 숫자로 된 인자 하나를 받습니다.
- 1번 문제에서 만들었던
halfNumber
를 호출하면서, 인자로 받았던 값을 다시halfNumber
함수에 전달해줍니다.halfNumber
의 리턴결과를 함수 안쪽에서 변수명result
에 정의합니다.result
에 1을 더한 값을 리턴합니다.// 1. function halfNumber(firstNumber) { return firstNumber / 2; } //2. function halfAndAddNumber(secondNumber) { let result = halfNumber(secondNumber); return result + 1;
함수는 여러 개의 데이터를 전달받을 수 있다. 함수에 인수가 한 개가 아닌 여러개로 전달할 수 있다.
function alertSuccess(month, name) {
alert(month + "월의 당첨자는 " + name + "입니다.");
}
alertSuccess(6, "김개발");
index.js에서
meetAt
함수를 만들어주세요.
- 인자를 세개 받습니다.
- 첫번째 인자는 년도에 해당하는 숫자입니다.
- 두번째 인자는 월에 해당하는 숫자입니다.
- 세번째 인자는 일에 해당하는 숫자입니다.
- 년도 인자만 받았을 경우 →
"1234년"
과 같은 형식의 문자열을 리턴 해주세요.- 년도,월 인자를 받았을 경우 → 년도와 월을 조합해서
"1234년 5월"
과 같은 형식의 문자열을 리턴 해주세요.- 년도,월,일 인자를 전부 받았을 경우 → 년도,월,일을 조합해서
"1234/5/6"
과 같은 형식의 문자열을 리턴 해주세요.meetAt(2022); // 결과 --> "2022년" meetAt(2032, 3); // 결과 --> "2032년 3월" meetAt(1987, 10, 28); // 결과 --> "1987/10/28"
function multiplyTen(myNumber) {
return 10 * myNumber;
}
// multiplyTen 함수의 정의 -> 받은 인자에 10을 곱하여 반환한다!
multiplyTen(3); //결과: 30
multiplyTen(6); //결과: 60
multiplyTen(9); //결과: 90
호출된 함수의 return 값을 변수에 저장하여 console로 확인할 수 있다.
function multiplyTen(myNumber) {
return 10 * myNumber;
}
let result1 = multiplyTen(3);
let result2 = multiplyTen(6);
let result3 = multiplyTen(9);
console.log(result1); //결과: 30
console.log(result2); //결과: 60
console.log(result3); //결과: 90
//저장 안하고 console로 확인도 할 수 있다.
console.log(multiplyTen(3);
console.log(multiplyTen(6);
console.log(multiplyTen(9);
function getTax(price) {
return price * 0.1;
}
function calculateTotal(price) {
return price + getTax(price);
}
const result = calculateTotal(3500); // 함수가 실행되는 시점 (호출)
console.log(result);
index.js에서
getTotal
함수를 만들어주세요.
getTotal
함수는 가격을 2개 받아서 calculateTotal 호출 반환값을 더해서 리턴하는 함수입니다.
getTotal
이라는 이름의 함수를 만들어주세요. 가격정보 2개를 인자로 받습니다.- 인자이름은 원하는대로 지어주셔도 됩니다.
getTotal
함수에서 인자로 받은 가격으로 각각calculateTotal
함수를 호출해주세요. 그리고 그 결과값을 더해서 반환해주세요.
참고사항getTax
함수는 가격의 tax를 구하는 함수입니다.calculateTotal
함수는 상품의 가격에 tax를 더한 값을 구하는 함수입니다.getTotal
함수는 두 상품의 가격을 더해서 반환하는 함수입니다.
function getTax(price) {
return price * 0.1;
}
function calculateTotal(price) {
return price + getTax(price);
}
let result = calculateTotal(3500);
console.log(result);
function getTotal(firstPrice, secondPrice) {
return calculateTotal(firstPrice) + calculateTotal(secondPrice);
}