프론트 공부/JavaScript와 모던 JS

JavaScript의 객체와 배열.

홍구리당당 2023. 10. 18. 13:38

0. 오늘의 배울 것

JS의 모든 것은 객체로 이루어져있다!!

js의 모든 것은 객체로 이루어져있다. js를 이해하는 데에 가장 중요한 키워드인 객체(배열이 아닌 것)와 배열에 대해 알아보자.

배열도 객체긴하지만 배열과 일반 객체는 약간의 차이가 있다. 이 차이점에 대해서도 잘 알아야 한다.

1. 객체와 프로퍼티

변수가 하나의 값을 담는 상자라면, 객체란 하나의 큰 상자다!! 객체라는 하나의 상자 안에 여러 값을 넣을 수 있다.

// 중괄호 하나가 객체 하나.
{
    "my name": 'hongjw',
    bornYear: 2000,
    isVeryNice: true,
    pet:{
        name: 'hellen',
    }
}

여기서 brandName 같은 걸 key, 코드잇 같은 걸 value 라고 하며 이렇게 키와 밸류 한 쌍을 객체의 속성 이라고 한다. 그래서 키를 프로퍼티 이름, 밸류를 프로퍼티 값이라고도 한다. 객체 하나에 여러 개의 키-밸류 쌍을 넣을 수 있다.

키 이름을 지을 때 주의할 점!!

속성 이름을 지을 때, 첫 글자는 반드시 문자, 밑줄, 달러 기호 중 하나로 시작하자. 숫자는 맨 앞에 못 옴!!
속성 이름을 지을 때, 띄어쓰기나 하이픈은 금지.
만약 따옴표로 속성 이름을 묶어준다면 띄어쓰기 쓸 수는 있다.
만약 따옴표로 속성 이름을 묶어준다면 숫자를 맨 앞에 쓸 수는 있다.

2. 객체 다루기

객체를 다루기 위해 객체에 이름을 줘야 한다.

// 객체에 hong 이라는 이름을 주자.
let hong = {
    name: 'hongjw',
    bornYear: 2000,
    isVeryNice: true,
    pet:{
        name: 'hellen',
    }
};

이제 이 객체에서 속성 값을 가져오려면 두 가지 방법이 있다.

점 표기법: 그러나 속성 이름에 띄어쓰기, 하이픈 등을 넣었다면 속성 이름을 따옴표로 묶어도 점 표기법을 쓸 수 없다..

let hong = {
    "my name": 'hongjw',
    bornYear: 2000,
    isVeryNice: true,
    pet:{
        name: 'hellen',
    }
};

console.log(hong.bornYear);
console.log(hong.pet.name);

// 불가능!!
// console.log(hong."my name");

대괄호 표기법: 점 표기법보단 귀찮아도 속성 이름을 유연하게 짤 수 있다는 장점이 있다.

let hong = {
    "my name": 'hongjw',
    bornYear: 2000,
    isVeryNice: true,
    pet:{
        name: 'hellen',
    }
};


console.log(hong["my name"]);

let name = "my name";
console.log(hong[naame]);

점과 대괄호 표기법을 섞을 수도 있다.

let hong = {
    "my name": 'hongjw',
    bornYear: 2000,
    isVeryNice: true,
    pet:{
        name: 'hellen',
    }
};

console.log(hong.pet["name"]);

만약 존재하지 않는 속성의 값을 가져오려 하면 에러는 안 나고 undefined가 출력된다. 속성 값을 가져올 때 내가 원하는 값이 안 나오면 속성 이름을 잘못 썼는지 체크해보자.

객체의 프로퍼티 값을 수정하려면 그냥 다시 삽입하면 된다.

let hong = {
    "my name": 'hongjw',
    bornYear: 2000,
    isVeryNice: true,
    pet:{
        name: 'hellen',
    }
};

hong['my name'] = "HONG JW"; // 값 수정
hong.hobby = "computer programming"; // 새로운 속성 삽입
delete hong.pet; // 속성 삭제

객체 안에 내가 찾는 프로퍼티가 있는지 확인하려면? in 키워드를 쓰자.

// in 키워드를 써서도 확인할 수 있다. 값이 있으면 참으로 나온다!
console.log("name" in hong);

3. 객체와 메소드

사실 메소드와 함수는 엄연히 다른 말이다. 함수는 어디 속해있지 않고 단독적으로 정의된 모듈이기에 그냥 호출해서 쓸 수 있다. 반면 메소드는 객체 안에 속해있는 함수이다. 함수와 메소드 둘 다 공통적으로 코드를 실행하는 기능이지만, class(객체) 에 종속되어있는가, 아닌가의 여부에 따라 불리는 형태가 다른 것이다.

예시.

// 함수
function hello(){
    console.log("hello!");
}

const myObj = {
  // 메소드. myObj 객체에 종속되어있다. 
    hello: function(){
        console.log("hello!");
    }
}

위의 예시처럼, 여러 비슷한 기능의 메소드를 객체에 넣을 수가 있다. 메소드를 활용하면 함수 이름 중복도 피할 수 있고 객체에 집중해서 고유 동작을 만들 수도 있기 때문이다! 또한 각 메소드를 객체에 맞게 구현하므로 코드가 의미있어진다.

메소드를 호출할 때에도 마찬가지로 점 표기법, 대괄호 표기법 둘 다 쓸 수 있다.

let greetings = {
  sayHello: function (name) {
    console.log(name);
  },
  sayHi: function (name) {
    console.log(name);
  },
  sayBye: function (name) {
    console.log(name);
  },
};

greetings.sayHello("hellen");
greetings["sayHi"]("hellen");

4. for in 반복문을 객체에 활용해보기.

for in 은 객체의 프로퍼티 key를 순회하는 반복문 이라 하는데, 배열도 객체의 일종이기 때문에 배열에서 사용할 수 있다. js에서 배열은 key 값으로 인덱스, value 값으로 각 인덱스 위치의 값을 가진다. (그래서 배열을 객체로 형변환할 때 프로퍼티 속성 이름으로 자동으로 0, 1, 2, ... n-1 인덱스가 붙는다.)

let hong = {
    name: 'hongjw',
    bornYear: 2000,
    isVeryNice: true,
    pet:{
        name: 'hellen',
    }
};

for (let key in hong) {
  console.log(key);
  console.log(hong[key]);
}

for in 문에서 주의할 점!!!

일반적으로 객체에 추가되는 프로퍼티 순으로 for in 문이 실행되지만, 프로퍼티 네임 중 정수형이 있을 땐 정수를 오름차순으로 번저 정렬한 후 나머지 프로퍼티를 추가로 읽는다. (굳이 for in 안 써도 그냥 자동으로 정렬된 채로 추가됨.)

이는 정수형 프로퍼티 이름을 따옴표로 묶어서 string형으로 처리해도 그렇다.

let object = {};
object["2"] = "나";
object["1"] = "가";

// 이렇게 하면 2를 먼저 넣었는데도 1이 먼저 출력됨.

5. 배열은 뭘까?

객체는 여러 각기 다른 프로퍼티들이 있을 때 효과적이다. key와 value 쌍으로 하나의 객체 안에 여러 값을 넣으며 그 value 값으론 여러 자료형이 들어갈 수 있다. 그런데 만약 프로퍼티 자료형이 모두 같다면 , 그리고 각 요소의 순서가 중요하다면 배열을 활용하는 게 나을 수 있다..

// 일반 객체는 중괄호로 만들고, 배열은 대괄호로 만든다.
let classMate = ["Hong", "Kim", "Park", "Lee"];

배열의 각 원소들에는 순서가 붙어있다. index라고 하고, 이 index를 통해 각 원소에 접근하는 것을 인덱싱한다고 한다.

let classMate = ["Hong", "Kim", "Park", "Lee"];
console.log(classMate[2]);
// 이러면 Park이 출력된다.

배열도 하나의 객체로, console.log(typeof classMate); 치면 object라고 출력된다. 그래서 배열 안에도 여러 메소드들이 있다!!!

let classMate = ["Hong", "Kim", "Park", "Lee"];

// 배열 길이 알려주는 length
console.log(classMate.length);
console.log(classMate["length"]);

// 배열에 값 수정하거나 넣기
classMate[3] = "Seong";
classMate[4] = "Kang";

// 배열에 값 삭제하려는데 delete 명령어를 쓰면 값만 삭제돼서 empty 요소로 그 자리 그대로 남아있다. 
//delete classMate[2];

만약 length가 5인데 갑자기 8번 원소를 넣는다면?

배열의 6, 7번 원소는 empty로 생성되면서 length도 8이 돼버림. 주의하자!!!

배열 메소드 splice, shift, unshift, pop, push 활용하기.

let classMate = ["Hong", "Kim", "Park", "Lee"];

// 1 포함 1 인덱스 이후의 모든 값 삭제. 0만 남음.
members.splice(1);

// 1 포함 1 인덱스 이후의 2개 값 삭제. 0 3 4 5
members.splice(1, 2);

// 1 삭제하고 그 자리에 6, 7 넣음. 0 6 7 3 4 5
members.splice(1, 1, 6, 7);

// 삭제 안하고 1번 인덱스에 6 넣음. 0612345
members.splice(1, 0, 6);

// 1번 인덱스 값 6으로 수정
members.splice(1, 1, 6);

// 배열 첫 요소 삭제
members.shift();

// 배열 마지막 놈 삭제
members.pop();

// 배열 맨 처음에 값 추가.
members.unshift("value");

// 배열 맨 마지막에 값 추가.
members.push("value");

// 배열에서 특정 값 위치 찾기
members.indexOf("value"); // value의 위치를 알려줌.

// 배열에 중복 값들이 있다면 중복 중 가장 끝에 있는 원소 위치를 리턴.
members.lastIndexOf("value");

// 배열에 특정 값이 있는지 확인
members.includes("value");

// 배열 순서 뒤집기
members.reverse();

indexOf 함수로 특정 값을 찾을 때 값이 없다면 -1, 값이 여러 개라면 가장 먼저 있는 값의 인덱스를 리턴한다.

indexOf는 해당 값의 위치를 리턴하고, includes는 그냥 값이 있는지 없는지만 체크한다.

for of 반복문

for in 이 객체의 key를 가져왔다면, for of는 객체의 value를 가져온다.

for(변수 of 배열){
    동작 코드.
}

for (let element of members){
    console.log(element);
}

다차원 배열

배열에도 객체처럼 안에 딱히 제한된 자료형이 없기 때문에, 배열 안에 배열을 넣을 수 있다. 이를 다차원배열이라 한다.

// 이차원 배열
let twoDimension = [
  [1, 2],
  [3, 4],
];

6. 배열과 객체 차이 정리

객체

중괄호로 만든다.
함수들을 객체 속성 값으로 넣을 수 있다.
for in 문을 쓴다.
- for in 문이니까 >> 속성 유무 찾을 때엔 in을 쓰자!
삭제할 때엔 delete
length 함수 없다!~

let object = {
    A:'a';
};

let greetings = {
    sayHello: function(name){console.log(name);},
    sayHi: function(name){console.log(name);},
    sayBye: function(name){console.log(name);}
};

for (let key in codeit){
    console.log(key);
    console.log(codeit[key]);
}if (key in object){}

delete object['A'];

배열

대괄호로 만든다.
array.splice, pop, shift, unshift, push, inclues
for of 문을 쓴다.
array.length 혹은 array['length'] 로 길이 파악.

let array = [a, b, c];

저작자표시 비영리 변경금지

'프론트 공부 > JavaScript와 모던 JS' 카테고리의 다른 글

모던 자바스크립트의 유용한 문법 (0)	2023.10.18
JavaScript와 이벤트 다루기 (2)	2023.10.18
JavaScript로 HTML 다루기. (1)	2023.10.18
JavaScript의 자료형 (2)	2023.10.17

현재글JavaScript의 객체와 배열.

홍장군의 기록

JavaScript의 객체와 배열.

0. 오늘의 배울 것

JS의 모든 것은 객체로 이루어져있다!!

1. 객체와 프로퍼티

2. 객체 다루기

객체의 프로퍼티 값을 수정하려면 그냥 다시 삽입하면 된다.

객체 안에 내가 찾는 프로퍼티가 있는지 확인하려면? in 키워드를 쓰자.

3. 객체와 메소드

4. for in 반복문을 객체에 활용해보기.

for in 문에서 주의할 점!!!

5. 배열은 뭘까?

배열 메소드 splice, shift, unshift, pop, push 활용하기.

for of 반복문

다차원 배열

6. 배열과 객체 차이 정리

객체

배열

'프론트 공부 > JavaScript와 모던 JS' 카테고리의 다른 글

'프론트 공부/JavaScript와 모던 JS'의 다른글

티스토리툴바

JavaScript의 객체와 배열.

0. 오늘의 배울 것

JS의 모든 것은 객체로 이루어져있다!!

1. 객체와 프로퍼티

2. 객체 다루기

객체의 프로퍼티 값을 수정하려면 그냥 다시 삽입하면 된다.

객체 안에 내가 찾는 프로퍼티가 있는지 확인하려면? in 키워드를 쓰자.

3. 객체와 메소드

4. for in 반복문을 객체에 활용해보기.

for in 문에서 주의할 점!!!

5. 배열은 뭘까?

배열 메소드 splice, shift, unshift, pop, push 활용하기.

for of 반복문

다차원 배열

6. 배열과 객체 차이 정리

객체

배열

'프론트 공부 > JavaScript와 모던 JS' 카테고리의 다른 글

'프론트 공부/JavaScript와 모던 JS'의 다른글

관련글

티스토리툴바