객체를 사용하면 관련있는 데이터들을 묶어 그룹화 할 수 있기 때문에 데이터 관리를 편하게 할 수 있습니다👍🏻
이렇게 연결되어있는 객체들에서 필요한 값을 꺼내 쓰려면 어떻게 해야할까요?.?
자바스크립트의 객체 property에 접근하는 방법에 대해 공부했습니다😊
1. 객체 프로퍼티 접근 방법
객체 프로퍼티에 접근하는 방법은 .(점) 표기법, [](대괄호) 표기법 2가지가 있습니다.
- 점 표기법 (Dot Notation)
: 일반적이고 빠르며 간편하지만, 식별자 규칙을 따르기 때문에 프로퍼티명에 따라 제약이 생길 수 있음
➡️ 프로퍼티명이 유효한 식별자일 때만 사용 가능하기 때문에, 프로퍼티명에공백 / 특수문자가 포함된 경우에는 대괄호 표기법을 사용해야함
- 대괄호 표기법 (Bracket Notation)
: 프로퍼티명이 유효한 식별자가 아니거나 / 동적으로 사용해야할 때 유용함,
변수 접근이 우선시 됨 (변수 접근 방법에 영향을 받지 않는 점 표기법과 반대됨, 자세한 예시는 아래 대괄호 표기법에서 설명하겠습니다 ㅎㅎ)
1-1. (점). 표기법
- 객체의 프로퍼티 접근
let object = { language: "javascript" };
console.log(object.language);object.language를 출력하면, 객체 object의 key값인 language의 value값인 javascript가 출력됩니다.
- 배열의 요소가 객체일 경우, 그 객체 속 프로퍼티에 접근
let arr = [{ language: "javascript" }, { language: "python" }, { language: "c++" }]
console.log(arr[0].language);arr[0].language를 출력하면, 배열 arr의 0번 요소인 객체의 key값인 language의 value값인 javascript가 출력됩니다.
- 중첩된 객체 속 객체의 프로퍼티에 접근
let object = {
language: "korean",
programing: { language: "javascript" },
};
console.log(object.programing.language);object.programing.language를 출력하면, 객체 object의 요소 중 하나인 programing 프로퍼티의 key값인 language의 value값인 javascript가 출력됩니다.
1-2. [ ] 표기법
대괄호 표기법에는 아래 2가지 방법이 존재합니다.
1. 객체의 key값을 사용하는 문자열 접근방법
2. 변수를 만들어 사용하는 변수 접근 방법
또, 위에서 언급했듯이 대괄호 표기법은 변수 접근을 먼저 처리합니다.
let language = "programing";
let object = {
language: "korean",
programing: "javascript"
};
console.log(object.language); //문자열 접근 방법
console.log(object[language]); //변수 접근 방법다음처럼 점 표기법으로 object.language을 출력하면 korean이 나옵니다.
하지만 대괄호 표기법은 object[language]을 출력하면 language = programing으로 처리해서 javascript을 출력합니다.
- 객체의 프로퍼티 접근
let object = { language: "javascript" };
let property = "language";
console.log(object["language"]); //문자열 접근 방법
console.log(object[property]); //변수 접근 방법object["language"]를 출력하면, 객체 object의 key값인 language의 value값인 javascript가 출력됩니다.
object[property]를 출력하면, 객체 object의 key값인 language를 가리키는 property의 value값인 javascript가 출력됩니다.
- 배열의 요소가 객체일 경우, 그 객체 속 프로퍼티에 접근
let arr = [{ language: "javascript" }, { language: "python" }, { language: "c++" }]
let property = "language";
console.log(arr[0]["language"]); //문자열 접근 방법
console.log(arr[0][property]); //변수 접근 방법arr[0]["language"]를 출력하면, 배열 arr의 0번 요소인 객체의 key값인 language의 value값인 javascript가 출력됩니다.
arr[0][property]를 출력하면, 배열 arr의 0번 요소인 객체의 key값인 language를 가리키는 property의 value값인 javascript가 출력됩니다.
- 중첩된 객체 속 객체의 프로퍼티에 접근
let object = {
language: "korean",
programing: { language: "javascript" },
};
let pOp = "programing";
let property = "language";
console.log(object["programing"]["language"]); //문자열 접근 방법
console.log(object[pOp][property]); //변수 접근 방법
console.log(object["programing"][property]); //혼합 방법object["programing"]["language"]를 출력하면, 객체 object의 요소 중 하나인 programing 프로퍼티의 key값인 language의 value값인 javascript가 출력됩니다.
object[pOp][property]를 출력하면, 객체 object의 요소 중 하나인 programing을 가리키는 pOp 프로퍼티의 key값인 language를 가리키는 property의 value값인 javascript가 출력됩니다.
object["programing"][property]를 출력하면, 객체 object의 요소 중 하나인 programing 프로퍼티의 key값인 language의 value값인 javascript가 출력됩니다.
2. 안전한 객체 프로퍼티에 접근 방법
외부에서 제공된 키 값으로 객체 프로퍼티에 접근할 때는 보안을 고려해야합니다.
보안성을 높일 수 있는 접근 방법에 대해 알아보았습니다.
- 프로퍼티 존재 여부 검증하기
Object.hasOwnProperty()메소드를 사용해 객체가 해당 키를 가지고 있는지 확인할 수 있습니다.
이때 객체가 직접 가지고 있는 키만 인정하고, 프로토타입을 통해 상속받은 키는 인정되지 않습니다.
let user = { name: "songhee", age: 25 };
Object.prototype.greet = "Hi"
let wantedKey = "name";
console.log(user.hasOwnProperty(wantedKey)) // true, 직접 소유한 키임
console.log(user[wantedKey]); // "songhee"
wantedKey = "greet";
console.log(user.hasOwnProperty(wantedKey)); // false, 상속받은 키임
console.log(user.greet()); // "Hi"
- 프로토타입이 없는 객체를 통해 프로토타입 오염 방지
Object.create(null)메서드를 통해 프로토타입이 없는 객체를 생성해, 밖에서 기본 객체의 동작이 변경되는 것을 막을 수 있습니다.
이렇게 동작을 막으면 프로토타입 오염을 방지할 수 있어 보안성이 올라갑니다.
let user = Object.create(null);
user.name = "songhee";
console.log(user.name); // songhee
- 화이트리스트를 사용해 외부 입력을 통한 프로퍼티 접근 제한
화이트리스트: 허용된 항목들을 정의하는 목록, 안전한 프로퍼티만 접근을 허용하고 통제되지 않은 접근은 방지할 수 있음
사용자에게 입력받은 데이터를 객체의 키로 사용할 때는 보안성 유지에 더욱 집중해야합니다.
이때 알려지고 허용된 프로퍼티에만 접근을 허용하고, 나머지는 제한시켜 데이터 노출 / 변경을 방지할 수 있습니다.
ex) 사용자 입력을 객체의 키로 사용할 때, 외부 API로부터 입력 받을 때, 동적 프로퍼티 이름 접근이 필요할 때
let user = {
id: 99,
name: "songhee",
age: 25,
gender: "female"
};
let whiteList = ["name", "age"];
let wantedKey = "age";
whiteList.includes(wantedKey) // true
console.log(user[wantedKey]) // 25
wantedKey = "gender";
whiteList.includes(wantedKey) // false, 화이트리스트 목록에 없음
console.log(user[wantedKey]) // female
- XSS (Cross-Site Scripting) 공격 방지
XSS 공격을 방지하기 위해서는 사용자가 입력한 데이터를 DOM에 넣기 전에 이스케이프 처리를 해야합니다.
라이브러리 등을 이용하여 구현할 수 있습니다.
참고한 자료: [JavaScript]객체의 프로퍼티를 접근하는 방법
