개발자를 꿈꾸며

in 연산자

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

기본형

속성 in 객체명

속성:

속성이나 배열이 온다. 

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

객체명:

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

객체(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);

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

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

변수(Variable)

변수유형 변수이름 = '변숫값';

· 어떤 값(조건, 상황)에 이름을 붙이는 것

▶console창에서, (1~3번을 순서대로 진행할 것)

1. 변수선언(변수 만들기)

변수유형 변수이름;

2. 변수에 값 지정시키기

변수이름; = 변숫값;

3. 결과! 1, 2번이 제대로 적용되었다면,

console.log(변수이름); 입력시 → 지정시킨 변숫값이 출력됨

다만 출력에 반드시 console.log();가 사용되는 것은 아님

▶위 예시의 1, 2번을 한번에 할 수도 있음!

변수유형 변수이름; = 변숫값;

· 변수유형

- 어떤 변수인지

- 예시: let, char,  int, string, double 등

· 변수이름 =변수로 사용할 이름 

· 변숫값

- 예시: 숫자

변수이름(=변수로 사용할 이름) 만들기

▶변수이름(=변수로 사용할 이름) 만들 때 지켜야 할 것

1. 자바스크립트의 식별자는 다음 3개 중 하나여야 함

2. 대문자와 소문자를 구별할 것

· 대문자≠소문자 (서로 다르게 인식한다)

3. '예약어' 사용금지!

· 예시: let, if, for 등

▶변수이름(=변수로 사용할 이름) 만들 때 tip

· camelCase를 사용할 것

- 변수 이름에는 띄어쓰기를 사용할 수 없기 때문에,

첫글자는 → 소문자로,

띄어쓰기 위치의 바로 뒤에 있는 단어의 첫글자는 → 대문자로 표기하면 좋다.

- 예시

goodVariableName (O)

good_variable_name (X)

기타

▶변숫값에 작은따옴표(', ') 사용)

char 이름 = '홍길동';
int 나이 = 1000;

▶문자열일 때(변숫값에 큰따옴표(", ") 사용)

string 인사 = "안녕하세요";

▶예시

올해(2021) 나이 계산하기

//이하 올해(2021) 나이 계산
var currentYear = 2021; //올해 연도 변수선언
var birthYear; //태어난 연도 변수선언
var age; //결과로 출력될 나이 변수선언

birthYear = prompt("태어난 연도는?")
age = currentYear - birthYear + 1; //1=상수(고정값), 우리나라 나이를 기준으로 계산할거라 +1을 상수로 설정함
document.write(currentYear + "년 현재,<br>")
document.write(birthYear + "년에 태어난 사람은 " + age + "세 입니다.")