SEB Section 1 변수, 타입, 함수, 조건문

2021-12-14 6 분 소요

1. 변수

변수란?

변수는 상황에 따라 변할 수 있는 값
선언은 let 변수명;
- 변수명 == 식별자
할당은 변수이름 = '할당값';
- 할당값 == 데이터

변수 작성시 유의할 점

변수 이름에 공백을 주면 안된다.
JS 내장 되어 있는 함수의 이름을 사용 하면 안된다.
변수와 할당값은 카멜케이스로 작성한다.

변수의 선언

let 블록 범위(scope) 지역 변수를 선언. 추가로 동시에 값을 초기화.
const 블록 범위 읽기 전용 상수를 선언.

변수의 할당

변수의 할당은 식별자에 데이터를 저장 한다.
변수가 할당을 안하면 undifined 라는 타입이 됨.

변수에 데이터 할당 과정

선언 과정

메모리에서 비어있는 공간을 확보하고 그 공간에 이름을 설정하는 것
할당 과정

a라는 이름을 가진 주소를 검색해서 그곳에 데이터를 할당 하는 것
실제로는 해당 위치에 데이터를 직접 저장 하는 것은 아니다.

변수 영역에서 빈 공간을 확보
확보한 공간의 식별자를 지정
데이터 영역의 빈 공간에 데이터를 저장
변수 영역에서 식별자 검색
앞서 저장한 문자열의 주소를 변수 영역의 공간에 대입

왜 변수 영역에 값을 직접 대입하지 않고 데이터 영역의 주소값을 가져오는 것일까?

이유는 데이터 변환을 자유롭게 할 수 있게 함과 동시에 메모리를 더욱 효율적으로 관리 하기 위함

기본형 데이터와 참조형 데이터

기본형 데이터

기본형 데이터는 모두 불변값
변수와 상수를 구분 하는 성질은 변경 가능성이다.
변수와 상수를 구분 짓는 변경 가능성의 대상은 변수 영역의 메모리
불변성 여부를 구분할 때의 변경 가능성의 대상은 데이터 영역의 메모리

기본형 데이터 할당 과정

const a = "abc";
a = a + "def";

const b = 5;
const c = 5;
b = 7;

변수 a에 문자열 ‘abc’를 할당 했다가 뒤에 ‘def’를 추가하면 기존의 ‘abc’가 ‘abcdef’로 바뀌는 것이 아님
새로운 문자열 ‘abcdef’를 만들어 그 주소를 변수 a에 저장한다.

즉, ‘abc’와 ‘abcdef’는 완전히 별개의 데이터
변수 b에 5를 할당 하게 되면 컴퓨터는 데이터의 영역에서 5를 찾고, 없으면 데이터 공간 하나를 만들어 5를 저장
변수 c에도 5를 할당 하는데, 이미 데이터 영역에 5가 있으므로 주소를 재활용 한다.
변수 b를 7로 바꾸려고 하면, 기존의 5를 7로 바꾸는 것이 아닌 데이터 영역에 7를 찾아보고 있으면 주소를 재활용 한다. 없으면 새로운 메모리 공간을 만들어 7 저장하고 b에 저장한다.

한 번 만든 데이터는 변하지 않는다(불변값)

참조형 데이터

참조형 데이터는 모두 가변값이 아니라 설정에 따라 불변값으로 변할 수 있다.

참조형 데이터 할당 과정

const obj1 = {
    a : 1,
    b : 'bbb
}

변수 영역에 빈공간을 확보하고 그 주소의 이름을 지정
데이터 영역에 데이터를 저장 하려고 보니 여러 개의 프로퍼티로 이뤄짐 객체 안의 프로퍼티의 데이터를 저장 하기 위해 별도의 변수 영역을 만들어 주소를 데이터 영역의 공간에 저장
프로퍼티의 변수 영역에 프로퍼티 이름을 저장한다.
데이터 영역에서 데이터를 검색을 해보고, 없으면 임의의 공간에 데이터를 저장 하고, 프로퍼티 영역에 주소 값을 저장.

변수 복사

기본형 데이터는 불변성을 띄고, 참조형 데이터는 가변성 이라는 특징을 띈다고 했다.
그렇다면 기본형 데이터와 가변형 데이터의 차이점을 알아보자.

기본형 데이터와 참조형 데이터의 복사 비교

var a = 10;
var b = a;

var obj1 = { c: 10, d: "ddd" };
var obj2 = obj1;

먼저 기본형 데이터를 보자. 첫번째 줄에서 변수 영역에서 빈공간 @1001를 확보 한 후, 식별자 a로 지정했다. 데이터 영역에서 숫자 10을 검색한 후, 없으므로 빈 공간 @5001에 저장 한 다음 이 주소를 @1001에 넣었다.
변수 영역에 빈 공간 @1002를 확보한 후, 식별자 b를 지정했다. 이제 식별자 a를 검색 한 후 그 값을 찾아야 한다. @1001에 저장된 값인 @5001을 들고 @1002에 값으로 대입한다.
참조형 데이터를 보면, @1003에 식별자 obj1로 지정한다. 데이터 영역의 빈 공간 @5002를 확보 한 후, 데이터 영역에 담아야 하므로, 별도의 변수 영역을 만들어 @7103 ~ 을 확보해 그 주소를 저장한다. @7103에 c를 담고, @7104에 d를 담는다. 다음 c에 대입할 값 10을 데이터 영역에서 검색을 한다. @5001에 이미 10이 있으므로 그 주소를 @7103에 연결을 한다. d 또한 ‘ddd’라는 문자열을 검색 한다. ‘ddd’라는 문자열이 데이터 영역에 없으므로, @5003의 주소에 ‘ddd’를 담은 다음 그 주소를 @7104와 연결한다.
4번째 줄은 변수 영역에 빈 공간 @1004를 확보 한후 식별자를 obj2로 저장한다. obj1을 검색 한 후 그 값인 @5002를 @1004에 연결한다.
변수를 복사하는 과정은 기본형 데이터와 참조형 데이터 모두 같은 주소를 바라보게 되는 점에서 동일하다.
복사 과정에서는 동일하지만 데이터 할당 과정에서 이미 차이가 있기 때문에 변수 복사 이후의 동작에도 큰 차이가 발생한다.

(객체의 프로퍼티를 변경했을 때)

var a = 10;
var b = a;

var obj1 = { c: 10, d: "ddd" };
var obj2 = obj1;

b = 15;
obj.c = 20;

6번째 줄에서 데이터 영역에 15의 값이 없으므로 새로운 공간 @5004에 저장하고, 그 주소를 b의 주소를 찾아 저장한다.
7번째 줄에서는 변수 영역에 20이라는 값이 없으므로 새로운 공간 @5005에 저장하고, 그 주소를 든 채로 변수의 영역에서 obj2를 찾고(@1004), obj2의 값인 @5002가 가리키는 변수 영역에서 다시 c를 찾아(@7103) 그곳에 @5005를 대입한다.
기본형 데이터를 복사한 변수 b의 값을 바꿨더니, @1002의 값이 달라진 반면, 참조형 데이터는 변하지 않았다.
즉 변수 a와 b는 서로 다른 주소를 바라보게 됐으나, 변수 obj1과 변수 obj2는 여전히 같은 객체를 바라보고 있는 상태다.
이 결과가 기본형과 참조형 데이터의 가장 큰 차이점 이다.
어떤 데이터 타입이든 변수에 할당하기 위해서는 주솟값을 복사해야 하기 때문에, 엄밀히 따지면 모든 데이터 타입은 참조형 데이터일 수 밖에 없다.
다만 기본형은 주솟값을 복사하는 과정이 한 번만 이뤄지고, 참조형은 한 단계를 더 거치게 된다는 차이가 있다.

(객체 자체를 변경했을 때)

var a = 10;
var b = a;

var obj1 = { c: 10, d: "ddd" };
var obj2 = obj1;

b = 15;
obj.c = { c: 20, d: "ddd" };

객체 자체를 변경했을 때는, 데이터 영역의 새로운 공간에 새 객체가 저장되고 그 주소를 변수 영역의 obj2위치에 저장한다. 객체에 대한 변경임에도 값이 달라지게 된다.
즉 참조형 데이터가 ‘가변값’이라고 설명할 때의 ‘가변’은 내부의 프로퍼티를 변경할 때만 성립한다.

2. 타입

타입 이란?

각각의 데이터에 대한 데이터 형을 정해주는 것이다.

타입의 종류

6가지 기본형 (원시 데이터 형)
1. Boolean : true 와 false
2. null : null 값을 나타내는 키워드.
3. undifined : 값이 저장 되어 있지 않은 최상위 속성.
4. Number : 정수 또는 실수형 숫자.
5. String : 문자열
6. Symbol : 인스턴스가 고유하고 불변인 데이터 형.
참조형
1. 객체
2. 배열
3. 함수
4. 날짜
5. 정규표현식

어떤 기준으로 나눠지는가?

무엇을 복제를 하는가?
- 기본형 : 값이 담긴 주솟값을 바로 복제
- 참조형 : 값이 담긴 주솟값들로 이루어진 묶음을 가르키는 주솟값을 복제
불변성
- 기본형 : 불변성 o
- 참조형 : 불변성 x

3. 함수

함수를 왜 사용하는가?

반복적으로 실행되는 일이 있을 경우, 함수를 사용한다.

함수 란?

어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록
함수는 항상 출력값을 반환!

function getTriangleArea(base, height) {
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

console.log(getTriangleArea(2, 4));

함수 내부에서 retrun 값이 있어야 출력값이 생김

return 값이 없으면 undifined가 나옴.

함수 선언 방법

함수 선언식

function getTriangleArea(base, height) {
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

console.log(getTriangleArea(2, 4));

함수 표현식

const getTriangleArea =  getTriangleArea(base, height) {
    let triangleArea = (base * height) / 2;
    return triangleArea;
}

화살표 함수

const getTriangleArea = function (base, height) {
  let triangleArea = (base * height) / 2;
  return triangleArea;
};

만약 함수의 본문(body)에 return 문만 있는 경우, return과 {} 중괄호를 생략 가능 return 문에서 소괄호를 사용 가능 만약 함수 내의 표현식이 2주 이상인 경우, return과 {} 중괄호를 명시적으로 사용

함수의 호출

매개 변수 : getTriangleArea(base, height)
전달 인자 : getTriangleArea(2,4);

4. 조건문

조건문 이란?

어떠한 조건을 판별하는 기준을 만드는 것
조건을 판별하기 위해서는 비교 연산자를 사용함
조건에 해당되면 true 조건에 해당되지 않으면 false가 된다.
다양한 비교 연산자 가 있다.
- ===, !== 의 의미는 타입, 값 까지 같은 것을 의미*

조건문 예시

if(조건 1) {
  // 조건 1이 통과할 경우
} else if(조건 2) {
  // 조건 1이 통과하지 않고
  // 조건 2가 통과할 경우
} else {
  // 모든 조건이 통과하지 못 한 경우
}

조건에는 Boolean 을 결과가 나오는 표현식이 들어감

논리 연산자

두가지 조건이 한번에 적용되는 경우 논리 연산자를 사용한다.
&& -> and / || -> or
앞에 ! 가 붙으면 반전 시킨다.
falsy 값
- false
- null
- undefined
- 0
- NaN
- ’’

Twitter Facebook LinkedIn

Jihun

SEB Section 1 변수, 타입, 함수, 조건문

1. 변수

변수란?

변수 작성시 유의할 점

변수의 선언

변수의 할당

변수에 데이터 할당 과정

기본형 데이터와 참조형 데이터

기본형 데이터

기본형 데이터 할당 과정

참조형 데이터

참조형 데이터 할당 과정

변수 복사

기본형 데이터와 참조형 데이터의 복사 비교

2. 타입

타입 이란?

타입의 종류

어떤 기준으로 나눠지는가?

3. 함수

함수를 왜 사용하는가?

함수 란?

함수 내부에서 retrun 값이 있어야 출력값이 생김

함수 선언 방법

함수의 호출

4. 조건문

조건문 이란?

조건문 예시

논리 연산자

공유하기

댓글남기기

참고

[Jest] 경로 설정

Jest_mock

[weathervely 7] 유저 체감온도 로직

[weathervely 6] 구글 vision ai