개발자를 꿈꾸며

in 연산자

명시된 속성이 우측에 명시된 객체에 존재하면 → true를 반환시킨다.

기본형

속성 in 객체명

속성:

속성이나 배열이 온다. 

자세히 말하면 속성의 이름이나, 배열의 인덱스가 온다.

객체명:

사용자가 임의로 사용하고자 하는 객체의 이름을 넣는다.

▶메소드(method)

· 객체(object)와 속성(property)의 관계와 유사한데...

다만 속성과의 차이점은, 객체의 속성 중 함수 자료형인 모습을 메소드라고 한다.

그러니까 함수 형태의 속성을 메소드라고 생각하면 됨!

· 출력시 점 표기법 대신 대괄호 표기법을 사용할 수 있다.

▶기본형

{
  함수명: function () {},
  함수명: function () {},
  함수명: function () {}
}

▶예시1

//변수값에 메소드 입력
let greeting = {
  sayHello: function () {
    console.log('Hello!');
  },
  sayHi: function () {
    console.log('Hi!');
  },
  sayBye: function () {
    console.log('Bye!');
  }
};

//출력
greeting.sayHello();

▶예시1 - 출력된 결과

Hello!

▶예시2

//변수값에 메소드 입력
let greeting = {
  sayHello: function (name) {
    console.log(`Hello! ${name}님!`);
  },
  sayHi: function () {
    console.log('Hi!');
  },
  sayBye: function () {
    console.log('Bye!');
  }
};

//출력
greeting.sayHello('홍길동');

▶예시2 - 출력된 결과

Hello! 홍길동님!

객체(object)와 속성(property)

▶객체(object)

· 객체는 중괄호({})를 통해 만들어짐

▶객체(object)의 속성(property)

· 객체 내부에 있는 값을 속성(property)이라고 한다.

· 구성

속성명(Property Name) + 속성값(Property Value)

아래 예시로 보자면 name: '홍길동' → 요런 것들이 속성(property)에 해당됨

· 객체 안의 속성(property)들은 쉼표(,)로 구분한다.

▶기본형 - 속성

{
  속성명: 속성값,
  속성명: 속성값,
  속성명: 속성값
}

▶예시

{
  name: '홍길동',
  bornYear: 1900,
  isVeryNice: true,
  worstCharacter: null
}

객체(object)의 속성(property)에 접근하기

2가지 방법으로 접근할 수 있다.

1. 점 표기법

2. 대괄호 표기법

1.점 표기법

▶기본형

(objectName.propertyName)
(객체명.앞의객체에속하는속성명)

점 표기법의 단점은

속성명(property name)이 문자열 형식('')인 경우, 해당 속성명을 표기할 수 없다.

▶예시1

//객체(Object)
let gilDong = {
  name: '홍길동',
  'born Year': 1900,
  isVeryNice: true,
  worstHabit: null,
  bestHabit: {
    habitName: '운동',
    habitLevel: '우수함'
  }
};

//점 표기법(objectName.propertyName)
console.log(gilDong.isVeryNice);
console.log(gilDong.bestHabit.habitName);

▶예시1 - 출력된 결과

true
운동

2. 대괄호 표기법

▶기본형

(objectName['propertyName'])
(객체명['앞의객체에속하는속성명'])

대괄호 표기법으로 작성시, 대괄호 내부는 문자열 형식('', 작은 따옴표)으로 나타내야 한다.

점 표기법과 달리

속성명(property name)이 문자열 형식('')이더라도, 해당 속성명을 표기할 수 있다.

단, 그렇다고 작은 따옴표를 연이어 붙이지는 않음. 

그냥 문자열 형식이 아닌 다른 property name들처럼 한 번만 작은 따옴표를 쓰면 된다.

▶예시1

//객체(Object)
let gilDong = {
  name: '홍길동',
  'born Year': 1900,
  isVeryNice: true,
  worstHabit: null,
  bestHabit: {
    habitName: '운동',
    habitLevel: '우수함'
  }
};

//대괄호 표기법(objectName['propertyName'])
console.log(gilDong['isVeryNice']);
console.log(gilDong.bestHabit['habitName']);

console.log(gilDong['born Year']);
console.log(gilDong['born' + ' Year']);

let propertyName = 'name';
console.log(gilDong[propertyName]);

▶예시1 - 출력된 결과

true
운동
1900
1900
홍길동

기존에 있는 속성(property)을 수정, 추가, 삭제하기

▶기존에 있는 속성(property)을 수정 

· 예시1

gilDong.name = '허균';

property를 할당시킬 때 작은 따옴표('')를 잊지 말 것

//객체(Object)
let gilDong = {
  name: '홍길동',
  'born Year': 1900,
  isVeryNice: true,
  worstHabit: null,
  bestHabit: {
    habitName: '운동',
    habitLevel: '우수함'
  }
};

//객체의 속성(property)을 수정
gilDong.name = '허균';
console.log(gilDong.name);

· 예시1 - 출력된 결과

홍길동
허균

▶기존에 없던 속성(property)을 새로 추가

· 예시1

gilDong.nationality = '대한민국';

property를 할당시킬 때 작은 따옴표('')를 잊지 말 것

//객체(Object)
let gilDong = {
  name: '홍길동',
  'born Year': 1900,
  isVeryNice: true,
  worstHabit: null,
  bestHabit: {
    habitName: '운동',
    habitLevel: '우수함'
  }
};

//기존에 없던 속성(property)을 추가
gilDong.nationality = '대한민국';
console.log(gilDong.nationality);

· 예시1 - 출력된 결과

대한민국

▶기존에 있는 속성(property)을 삭제

delete를 이용한다.

· 예시1

delete gilDong.name;
delete gilDong.worstHabit;

//객체(Object)
let gilDong = {
  name: '홍길동',
  'born Year': 1900,
  isVeryNice: true,
  worstHabit: null,
  bestHabit: {
    habitName: '운동',
    habitLevel: '우수함'
  }
};

//기존에 있는 속성(property)을 삭제
delete gilDong.name;
delete gilDong.worstHabit;
console.log(gilDong);

· 예시1 - 출력된 결과

{
  'born Year': 1900,
  isVeryNice: true,
  bestHabit: { habitName: '운동', habitLevel: '우수함' }
}

name속성과 worstHabit속성이 삭제되었다.

이 둘은 undefined처리 된 것임!(중요!!!)

클래스(Class)

· classification의 약자

· 클래스를 통해 이루어지는 코딩을

'객체지향형 프로그래밍(Object Oriented Programming)'이라고 한다. 객체(하나의 묶음)을 지향한다는 의미.

· 구성원이 되는 작은 요소(객체)를 의미

▶예시

class 과일바구니 {
  int 사과;
  int 배;
  int 참외;
}

인스턴스(Instance)

▶클래스이름 인스턴스 = new 클래스이름

· 양쪽에 위치한 클래스이름은 서로 같아야 한다.

클래스선언 + 인스턴스선언

· 클래스선언으로 먼저 정의한 후 → 이를 토대로 인스턴스선언이 이루어진다.

· 주의! 클래스선언과 인스턴스선언은 각각 다른 파일에서 작업해야 한다.

객체지향 프로래밍 특성상, 별도의 파일로 각각 다루어야 하기 때문.

· 클래스이름이 담긴 자바스크립트 파일 이름은 클래스이름과 같아야 한다

즉, 클래스이름 = (선언이 담긴)파일이름

▶분류

▶클래스선언 예시 (파일명: 과일바구니.js)

//이하 클래스선언
class 과일바구니 {
  int 사과;
  int 배;
  int 참외;
}

▶인스턴스선언 예시 (파일명: 뭘담을까.js)

//이하 인스턴스선언
class 뭘담을까 {

과일바구니 바구니1호 = new 과일바구니(); //'바구니1호'라는 인스턴스 생성
  바구니1호.사과 = 3; //사과를 3개 담음
  바구니1호.배 = 2; //배를 2개 담음
  바구니1호.참외 = 5; //참외를 5개 담음

과일바구니 바구니7호 = new 과일바구니(); //'바구니7호'라는 인스턴스 생성
  바구니1호.사과 = 8; //사과를 8개 담음
  바구니1호.배 = 0; //배를 0개 담음
  바구니1호.참외 = 4; //참외를 4개 담음
  
}

▶클래스에 소유권붙이기

· public, private, protected, (없음)

▶리턴(Return)

· 자료형에 속함

· 함수에 부여시킨 파라미터(매개변수)를 가져옴(반환시킴)

· 함수 종료시 리턴 선언으로 끝남

▶예시1

//이하 함수선언
function getTwice() {
  return 2;
}

//이하 함수호출
console.log(getTwice());

console.log(2)와 결과가 같다.

▶예시2

//이하 함수선언
function getTwice(number) {
  return number*2;
}

//이하 함수호출
console.log(getTwice(5));

console.log(2*5)와 결과가 같다.

▶예시3

//이하 함수선언
function getTwice(number) {
  return number*2;
}

let x = getTwice(5);
let y = getTwice(2);

//이하 함수호출
console.log(x*y);

▶예시4

//이하 함수선언
function hello(name) {
  return '안녕하세요, ' + name + '님!';
}

function sum(a, b) {
  return a+b;
}

let a = hello('홍길동');
let b = sum(10, 5);

//이하 함수호출
console.log(a);
console.log(b);

리턴... 진심 정말 헷갈림.

결과가 자꾸 오류로 떠서... 이거 하나에 온종일을 보낸 듯... 허어어.