항해

항해 1주차 WIL

완두노예 2023. 1. 25. 23:12

JS 함수와 객체, 데이터 타입, 실행 컨텍스트

 

1. 객체

자바스크립트는 객체 기반 프로그래밍 언어이다. 자바스크립트를 구성하는 거의 '모든 것'이 객체이다.

원시형 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체이다.

원시형은 단 하나의 값만을 나타내지만 객체형(참조형)은 다양한 값(원시 값 또는 다른 객체)을

하나의 단위로 구성한 복합적인 자료구조(data structure)이다.

또한 원시형의 값, 즉 원시 값은 변경 불가능한 값(immutable value)이지만 객체형의 값,

즉 객체는 변경 가능한 값(mutable value)이다.

 

(1) 객체의 구성

  • 객체는 0개 이상의 요소(property)로 구성된 집합이다.
  • 요소(property)는 키(key)와 값(value)으로 구성된다.
  • 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티(속성=property) 값이 될 수 있다.

(2) 객체의 프로퍼티(속성)와 메소드

  • 프로퍼티 : 객체의 상태를 나타내는 값(data)
  • 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(bahavior)
  • 자바스크립트의 함수도 객체의 프로퍼티 값으로 사용할 수 있다.
  • 객체의 프로퍼티 값이 함수인 경우를 메소드라고 부른다.
  • 함수는 일급 객체이다.
  • 함수로 객체를 생성하기도 하며, 함수 자체가 객체이기도 하다.
  • 객체는 곧 값이기 때문에 함수는 객체와 동일하게 사용할 수 있다는 의미이다.
  • 따라서 함수는 값을 사용할 수 있는 곳이라면 어디서든지 리터럴로 정의할 수 있다.
  • 그래서 런타임에서 함수 객체로 평가된다.
  • 함수는 객체이지만 일반 객체와 차이가 있다.
  • 일반 객체는 호출 할 수 없지만 함수는 호출 할 수 있다.
  • 그리고 일반 객체에는 없는 함수 고유의 프로퍼티를 소유한다.

2. 함수 : 함수는 하나의 작은 기능 단위로 묶여있으며, 입출력의 형태가 있고, 반복적인 호출을 할 수 있다

함수는 자바스크립트에서 가장 중요한 핵심 개념이다.

또 다른 핵심 개념인 스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성, 메서드, this, 프로토타입, 모듈화 등이 모두 함수와 깊은 관련이 있다.

수학의 함수는 입력을 받아 출력을 내보내는 과정을 정의한 것이다.

프로그래밍 언어의 함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서

하나의 실행 단위로 정의한 것이다.

입력을 받아서 출력을 내보낼 때, 함수 내부로 전달 받은 변수를 매개변수(parameter),

입력을 인수=인자(argument), 출력을 반환값(return value)라고 한다.

또한 함수는 값이며, 여러 개 존재할 수 있다. 그래서 구별하기 위해 식별인 함수 이름을 사용할 수도 있다.

 

2-1 자바스크립트에서 함수란?

  • 함수를 우선 어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블럭으로 이해하면 된다.
  • 함수를 우선 지시사항들의 묶음(과정)으로 이해하면 된다.
  • 함수는 재사용 가능한 영역을 정의하고, 정보영역을 캡슐화하는데 사용되는 구문이다. (여러번 호출 가능)
  • 일반적으로 (입력 – > 함수 – > return – > 출력) 형태를 갖는다.
  • 함수 선언을 위해서는 Keyword, name, paramenter, body 필요하다.

2-2 함수 특징은?

  • 함수는 function 키워드로 시작하고, 실제로는 객체이다.
  • 함수는 정의/생성할 수 있으며, 출력할 수도 있다.
  • 객체의 특성 덕분에 함수를 변수나 배열에 배정할 수 있다.
  • 다른 함수를 호출할 때, 인자를 넘겨 줄 수 있다.

 

2-3 함수 호출

  • 선언 (매개변수 parameter)
  • 호출 (전달인자 argument)

3. 데이터 타입?

데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터 (숫자, 문자열, 불리언 등)의 종류를 말한다.

 

3-1 JS에서 데이터 타입 종류

(1) 원시 타입 (Primitive data type) : 원시 타입의 값은 변경 불가능한 값 (immutable value)이며

      pass-by-value(값에 의한 전달) 이다.

  • String
  • Boolean
  • null
  • undefined
  • symbol (ES6에서 추가됨)
  • Number

(2) 객체 타입 (object / reference type)

  • Object

4. 실행 컨텍스트

  • 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
  • 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념

자바스크립트는 실행 컨텍스트가 활성화되는 시점에 다음과 같은 현상이 발생한다.

  • 호이스팅이 발생한다(선언된 변수를 위로 끌어올린다)
  • 외부 환경 정보를 구성한다
  • this 값을 설정한다.

이로 인해 다른 언어에서 발견할 수 없는 특이한 현상들이 발생한다.

 

4-1 실행 컨텍스트의 구성

실행 컨텍스트는 다음과 같은 것들을 이용하면 call stack에 쌓이게 된다.

  • 전역공간은 자동으로 컨텍스트로 구성된다.
  • 함수를 실행한다.
  • eval()함수를 실행한다.
  • block을 만든다 (ES6+)

일반적으로 함수를 이용한 실행 컨텍스트를 사용한다.

 

var a = 1; // 전역 컨텍스트
function outer () { // outer 컨텍스트
  function inner () { // inner 컨텍스트
    console.log(a); // undefined
    var a = 3;
    console.log(a); // 3
  }
  inner();
  console.log(a); // 1
}
outer();
console.log(a); // 1

위와 같이 코드를 구성했을 때 실행 컨텍스트의 스택은 다음과 같은 순서로 실행된다.

  • 프로그램 실행: [전역컨텍스트]
  • outer 실행: [전역컨텍스트, outer]
  • inner 실행: [전역컨텍스트, outer, inner]
  • inner 종료: [전역컨텍스트, outer]
  • outer 종료: [전역컨텍스트]

그리고 이러한 실행컨텍스트를 구성할 때 생기는 것들이 있다.

  • VariableEnvironment
    • 현재 컨텍스트 내의 식별자(변수)들에 대한 정보
    • 외부 환경 정보
    • 선언 시점의 LexicalEnvironment의 스냅샷(변경사항 반영 X)
  • LexicalEnvironment
    • 처음에는 VariableEnvironment와 같음
    • 변경 사항이 실시간으로 반영됨
  • ThisBinding
    • 식별자가 바라봐야 할 대상 객체

 

15일 일요일부터 16일 월요일까지 미니 프로젝트가 있었다.

밤샘 프로젝트로 진행했다.

우리 조의 주제는 이러했다.

'카페 음료 정하기' 인데, 3가지 선택을 통해 결과적으로 추천하는 커피가 나오는 것.

차가운것/뜨거운것, 달달한것/씁씁한것, 카페인/디카페인 이렇게 3가지 선택지가 있고

차갑고 달달하며 카페인--->카라멜마끼아또

이런식으로 음료를 추천해주는 식이다.

차달카,차씁디,뜨달카,뜨씁디 ...등등

분류하고, 해당하는 음료를 랜덤으로 추천해주는 방식으로 프레임워크를 짰다

예를 들어 차달카에는 카라멜마끼아또, 모카라떼 등등

 

내가 html은 총 9가지를 만들었고 서버는 다른 팀원이 만들었다.

트라이얼코스 때 토이프로젝트를 만들었을 때와 달리 좀 더 복잡했다.

거기다 개인사정까지 더해지고 이미 밤샌상태에서 또 밤새 프로젝트를 진행하려니

내 정신이 내 정신이 아니었다.

ajax 안에 값들, 서버와의 연결이 유난히 헷갈렸고

설정한 이름이 달라서 오류가 생겼었다.

집중못하는 나 대신에 팀원들이 오류를 찾아내고 수정을 반복해나갔다.

팀원들이 고맙게도 오류를 찾아내고 알려주어서 수정하는게 수월했다.

모든걸 완성하고 내 원격 서버하고 연결하는 데에서 문제가 생겨

다른 팀원의 원격 서버를 이용하기로 했다.

무사히 발표를 마치고, 다른 팀원들의 발표를 보면서

대단한 사람들이 많음을 느꼈고, 이번처럼 내가 팀원들의 발목을 붙잡아선 안되겠다는 

다짐을 했다.

 

46시간 밤샌뒤에 16시간동안 죽은듯이 잠만잤다.

16시간 뒤에 일어나 밥을 2.5인분을 먹고 다시 코딩을 시작했다.

 

본격적인 주특기가 시작하는 주차로, 노션에 있는 주교재와 부교재로 공부를 시작했다. 

바로 실전에 들어가는 강의를 들었을 땐 알것같았는데

이론을 접하니 다시 모르겠다.

알았는데요 몰랐습니다 ..허헛

일단 낯선 용어때문에 더더욱 글이 이해가 안되었다.

모르는 단어를 찾아보니 해설속에 모르는 단어와 뜻이 있어 또 찾고 

반복하다 보니 내가 뭘 보고 있는거지 더 혼란스러웠다

매니저님께 조언을 구해보니 일단 큰 맥락을 보라고 하셨다.

 

아직까지도 모르는게 절반 이상이고 내가 이해한게 이 뜻이 맞을까 의심이 들지만

전체적인 큰 틀을 보려고 노력중이다.

공부할 때마다 TIL에 세세히 적고 모르는건 모른다고 표시를 해놓았다.

다음날 다시 보니 무슨 뜻인지 알것같은 경우도 있기에, 일단 표시해놓고 지나가는 중이다.

 

다음 주에는 전주보다 좀 더 알고있는 주가 되길.