TIL_170928 객체, 함수

객체 (Object)

  1. pass by reference
    • 기본 자료 형은 값을 복사해서 새로운 참조값을 주지만, 객체는 같은 값을 가리키게 됨
    • 따라서 두개의 객체가 같은 값을 가리키고 있다면, 하나만 변경해도 연동됨
  2. 객체는 이러한 프로퍼티를 포함하는 컨테이너
  3. delete로 삭제 불가
  • 객체는 선언 이후 메모리에 올라감, 따라서 객체를 삭제하고 싶다면 객체명 =”null”로 참조값 을 삭제 가능
  • 그 이유는 values는 primitive data. 즉, immutable. 따라서 참조값을 삭제하고 기존의 value는 가비지 컬렉션을 통해 삭제됨

    Property

  • 프로퍼티는 name: value 로 이루어진 한쌍.

  • 프로퍼티 값은 undefined 제외 모든 값을 가질 수 있음

  • 동적 생성이 가능하다는 기반으로, 객체 자체에는 순서가 없음 (배열과 다름)
  • 이름 생성 시, ‘-‘ 사용 비추 (엔진이 연산자로 착각) 필요시 언더스코어_ 사용
  • 프로퍼티는 동적 생성, 삭제(delete)가 가능 (js특징)
  • 삭제는 프로퍼티에만 가능, 객체 자체에는 불가

Method

  • property의 value가 data가 아닌 함수일 경우 메소드라 칭함
  • 즉, 객체 내부에 묶여있는 함수

객체 생성 방법

  1. 객체 리터럴 (사람의 편의성을 위해 만든 방법)
  2. new Object(); 생성자 함수 (기계가 해석하는 방법)
    • 리터럴을 써도 생성자 함수 방식으로 기계는 인식
  3. 생성자 함수
    • 객체를 만드는 함수 그 자체 (우리가 커스텀 가능)
    • new object와 달리, 내용을 채운 채 생성 가능
    • 즉, 템플릿을 한번 만들어 내고 이후 데이터를 인자로 삽입
    • 같은 객체를 여러번 만들 때 빠르게 생성 가능 (공장화, 생산성 상승)
    • this : 생성자 함수가 만들 객체를 지칭
    • 이렇게 생성된 객체를 ‘인스턴스’라고 부르기도 함

for-in문

  • 객체에 포함된 프로퍼티에 루프 수행 (순회)가능
  • 객체말고 배열에는 사용하지 않도록 (순서 문제 발생 -> 배열은 배열의 요소를 순회하는 for-of문 사용)
  • person[prop]이라고 쓴 이유는 prop이 함수이기 때문에
  • person.prop으로 적을 시 프로퍼티 네임으로 인식 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var person = {
      'first-name': 'Ung-mo',
      'last-name': 'Lee',
      gender: 'male'
    };
    // prop에 객체의 프로퍼티 이름이 반환된다. 단, 순서는 보장되지 않는다.
    for (var prop in person) {
      console.log(prop + ': ' + person[prop]);
    }

함수

  • 매개변수(인자, parameter)설정의 중요성! -> 함수를 통해 재생산 하는 것의 포인트
  • 인수(argument)는 매개변수에 할당되는 값
  • 함수는 매개변수에 함수를 할당할 수 있음 (콜백함수)
  • 함수 선언식과 표현식의 차이점! (하단참조)
  • 인수에 primitive data / object 들어갈때 각 특성을 그대로 따름
    • immutable관련 pass by value or reference.
    • 즉, 원본의 값이 바뀌느냐(obj) 안바뀌느냐(primitive)
    • 바깥에 있는 원본의 값을 바꾸는 것 : 비순수 함수(코드의 예측성이 떨어짐)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//인수의 제곱을 만드는 함수일때
//함수 선언식 방법
function funcName(parameter) {
  console.log('hello, i am' + parameter)
}
//선언식 호출
var variable = funcName('argument(tom)');
console.log(variable);
//-> 함수명으로 부른듯 보이나, 내부적으로는 엔진이 함수명과 동일한 변수를 지정하여 읽기 때문에, 호출할때는 함수명(=변수명)으로 호출한다. 따라서 아래와 같음
console.log(funcName('argument(tom)')); //Hello, I am Tom
//함수 표현식방법 (무기명)
var variable = function(parameter) {
  console.log('hello, i am' + parameter)
};
//표현식 호출
console.log(variable('argument(tom)')); //Hello, I am Tom

함수 정의방법 3가지

  1. 함수선언식

    • 함수명 생략 불가 (없으면, 호출자체가 불가)
    • 실행 시, 엔진이 함수명과 동일한 변수명을 저장하여 해석(표현식으로 전환되서 해석)
    • 실행 1,2,3(생성/초기화/할당)단계가 한번에 이뤄짐
    • 함수가 밑에서 선언되었어도 위에서 호출이 가능 (but, 비추)
    • 선언식으로 쓰게될경우 스택메모리에 쌓이므로, 성능/퍼포먼스에서 떨어짐 (심할경우, 스택 오버플로우 발생 가능성)

  2. 함수표현식

    • 기명함수 / 익명(무명)함수
    • 익명함수가 일반적
      • 어차피 함수 호출은 변수로 하기때문에 함수의 이름은 중요하지 않음
      • 또한 함수 이름이 지역변수로 사용되기 때문에 이름으로 호출 시 reference Error발생
      • 함수를 변수에 담는 방법이므로, 변수 호이스팅의 법칙을 따름
      • 즉, 함수가 밑에 선언되었다면 위에서 호출할 시 함수가 정의되지 않았다는 에러 발생

  3. function()생성자 함수

  • functino.prototype.constructor 프로퍼티로 접근 가능(프로토타입 체이닝)

반환값 (return)

  • 호출한 코드에게 수행한 결과를 반환
  • 여러개의 값을 반환 가능
  • return구문 생략 시 의미: return undifined; 로 취급

argument property

  • 함수 호출시, 매개변수에 몇개 들어올지 모르는 상태에 인수 로써 의도적으로 사용
  • 들어오는 인수를 배열로 취급함에 따라 대괄호 호출법 사용 가능
    • arguments[0] : 인수로 들어온 0번째 인덱스

length property

  • 함수 정의 시, 매개변수가 몇개인지 매개변수 갯수를 의미

즉시호출함수표현식 (IIFE)

  • 함수를 선언하자마자 호출문(); 바로 사용
  • 이를 표현하고자, function문 전체를 ()로 감싸줌
  • 단 한번만 호출가능
  • 지역변수만을 사용한다는 장점 (전체js를 내부에 넣어놓으면, 전체 코드를 전역변수없이 사용 가능)
  • 익명사용이 일반적

내부 함수

  • 지역함수: 스코프의 조절을 위해 사용

콜백 함수

  • 특정 이벤트가 발생했을 때, 시스템(브라우저)에 의해 호출 (이벤트 핸들러)
  • 즉, 개발자가 명시적으로 호출X, 브라우저에게 호출하라고 시킬 뿐

공부하는 방법

  1. 다른이의 코드를 읽기
  2. 눈으로만 읽기보다, 손으로 쳐가면서 읽기
  3. 헷갈린다면, 한줄 한줄 디버깅하면서 확인하기

채용공고

채용공고를 보면 공부하는 답이 보임

###[우아한형제들 프론트엔드]

  • [언어] HTML(5), CSS, Javascript(최소 ES5) 기본 지식 보유
  • [환경] AWS, Git & Github, HTTP, RESTful API 클라이언트 개발 경험
    • 기본적인 용어정리, 이론을 무시하지말자 (면접에서 중요도가 점차 상승추세)
  • [구조] Javascript MV* 기반 웹앱 개발 및 운영 경험 (Angular, React, Backbone 등)
    • 단순히 프로그램명만 적지 않은 이유: 왜? 그게 필요한지, 왜 쓰는지를 알고 쓰는가?
  • [도구] Grunt, Gulp, Webpack, Browserify 등의 도구 경험자
  • 기획/디자인/운영 등 다양한 직군과 같이 문제를 정의하고 해결책을 찾아나갈 수 있는 협업 능력

오늘의 느낀점

  • 자바스크립트 과정에 들어오면서 강의 후 자습을 하면서도 어떤 방법으로 하는 것이 효율적인지 몰라 조금 헤맨것이 사실. 오늘 강사님의 기본적인 듯 하지만 자신의 진로방향에 맞춘 공부방법에 대한 지침(?)이 많은 도움이 될 것 같다.
  • 자칫 헷갈릴 수 있는 용어들이 많으나, 확실히 복습 예습을 하면서 조금씩 친숙해지니 2번 볼때와 3번 볼때의 이해도가 다르다. 뭐든 꾸준히가 최고인듯!
  • 객체와 함수에 대한 기본지식들은 앞으로 코딩을 할때 생각의 기초가 될 수있으므로 기억하고 기억하자