Sohn SooKyoung

💛💚

1 분 소요

객체

앞에서 함수에 대해서 배웠다. 함수를 사용함으로써 반복을 줄이고 유지, 보수를 쉽게 할 수 있다. 하지만 이런 함수들을 모아서 더욱 가독성을 높이는 것이 객체이다. 요즘 자바를 공부하면서 객체에 대해서 배우고 있다. 객체를 효율적으로 사용한다면 활용도 높고, 가독성 높은 코드를 구현할 수 있다.

1
2
3
4
5
var 객체변수 이름 = {
    "key":"value" ,
    "key2":"value2",
    ...
};
cs


위의 코드는 객체 변수를 위한 기본 문법이다. 객체에 다른 원소를 추가하고 싶다면 객체변수 이름.key = “value”; 이렇게 대입해주면 된다. 또한 key값에 띄어쓰기가 있다면 객체변수 이름[“key”] = “value”; 이렇게 배열 형태로 key값을 설정해주면 된다.

See the Pen js5 by sohnsookyoung (@sooking87) on CodePen.


화면창에 출력하기 위해서는 document.write(); 를 쓰면되고, 객체의 값을 출력하기 위해서는 coworkers.programmer 을 사용해주면 된다. 하지만 지금은 객체 내의 값이 별로 없기 때문에 직접 하나하나 다 출력할 수 있지만, 그 수가 많아지게 된다면 직접 출력하는데는 무리가 생긴다. 이때, 반복문을 사용해서 출력해줄 수 있다.

See the Pen js4 by sohnsookyoung (@sooking87) on CodePen.


위의 Iterate해더 아래는 결국 같은 결과를 출력하고 있지만 반복문을 통해서 훨씬 더 효율적인 코드를 만들었다. 반복문 내의 조건은 coworkers 객체 안에 있는 key값이 변수가 된다. 따라서 값(value)를 출력하고 싶다면 객체변수[key] 를 사용해서 출력해줄 수 있다. 배열에서 인덱스를 통해서 배열의 원소를 하나씩 출력하는 형식과 비슷하다. 하지만 인덱스와 다른 점은 key값은 항상 정수형이 아니라는 것이다. 이런 객체에는 값뿐만 아니라 함수도 들어갈 수 있다. 비슷한 역할을 하는 함수들끼리 묶어서 객체로 정리할 수 있다는 것이다. 함수를 객체에 대입하는 과정은 다음과 같다.

1
2
3
객체변수 이름.함수이름 = function(매개변수) {
    함수 기능 코드;
}
cs


이를 이용해서 객체들의 값을 출력해주는 함수를 객체에 추가해보았다.

See the Pen Untitled by sohnsookyoung (@sooking87) on CodePen.


파일로 쪼개서 정리 정돈

소스코드 > 함수 > 객체 > 파일 순으로 코드를 정리할 수 있다. 파일로 정리하는 방법은 자바 스크립트에 대한 내용만 빼서 따러 .js파일을 만들어 준다. 그 후 src = 파일명.js 를 추가해주면 된다.

See the Pen js_final by sohnsookyoung (@sooking87) on CodePen.


의문점

  1. 함수에서 사용되는 this와 self는 무엇일까?
  2. css파일도 따로 빼서 파일로 정리할 수 있을까? -> 저번에 coffee story 만들어볼 때, 꼭 필요함을 느낌,,,

댓글남기기

참고