JavaScript + a | Basics

Soojong Kim·2021년 6월 12일
0
post-thumbnail

변수(Variable)

변수는 데이터를 담는 공간, 컴퓨터도 사람과 같이 많은 데이터를 기억해야 하는데, 이때 변수를 사용한다.

선언과 정의

변수를 선언한다는 것은 어떤 변수를 사용할지 정하는 작업이다.
크게 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! 

변수 이름 주의 사항(naming convention)

변수명은 영문 + 숫자로 지어야 하며 띄어쓰기와 특수문자가 불가능하다.

  • 한 파일에서 같은 변수 이름을 중복해서 사용할 수 없습니다.
  • 대소문자 구문 - 변수이름, 함수이름, 연산자 모두 대소문자를 구분합니다. 따라서 myName과 MyName은 다른 변수입니다.
  • 변수 이름을 정할 때, 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($)중 하나 입니다.
  • 두 번째 문자 부터는 글자, 밑줄, 달러, 숫자 중에서 자유롭게 쓸 수 있습니다.
  • 변수이름, 함수이름 등 camelCase(카멜케이스) 방식으로 사용합니다.
let firstName = 'kim'; // camelCase
let first_Name = 'kim'; // snakeCase

Function(함수) - 기본

함수는 자바스크립트의 꽃이라고 불릴 정도로 많이 사용된다.
작업을 수행하는 코드들을 정의하는 독립적인 블록

// sayHello라는 함수선언하기

//1. 함수 선언식
function sayHello(){
  console.log("say Hello");
}

//2. 함수 표현식
function sayHello() {
  console.log("say Hello");
}

//선언된 sayHello 함수를 호출
sayHello(); //sayHello

함수를 사용한다는 것은 실행 한다는 것을 뜻한다. 실행할 때 소괄호( ) 를 붙이고, 실행되면 함수의 { } 안에 있는 코드들이 실행된다.

매개변수(Parameter)와 인자(argument)

함수의 () 내부에 입력 값을 넣을 수 있는데, 이를 인자혹은 파라미터라고 한다.

  • 함수의 인자(argument)명은 문자+숫자 형태로 자유롭게 적을 수 있다.
  • 함수가 외부에서 입력 받은 데이터를 처리하는 경우
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)는 그 자리에 들어갈 구체적인 값을 뜻한다.

  • 한번 만든 함수는 여러 번 호출이 가능하다. 반환값을 변수에 저장해 두면 매번 확인이 가능하다.

주의할 점

1. 함수 안에 선언된 변수는 밖에서 사용이 불가능하다.

function sayHello() {
	let name = '김개발';
}

console.log(name) // undefined

2. 함수 밖에서 선언된 변수는 함수 {} 안에서 사용이 가능하다.

let name = '김개발';
function getName() {
	// 여기서 사용된 name은 함수의 인자인 name이다. 
console.log(name);
}

getName(); // 김개발

아래의 설명을 읽고 함수를 작성해주세요.

  • 함수 이름은 checkYear로 해주세요.
  • 올해 년도를 return 합니다.
  • 년도를 작성할 때는 ""(쌍따옴표)없이 숫자만 4자리 써주세요.
function checkYear() {
  let year = 2021;
  return year;
}

함수 값 반환(return)

함수는 값을 반환할 수 있다. 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) // 김개발 
  • 함수에서 return을 하게 되면 return 아래에 있는 코드는 실행되지 않는다. return은 함수를 종료시키는 구문이기도 하다.
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
}]
  1. products의 갯수가 1개 이상일 때와 아닐 때를 나누는 조건문을 짜보세요.
  2. products의 갯수가 5개 이상일 때, 1~4개 사이일 때, 0개일 때 조건문을 짜보세요.
// 1. 
if (products.length >= 1) {
  // 로직
} else {
  // 로직
}

// 2. 
if (products.length >= 5) {
  //로직
} else if (products.length >= 1) {
  //로직
} else {
  //로직
}

연산자

연산자는 변수들(혹은 값)을 가공할 수 있도록 도와준다.
기본적으로 산술(덧셈,뺄셈)을 돕는 기본 연산자, 값들을 비교하는 비교 연산자, 논리적인 순서를 제공하는 논리 연산자가 있다.

1. 기본 연산자

산술을 돕는 기본 연산자는 +, -, *, / 등이 있다.

  • 문자와 숫자를 더하면 문자가 된다.
//기본 연산자(산술 연산자, 문자열 연산자)
let num1 = 1;
let num2 = 2;
let char1 = "프론트엔드";
let char2 = "개발자";
let num3 = num1 + num2; // 숫자 + 숫자, 결과 : 3
let char3 = char + "" + char2; // 문자열 + 문자열, 결과: 프론트엔드 개발자
let chartNumMixed = char1 + num1; // 문자열 + 숫자, 결과: 프론트엔드1 

2. 비교 연산자

값을 서로 비교하는 연산자는 >, <, >=, <=, ===, !== 이 있다.
비교 연산자를 거치면 boolean 값을 반환 받는다.

  • 값과 타입이 같은지를 비교하는 동등 비교 연산자(equaility operator)
  • ===엄격(일치) 비교 vs == 추상(동등) 비교
//비교연산자(>, <, >=, <=, ===, !==)로 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를 서로 변환시켜 준다.
//부정 연산자 !, 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 = "소주에는 곱창 어떠신가요?"
  }
}

논리 연산자 (Logical Operators)

논리 연산자는 다른 연산자들의 실행을 논리적으로 제어하는 연산자이다.
일반적으로 비교 연산자와 콤비로 많이 사용. ||, &&

&&는 통상적으로 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;
  }
}

Practice

let products = [{
	name: '농구공',
	description: '농구 황제 마이클 조던이 사용',
	price: 100000,
    seller: '철수',
}, {
   	name: '축구공',
   	description: '축구 황제 메시가 사용',
	price: 80000
	seller: '영희'
}]
  1. 인자로 배열을 받았을 때 길이를 return 하는 함수를 만드시오. 그리고 products를 넣어 실행해보세요.
  2. 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를 보고 아래 조건에 맞는 함수를 작성해주세요.

  1. 데이터를 전달 받는 isbiggerThanHundred 이라는 이름의 함수를 만들어주세요.
  2. isbiggerThanHundred 함수에서 받은 argument를 myNumber라는 parameter에 저장해주세요.
  3. 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 를 선언하고 구현하세요.

  1. 숫자로 된 인자 하나를 받습니다.
  2. 받은 값을 2로 나눈 결과를 리턴합니다.
  3. 매개변수 이름은 마음대로 정해서 사용합니다.

✔️ Assignment 2 : 함수 halfAndAddNumber를 선언하고 구현하세요.

  1. 숫자로 된 인자 하나를 받습니다.
  2. 1번 문제에서 만들었던 halfNumber를 호출하면서, 인자로 받았던 값을 다시 halfNumber 함수에 전달해줍니다.
  3. halfNumber의 리턴결과를 함수 안쪽에서 변수명 result에 정의합니다.
  4. 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 함수를 만들어주세요.

  • 인자를 세개 받습니다.
    1. 첫번째 인자는 년도에 해당하는 숫자입니다.
    2. 두번째 인자는 월에 해당하는 숫자입니다.
    3. 세번째 인자는 일에 해당하는 숫자입니다.
  • 년도 인자만 받았을 경우 → "1234년" 과 같은 형식의 문자열을 리턴 해주세요.
  • 년도,월 인자를 받았을 경우 → 년도와 월을 조합해서 "1234년 5월" 과 같은 형식의 문자열을 리턴 해주세요.
  • 년도,월,일 인자를 전부 받았을 경우 → 년도,월,일을 조합해서 "1234/5/6" 과 같은 형식의 문자열을 리턴 해주세요.
meetAt(2022); // 결과 --> "2022년"
meetAt(2032, 3); // 결과 --> "2032년 3월"
meetAt(1987, 10, 28); // 결과 --> "1987/10/28"

함수 - 데이터 반환하기 (2)

return 함수 정의

function multiplyTen(myNumber) {
  return 10 * myNumber;
}
// multiplyTen 함수의 정의 -> 받은 인자에 10을 곱하여 반환한다!

return 함수의 호출

multiplyTen(3);		//결과: 30
multiplyTen(6);		//결과: 60
multiplyTen(9);		//결과: 90

return 함수의 호출 결과 확인

호출된 함수의 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);
}

0개의 댓글