1013 TIL

기멜·2021년 10월 13일
js
0

자바스크립트 독학

목록 보기
30/44

오늘도 화이팅! 강의 보면서 Replit 문제 풀기

변수

변수는 데이터를 담을 수 있는 대상을 말합니다. 특정한 값을 담아서 사용할 수 있는 것 그것을 변수라고 부릅니다.
어떻게 사용하는지 직접 보면서 이해를 해보도록 하겠습니다.

let myNumber = 100;

myNumber라는 변수에 숫자 100이라는 값을 담을 수 있습니다. 그래서 이 myNumber 는 변수의 이름이 됩니다. 그럼 100은 변수에 담긴 값이 되겠죠. 지금부터 숫자 100이라는 이름대신 myNumber라는 변수 이름을 대신 사용하겠다는 뜻이 됩니다.

크게 데이터 변수를 사용하려면 데이터를 변수에 담아서 사용하려면 두 가지에 단계를 거쳐야하는데요. 먼저 myNumber 라는 이름 자체를 선언해주는 과정이 필요합니다. 이걸 선언 이라고 합니다. 선언해달라고 하면 let myNumber 라는 과정을 거치라는 뜻입니다. 영어로는 Declare 라고 합니다.

자, 이렇게 변수가 선언이 되면 그 변수에 내가 담고자 하는 데이터를 담는대요. 그 과정을 할당이라고 표현을 합니다. 그러니까 개발자가 myNumber 라는 변수에 100이라는 값을 할당한 것입니다.

할당을 하고 나면 이 myNumber는 그때부터 100이라는 값을 대신 지칭하게 됩니다. 대입이라고도 흔히 얘기를 합니다. 이걸 영어로 Assign 이라고 합니다.

자, 그런데 자바스크립트에서는 흔히 두 과정을 나눠서 작성하지 않고 변수 선언과 값을 할당하는 과정이 한번에 이루어 집니다. let myNumber = 100; 처럼요

let myNumber = 100;
console.log(myNumber);
100 //결과

cosloe.log를 찍어보면 100이 나오는 것을 알 수 있습니다.

데이터 타입

변수에는 다양한 종류에 데이터가 들어갈 수 있습니다.
크게 두 타입으로 나눌 수 있습니다.

원시 타입 / 기본 타입 (Primitive type)

  • Number = 숫자 그 자체
  • String = ' ' , " " , ` `
  • Boolean = true / false
  • Undefined = 정의가 되지 않았다.
  • Null = 없다.

참조 타입 (Reperence type)

  • Object
  • Array = 배열
  • Function

Number

let myNumber1 = 0;
let myNumber2 = 1;
let myNumber3 = 500;
let myNumber4 = 10000;

console.log(myNumber1)
0 // 결과

console.log에서 연산자들을 이용해서 + - / * % 등으로 계산할 수 있습니다.

String

let number1 = 100
let number2 = 200

console.log('100 plus 200 equals to', number1 + number2)
100 plus 200 equals to 300 // 결과

스트링과 넘버를 같이 조합해서 사용할 수도 있습니다.
여기서 알아야할 것 은 스트링 '2'와 넘버 2 를 더하면
String 22 가 나온다는 것입니다.

문자열의 총 길이 구하기

const myString = 'Hello! wecode!!'

console.log(myString.length)
15 // 결과

.length를 통해 이렇게 문자열의 길이를 알아낼 수 있습니다.

Boolean

참과 거짓을 데이터로 표현하는 것입니다. 

let myAnswer = true;

let yourAnswer = false;

console.log(myAnswer)
true // 결과

Array

[19, 44, 'good', false]

값이 일렬로 모여있는 배열이라고 부릅니다. 대괄호 사이에 각기 다른 데이터가 들어가 있습니다. 이런걸 배열이라고 합니다.

let studentsName = [
    'Code Kim',
    'Wecode Lee'
]

console.log(studentsName)
(2) ['Code Kim', 'Wecode Lee'] // 결과

이런식으로 선언을 하게 됩니다.

Object

객체라고 얘기합니다. 여러가지 데이터가 모여있는 묶음 입니다. 대신 orray 그냥 데이터를 쭉 나열하기만 하면 되는데, object는 특정한 데이터를 저장할 때 key라는 이름을 붙입니다. 

{name: 'Code Kim', inDeveloper: true}

: 을 중심으로 앞을 key 뒤는 value 라고 합니다.

let myObject = {
    name: 'Code Kim',
    isDeveloper: true
}

console.log(myObject)
{name: 'Code Kim', isDeveloper: true} // 결과

이런 모양이 있구나 라고 기억해두면 됩니다.

Function

함수입니다. 더 자세하게 다룰테지만 함수 이름을 붙이고 소괄호 ( ) 를 붙여주고 중괄호 { } 안에 함수에 기능 들이 들어가있습니다.

function myFunction () {
    let name = 'Code Kim'
    console.log(name)
    return name
}

이렇게 생겼습니다.

굉장히 많이 사용하는 기능입니다.

함수가 하는 기능은 무언가를 넣고 실행을 시켜서 그걸 내보내는 역할입니다. 함수는 무조건 호출을 해줘야합니다. 그래야지 동작을 합니다.

output을 반환할 수 있는 함수
에 대해서 알아봅시다.
return 이라고 합니다. 

function sayHello () {
  let friend = 'Code Kim'
  console.log('Hello! ' + friend)
}

이렇게 코드를 짜면 아무일도 일어나지 않습니다. 바로 선언만 했고 호출을 하지 않았기때문입니다.

function sayHello () {
  let friend = 'Code Kim'
  console.log('Hello! ' + friend)
}
sayHello()
"Hello! Code Kim" // 결과

이렇게 sayHello() 로 호출을 해야지 Hello! Code Kim이 호출되게 됩니다. 그러면 이제 아웃풋을 return 해줄 수 있는 함수를 만들어보도록 하겠습니다.

function sayHello2 () {
  let friend = 'Code Kim'
  return 'Return ' + friend
}

이렇게만하면 콘솔에 아무것도 찍히지 않습니다. 정상입니다.
return은 console.log 가 아니기 때문에 어떤 대상을 출력하라는 명령어가 아닙니다. 콘솔에 출력할 수 있는 명령어는 console.log가 유일합니다. sayHello2()는 콘솔로그에 무언가 찍어내지 않았기 때문에 아무것도 나오지 않은 것입니다.

결과물은 있지만 바로 사람 눈에 보이지는 않습니다.
'Return ' + friend 를 어떻게 콘솔로그에 출력할 수 있을까요? return한 대상은 그 자체로 특정한 데이터가 됩니다. 말이 어렵지만 코드를 보면서 말해봅시다. 

function sayHello2 () {
  let friend = 'Code Kim'
  return 'Return ' + friend
}
console.log(sayHello2())
Return Code Kim // 결과

sayHello2 라는 함수를 실행해서 나오는 아웃풋을 console.log로 찍은 것입니다.

Return Code Kim 이라는 문자열을 다른 변수에 할당할 수 있습니다. 

function sayHello2 () {
  let friend = 'Code Kim'
  return 'Return ' + friend
}

let myFriend = sayHello2()

우리의 눈에만 보이지 않을 뿐이지 아웃풋은 계속 되고 있습니다. 우리가 눈으로 확인 하지 못할 뿐입니다.

function sayHello2 () {
  let friend = 'Code Kim'
  return 'Return ' + friend
}

let myFriend = sayHello2()

console.log(myFriend)
Return Code Kim // 결과

'Return ' + friend 문자열이 함수를 실행시킴으로써 Return Code Kim이 아웃풋으로 반환이 됐습니다. 그러면서 myFriend 라는 변수에 담긴 것입니다. 그것을 console.log로 출력을 한 것입니다.

여러번 훈련을 하면 익숙해집니다.

이번엔 숫자를 더하는 함수를 만들어 보겠습니다. 100과 200을 더해서 300 숫자를 리턴하는 함수를 만들어보겠습니다.

function addNumbers(){
  return 100 + 200
}

let myNumber300 = addNumbers()

console.log(myNumber300)
300 // 결과

이 과정이 이해가 되셔야합니다.

이때까지 배운걸 응용해보겠습니다.

function sayHello3(){
  let sentence = 'Hello!! '
  let name = 'Code Kim'
  return sentence + name
}
sayHello3() // 그냥 호출만 하는걸로는 아무것도 나오지 않는다.
console.log(sayHello3()) // 콘솔로그에 찍힌다.
Hello!! Code Kim // 결과

console.log 만으로 값을 내는 것은 그냥 값이 출력하는거지 값을 재사용 할 수가 없다.
return으로 내는 값은 재사용을 할 수 있습니다.

input이 있는 함수
input이 있는 함수도 선언을 하고 그 뒤로 실행을 해줘야하는 것은 마찬가지입니다. 다른말로 정의를 하고 호출을 해야만 함수가 실행 될 수가 있습니다. 

function sayHello5 (name) {
  console.log('Hello ' + name)
}
sayHello5('wecode')
Hello wecode // 결과

이 코드에서 sayHello5 (name) 에서 name에 들어가는 이름을 파라미터(인자) 라고 합니다. 어떤 input을 받기로 했고 그 input 자리에 들어온 변수를 hello 라는 문자열 뒤에 합쳐서 출력하겠다 라고 말하는 코드입니다. 호출할 때 name 이라는 파라미터 자리에 'wecode'를 넣었습니다. 그랬더니 이제 hello + wecode 라는 문자열이 된겁니다.

function sayHello4 (name) {
  return 'Hello, ' + name 
}

let greeting = sayHello4('wecode')
console.log(greeting)
Hello, wecode // 결과

파라미터와 return이 합쳐진 코드입니다.

sayHello4 (name)이라는 파라미터 자리에 sayHello4('wecode')에 wecode를 argument 라고 합니다. 둘은 같은 자리로 들어갑니다.

function sayHello4 (name) {
  return 'Hello, ' + name 
}

let greeting = sayHello4('wecode') // argument
let greeting2 = sayHello4('Code Kim') // argument

console.log(greeting2)
Hello, Code Kim // 결과
function sayHello4 (name) {
  return 'Hello, ' + name + '!'
}
console.log(sayHello4('Developers'))
Hello, Developers! // 결과

이렇게 하면 함수를 여러개 만들지 않아도 되는 편리성이 있습니다.

function sayHello4 (name) {
  return 'Hello, ' + name + '!'
}
let firstExample = sayHello4('wecode')
let secondExample = sayHello4('Code Kim')
let thirdExample = sayHello4('Developers')

console.log(firstExample)
console.log(secondExample)
console.log(thirdExample)

"Hello, wecode!"
"Hello, Code Kim!"
"Hello, Developers!"

바로 이렇게 말이죠.

파라미터는 여러개를 넣을 수도 있습니다.

function addNumbers (num1, num2){
  let result = num1 + num2
  return result
}

let addedNumber = addNumbers(3,5)

console.log(addedNumber)
8 // 결과

(num1, num2) 안에 (3,5)가 들어갑니다.
비슷한 코드를 하나 더 만들어 보겠습니다. 이번엔 나누기로

function divideNumbers (number1, number2){
  let result = number1 / number2
  
  return result
}

let smallNumber = divideNumbers(10, 100)

console.log(smallNumber)
0.1 // 결과

여기서 (10,100) 을 (100,10) 으로 바꿔주게 되면 결과는 달라집니다. 10으로 결과가 나오는 것을 확인 할 수 있습니다.

실수하기 쉬운 몇가지를 말해보도록 하겠습니다.

function addNumbers (num1, num2){
  let result = num1 + num2
  
  return result 
}

여기서
let result = num1 + num2

return result
는 함수 안에 들어있기 때문에 밖에서 활용할 수 없습니다.

profile
기멜
프론트엔드 개발자를 꿈꾸는 도화지 위를 달리는 여자
이전 포스트

1012 TIL

다음 포스트

1014 TIL

0개의 댓글