You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Please note: the `?.` syntax works exactly where it's placed, not any further.
65
+
위 예시를 통해 우리는 `?.`은 문법이 위치해 있는 그 자리에서만 동작하지, 확장되어 동작하지는 않는다는 것을 알 수 있습니다.
66
66
67
-
In the last two lines the evaluation stops immediately after `user?.`, never accessing further properties. But if the `user` actually exists, then the further intermediate properties, such as`user.address`must exist.
67
+
`user?.` 평가가 끝나고 `user`에 값이 없다는 것이 판별되면 그 즉시 평가를 멈추기 때문에 마지막 두 줄에서 에러가 발생하지 않았습니다. 평가가 끝나면 나머지 프로퍼티들엔 접근 자체를 하지 않기 때문입니다. 다만 `user`가 존재하는 경우엔`user.address`같은 중간 프로퍼티들이 평가대상이 되기 때문에 반드시 값이 있어야 에러가 발생하지 않습니다.
68
68
69
-
```warn header="Don't overuse the optional chaining"
70
-
We should use `?.` only where it's ok that something doesn't exist.
69
+
```warn header="옵셔널 체이닝을 남용하지 마세요."
70
+
`?.`는 존재하지 않아도 괜찮은 대상에만 사용해야 합니다.
71
71
72
-
For example, if according to our coding logic `user` object must be there, but `address` is optional, then`user.address?.street` would be better.
72
+
사용자 주소 관련 위 예시에서 논리상 `user`는 반드시 있어야 하는데 `address`는 필수값이 아닙니다. 그러니`user.address?.street`를 사용하는 것이 바람직합니다.
73
73
74
-
So, if`user` happens to be undefined due to a mistake, we'll know about it and fix it. Otherwise, coding errors can be silenced where not appropriate, and become more difficult to debug.
74
+
실수로 인해`user`에 값을 할당하지 않았다면 바로 알아낼 수 있도록 해야 합니다. 그렇지 않으면 에러를 조기에 발견하지 못하고 디버깅이 어려워집니다.
75
75
```
76
76
77
-
````warn header="The variable before `?.` must exist"
78
-
If there's no variable `user`, then `user?.anything`triggers an error:
77
+
````warn header="`?.`앞의 변수는 꼭 선언되어 있어야 합니다."
78
+
변수 `user`가 선언되어있지 않으면 `user?.anything`평가시 에러가 발생합니다.
79
79
80
80
```js run
81
81
// ReferenceError: user is not defined
82
82
user?.address;
83
83
```
84
-
The optional chaining only tests for`null/undefined`, doesn't interfere with any other language mechanics.
84
+
옵셔널 체이닝은 다른 언어 메커니즘엔 전혀 영향을 끼치지 않고 오직 `null/undefined` 여부만 검사합니다.
85
85
````
86
86
87
-
## Short-circuiting
87
+
## 단락 평가
88
88
89
-
As it was said before, the `?.` immediately stops ("short-circuits") the evaluation if the left part doesn't exist.
89
+
`?.`는 왼쪽 평가대상에 값이 없으면 즉시 평가를 멈춥니다(단락 평가, short-circuit).
90
90
91
-
So, if there are any further function calls or side effects, they don't occur:
91
+
따라서 `?.` 오른쪽에 있는 함수 호출 등의 부가 동작들은 `?.`의 평가가 멈췄을 때 더는 일어나지 않습니다.
92
92
93
93
```js run
94
94
let user =null;
95
95
let x =0;
96
96
97
-
user?.sayHi(x++); //nothing happens
97
+
user?.sayHi(x++); //아무 일도 일어나지 않습니다.
98
98
99
-
alert(x); // 0, value not incremented
99
+
alert(x); // 0, x의 값은 증가하지 않습니다.
100
100
```
101
101
102
-
## Other cases: ?.(), ?.[]
102
+
## ?.()와 ?.[]
103
103
104
-
The optional chaining `?.` is not an operator, but a special syntax construct, that also works with functions and square brackets.
104
+
`?.`은 연산자가 아니고 함수, 대괄호와 함께 동작하는 특별한 문법 구조체(syntax construct)입니다.
105
105
106
-
For example, `?.()` is used to call a function that may not exist.
106
+
`?.()`는 존재 여부가 확실치 않은 함수를 호출할 때 쓸 수 있습니다.
107
107
108
-
In the code below, some of our users have `admin` method, and some don't:
108
+
예시를 살펴봅시다. 한 객체엔 메서드 `admin`이 있지만 다른 객체엔 없는 상황입니다.
109
109
110
110
```js run
111
111
let user1 = {
112
112
admin() {
113
-
alert("I am admin");
113
+
alert("관리자 계정입니다.");
114
114
}
115
115
}
116
116
117
117
let user2 = {};
118
118
119
119
*!*
120
-
user1.admin?.(); //I am admin
120
+
user1.admin?.(); //관리자 계정입니다.
121
121
user2.admin?.();
122
122
*/!*
123
123
```
124
124
125
-
Here, in both lines we first use the dot `.` to get `admin` property, because the user object must exist, so it's safe read from it.
125
+
user 객체는 반드시 존재하기 때문에 `admin` 프로퍼티엔 `.`만 사용해 접근했습니다.
126
126
127
-
Then `?.()` checks the left part: if the user exists, then it runs (for `user1`). Otherwise (for `user2`) the evaluation stops without errors.
127
+
그리고 난 후 `?.()`를 사용해 `admin`의 존재 여부를 확인했습니다. `user1`엔 `admin`이 정의되어 있기 때문에 메서드가 제대로 호출되는 반면, `user2`엔 `admin`이 정의되어 있지 않기 때문에 에러 없이 그냥 평가가 멈추는 것을 확인할 수 있습니다.
128
128
129
-
The `?.[]` syntax also works, if we'd like to use brackets `[]` to access properties instead of dot `.`. Similar to previous cases, it allows to safely read a property from an object that may not exist.
129
+
`.`대신 대괄호 `[]`를 사용해 객체 프로퍼티에 접근하는 경우엔 `?.[]`를 사용할 수도 있습니다. 위 예시와 마찬가지로 `?.[]`를 사용하면 프로퍼티 존재 여부가 확실치 않은 경우에도 안전하게 프로퍼티를 읽을 수 있습니다.
130
130
131
131
```js run
132
132
let user1 = {
133
-
firstName:"John"
133
+
firstName:"Violet"
134
134
};
135
135
136
-
let user2 =null; //Imagine, we couldn't authorize the user
1.`obj?.prop`--`obj`가 존재하면`obj.prop`을 반환하고, 그렇지 않으면 `undefined`를 반환함
167
+
2.`obj?.[prop]`--`obj`가 존재하면`obj.[prop]`을 반환하고, 그렇지 않으면 `undefined`를 반환함
168
+
3.`obj?.method()`--`obj`가 존재하면 `obj.method()`를 호출하고, 그렇지 않으면`undefined`를 반환함
169
169
170
-
As we can see, all of them are straightforward and simple to use. The`?.`checks the left part for`null/undefined` and allows the evaluation to proceed if it's not so.
170
+
여러 예시를 통해 살펴보았듯이 옵셔널 체이닝 문법은 꽤 직관적이고 사용하기도 쉽습니다. `?.`왼쪽 평가 대상이 `null/undefined`인지 확인하고`null/undefined`가 아니라면 평가를 계속 진행하죠.
171
171
172
-
A chain of `?.` allows to safely access nested properties.
172
+
`?.`를 계속 연결해서 체인을 만들면 중첩 프로퍼티들에 안전하게 접근할 수 있습니다.
173
173
174
-
Still, we should apply `?.` carefully, only where it's ok that the left part doesn't to exist.
174
+
다만 `?.`은 `?.`왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 합니다.
175
175
176
-
So that it won't hide programming errors from us, if they occur.
176
+
꼭 있어야 하는 값인데 없는 경우에 `?.`를 사용해서 프로그래밍 에러를 쉽게 찾을 수 없게 하는 상황을 만들지 말도록 합시다.
0 commit comments