Level 1-1 JavaScript 기초와 문제 해결
TIL LIST
- 변수
- 함수
1) 변수
1. 변수에 대한 이해
변수는 이름이 붙은 값을 의미합니다. 즉, 내가 원하는 정보를 담을 수도 있고, 이후에 다른 정보를 담을 수도 있습니다. 이렇게 정보를 저장하게 되면, 컴퓨터가 어떤 복잡한 작업을 한 후 다시 돌아와서 새로운 작업을 할 때, 다시 꺼내서 쓸 수도 있습니다. 마치 수학 문제를 풀다가 중간값을 따로 적어두는 것 같습니다.
let myname = 'Yongho' 에서 let 은 선언, myname 은 변수, = 은 할당 이다.
따라서 위 코드를 해석하면 "let을 선언하여 myname 이라는 변수에 'Yongho' 값을 할당한다." 가 된다.
let sum = 1
sum = sum + 2
sum = sum + 3
sum = sum + 4
console.log(sum)위 코드에서 최종 값은 과연 어떻게 될까?
먼저 let sum = 1 을 통해 우리는 sum 이라는 변수에 1 이라는 값을 할당했다는 것을 알 수 있다.
그 아래 코드를 봐보자.
sum = sum + 2
직역해보자면 1 = 1 + 2
즉, 1 = 3 이 되므로 일반적인 수학 상식으로는 말도 안되는 값이 나온다.
하지만 이것은 컴퓨터 언어이므로 우리는 다르게 접근 할 필요가 있다.
먼저 해석을 해보자면
"변수 sum 에 sum + 2 값을 할당한다." 가 된다.
단순하게 설명하자면 sum 의 값은 앞으로 sum + 2 가 되는 것이다.
즉, sum = 3 이 된다는 말이다.
위 방법 대로 sum = sum + 4 까지 반복하면
let sum = 1
sum = 1 + 2
sum = (1 + 2) + 3
sum = (1 + 2 + 3) + 4
console.log (sum) // sum = 10최종 sum 의 값은 10을 갖게 된다.
번외로 let myname; 과 같이 선언은 했지만 값을 할당 안한 경우 어떤 값이 나오게 될까?
답 : myname 이라는 변수에 할당 된 값이 없으므로 undefined (정의 되지 않음) 가 나오게 된다.
2. 변수의 타입 (Type)
변수의 값으로 올 수 있는 타입 (Type) 은 다양하지만 대표적인 5가지는 아래와 같다.
(보기 쉽게 변수는 하나로 통일했다.)
let myname = 123; (숫자 타입)
let myname = 'Steve';(문자열 타입, 꼭 앞 뒤로 '' 와 같은 따옴표를 붙여야한다.)
let myname = true/false; (참, 거짓 등의 불리언 타입)
let myname = ['Yongho', 'Steve', 'Mason']; (문자열을 한 곳에 묶은 배열 타입)
let myname = { name : 'Yongho', age : '25', isStudent : true }; (위 타입들을 모두 묶을 수 있는 객체 타입)그 외로 undefined, 함수(Function)도 변수의 값으로 올 수 있는 타입이다.
2) 함수
1. 함수에 대한 이해
먼저 아래를 읽어보자.
우리가 하나의 샌드위치를 만들기 위해서는 빵과 각종 재료가 필요하고, 이를 잘 조합해서 하나의 맛있는 샌드위치로 만드는 방법에 대해서 잘 알고 있어야 합니다. 여기서 빵을 적당한 시간 굽고, 양상추를 얼마나 어떻게 자르고, 토마토를 넣을지 넣지 않을지 정하고... 정말 많은 고민을 하게 됩니다.
이렇게 문제를 어떻게 해결할지에 대한 고민을 알고리즘이라 하고 함수는 이러한 문제 해결을 위한 고민을 논리적으로 풀어내는 작업을 하는 하나의 단위입니다.
함수는 기본적으로 아래와 같은 구조를 갖고 있다.
함수는 (컴퓨터에게 일을 시키기 위한) 지시사항의 묶음이다.
입력 ➡ 함수 ➡ 출력의 과정으로 이루어져 있다.
즉, 특정 값을 입력하면 함수의 식을 통해 최종값이 출력되는 형태인 것이다.
함수는 '함수 선언식' 과 '함수 표현식' 으로 나눌 수 있다.
함수 선언식
function anything (input) {
// 컴퓨터에게 시킬 일
}함수 표현식
let anything = function (input) {
// 컴퓨터에게 시킬 일
}여기서 input 은 함수에서 사용 할 특정 값이고 이를 매개변수(Parameter) 라고 부른다.
이는 함수 실행 시 입력에 따라 바뀔 수 있는 변수라고 표현할 수 있다.
(그렇다고 해서 let 과 같은 선언을 해줄 필요는 없다)
위 선어식과 표현식은 같은 식이다. 다만, 식의 형태가 다를 뿐이고 어떤 식을 쓸 지는 여러분의 자유다.
위 개념을 활용해서 함수를 통해 집까지 가는데 걸리는 시간을 계산하는 함수를 만들어봤다.
let timeToGoHome = function (speed, distance) {
let time = distance / speed ;
return time;
}위 식을 해석해보자면 처음 let 선언을 통해 timeToGoHome 이라는 변수를 만들어줬고 함수 식을 값으로 할당했다. 즉, 변수 timeToGoHome 값은 함수 식의 최종 값이 되는 것이다.
이제 변수에 할당 된 함수가 어떤 식을 활용 해 값을 줄 것인지 보면 된다.
목적지까지 가는데 걸리는 시간은 거리 / 속도 이므로
매개변수에 (speed, distance) 즉 속도, 거리를 입력해줬고
그 안의 식은 let time = distance / speed;
time 이라는 변수에 distance / speed 식을 값으로 넣어줬다.
그리고 마지막에 return time 을 통해 변수 time 을 리턴 (값을 반환한다) 해준 모습이다.
그럼 우리는 매개변수에 만약 (20, 100) 이라는 값을 입력 받으면 함수 안의 식을 통해
let time = 100 / 20 ➡ time = 5 라는 값을 얻을 것이고 이 값을
return time 을 통해 이 함수의 최종 값을 리턴(출력)하게 된다.
따라서 변수 timeToGoHome 의 최종값은 5가 된다.
위 식을 활용해 최종값을 5를 출력하는 코드는 아래와 같다.
let timeToGoHome = function (speed, distance) {
let time = distance / speed ;
return time;
}
let myTime = timeToGoHome (20, 100)
console.log (myTime)myTime 변수의 값으로 timeToGoHome 변수에 (20, 100) 라는 매개변수를 넣어준 값을 할당했다.
(let myTime = 5)
그리고 myTime 변수를 console.log 해주면서 myTime 변수에 담긴 timeToGoHome 의 값을 최종적으로 출력하는 모습이다.
